ホームページ > 記事 > ウェブフロントエンド > 純粋な Css3 手作り Web ページ画像効果
効果:
コード:
<style>
.rotate-demo {
width: 220px;
height: 220px;
margin: 0 auto;rrリー
background: no-repeat url("images/author.jpg") left top;
-webkit-background-size: 220px 220px;
-moz-background-size: 220px 220px;
background-size: 220px 220px;
-webkit-border-radius: 110px;❤️ 知識ポイント: CSS3のtransform属性は2Dまたは3Dを適用できます変換。このプロパティを使用すると、要素を回転、拡大縮小、移動、または傾けることができます。 Z 軸に沿った DOM 要素の 3D 回転を実装するには、rotateZ(angle) に設定します。関連する設定には、rotate、rotate3d、rotateX、rotateY があります。 画像にカーソルを合わせると拡大します 効果:
コード:
りー
りー❤️
border-radius: 110px;
-webkit-transition: -webkit-transform 2s ease-out;
-moz-transition: -moz-transform 2s ease-out;
-o-transition: -o-transform 2s ease-out;
-ms-transition: -ms-transform 2s ease-out;
}
<br>
.rotate-demo:hover {
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
</style>
<br>
<p class="rotate-demo"></p>rreeerreeerreee
CSS3:rreee
<style type="text/css">
.img-container {
background-color: #000;
width: 220px;
height: 220px;
margin: 20px 50px;
}
<br>
.img {
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
-o-transform: scale(0.6);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
}
<br>
.img img {rreee
padding: 1px;
border-radius: 10px;❤️
border: 1px solid #fff;
}
<br>
.img:hover {
-webkit-transform: scale(0.8);
-webkit-box-shadow: 0px 0px 30px #ccc;
-moz-transform: scale(0.8);
りー
りーりーりーりーりーりーりーりーりーりーりーりーりーりーええるれぇrrreeerrreeerrreeerrreeerrreeerrreee ❤️-moz-box-shadow: 0px 0px 30px #ccc;
-o-transform: scale(0.8);
-o-box-shadow: 0px 0px 30px #ccc;
}
</style>
<br>
HTML:知識ポイント: CSS3 のtransform属性とアニメーション属性に依存しており、Y軸に沿った要素の3D回転を定義するにはrotateYを使用し、Z軸に沿った要素の3D変換を定義するにはtranslateZを使用します。同時に、要素のアニメーション属性を設定してアニメーション効果を実現します。この記事では次のように定義されています:
<p class="img-container">animation-name (バインドする必要があるキーフレーム名)セレクターへ): 回転アニメーション animation-duration (アニメーションが完了するまでにかかる時間): 20 秒 anime-iteration-count (アニメーションを再生する回数): 無限 (無限回) animation-timing-関数 (アニメーションの速度曲線): 線形 (アニメーションの速度は最初から最後まで同じです) より純粋な Css3 手作り Web ページの画像効果 関連記事については、PHP 中国語に注意してください。 Webサイト!