ホームページ > 記事 > ウェブフロントエンド > CSSのcolumn-countプロパティをアニメーション化する
CSSのcolumn-countプロパティをアニメーション化する
- WBOY転載
- 2023-08-31 13:37:17709ブラウズ
CSS の column-count プロパティを使用してアニメーション効果を実現するには、次のコードを実行してみてください。
Example
#リアルタイムデモンストレーション
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height: 300px;
background: white;
border: 10px solid red;
animation: myanim 3s infinite;
bottom: 30px;
position: absolute;
}
@keyframes myanim {
20% {
bottom: 100px;
box-shadow: 30px 45px 70px orange;
column-count: 4;
}
}
</style>
</head>
<body>
<h2>Performing Animation on column-count property</h2>
<div>This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text!</div>
</body>
</html>以上がCSSのcolumn-countプロパティをアニメーション化するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事はtutorialspoint.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。