ホームページ > 記事 > ウェブフロントエンド > 画像拡大アニメーションをCSSで実装する方法
方法: 1. "@keyframes アニメーション名 {}" ルールと "transform:scale (scale);" ステートメントを使用して、ズームイン アニメーションを作成します。 2. "ピクチャー エレメント {アニメーション:アニメーション名 時間無限 ;}" ステートメント スケーリング アニメーションは画像要素に適用されます。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
CSS では、アニメーション属性、「@keyframes」ルール、transform:scale() を使用して、画像のズームイン アニメーションを実装できます。
#例 1:
<div class="ballon"></div>
/*css部分*/ @keyframes scaleDraw { /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/ 0%{ transform: scale(1); /*开始为原始大小*/ } 25%{ transform: scale(1.1); /*放大1.1倍*/ } 50%{ transform: scale(1); } 75%{ transform: scale(1.1); } } .ballon{ width: 150px; height: 200px; background: url("images/balloon.png"); background-size: 150px 200px; -webkit-animation-name: scaleDraw; /*关键帧名称*/ -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/ -webkit-animation-iteration-count: infinite; /*动画播放的次数*/ -webkit-animation-duration: 5s; /*动画所花费的时间*/ }上記の属性は一緒に記述することもできます
animation: scaleDraw 5s ease-in-out infinite; -webkit-animation: scaleDraw 5s ease-in-out infinite;効果:
<div class="live"> <img src="images/live.png" alt=""> <span></span> <span></span> </div>
.live{ position: relative; width: 100px; height: 100px; } .live img{ width: 100px; height: 100px; z-index: 0; } @keyframes living { 0%{ transform: scale(1); opacity: 0.5; } 50%{ transform: scale(1.5); opacity: 0; /*圆形放大的同时,透明度逐渐减小为0*/ } 100%{ transform: scale(1); opacity: 0.5; } } .live span{ position: absolute; width: 100px; height: 100px; left: 0; bottom: 0; background: #fff; border-radius: 50%; -webkit-animation: living 3s linear infinite; z-index: -1; } .live span:nth-child(2){ -webkit-animation-delay: 1.5s; /*第二个span动画延迟1.5秒*/ }本質は、アニメーションの遅延属性を使用することです。2 つの円のレイヤーのアニメーション関連の属性は、基本的に次のとおりです。一番外側の円に加えて、アニメーション遅延属性が設定されています(学習ビデオ共有:
css ビデオ チュートリアル)
以上が画像拡大アニメーションをCSSで実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。