ホームページ > 記事 > ウェブフロントエンド > 制御可能な速度 CSS3 回転風車特殊効果
制御可能な速度 CSS3 回転風車特殊効果
- 高洛峰オリジナル
- 2017-02-23 10:44:122695ブラウズ
以前は、Web アニメーションを作成するには JavaScript が一般的でしたが、現在では純粋な CSS を使用してアニメーションを実装することが増えています。CSS 3 の登場により、CSS 3 のアニメーション機能は確かに強力です。 。以下は CSS3 のみで作成された風車の回転アニメーションで、速度の制御にも CSS3 を使用しています。
体験効果:
http://hovertree.com/texiao/css3/40/
レンダリング: 
ご覧のとおり、風車の羽根は三角形になっています。CSSを使用してさまざまなグラフィックを描画します。参照してください:
http://hovertree.com/h/bjaf/jtkqnsc1.htm
http://hovertree.com/h/bjaf/ltgc20vn.htm
CSSアニメーションはanimation属性を使用します。参照してください:
http://hovertree.com/h/bjaf/i309b77d.htm
http://hovertree.com/h/bjaf/fwck53gt.htm
http://hovertree。 com/h /bjaf/xpxgjfap.htm
http://hovertree.com/h/bjaf/kqud99m6.htm
ファンブレードの回転にはトランスフォーム属性が使用されます。参照:
http:// hovertree.com/h /bjaf/c3bshswk.htm
http://hovertree.com/h/bjaf/lxsexx3m.htm
この例では、CSS 3 セレクターの n 番目のタイプを使用します。参照:
http://hovertree.com/h/bjaf/c2c0k0tf.htm
この例のコードは以下のとおりです:
<!DOCTYPE html><html lang="zh-CN">
<head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>可控制转速CSS3旋转风车特效 - 何问起</title>
<link rel="stylesheet" href="http://hovertree.com/texiao/css3/40/style/hovertreespin.css">
</head><body><p class="wrapper">
<p class="pin-layout">
<a href="#" class="control">暂停</a>
<a href="#" class="control">旋转</a>
<a href="#" class="control">中速</a>
<a href="#" class="control">高速</a>
<p class="pillar">
<p class="dot"></p>
<span class="item1"></span>
<span class="item2"></span>
<span class="item3"></span>
<span class="item4"></span>
</p>
</p>
<p><b>何问起温馨小提示：</b>暂停后点击页面任何区域都可自动旋转哦!</p></p><!-- end wrapper --><p style="text-align:center;margin:100px 0; font:normal 14px/24px 'MicroSoft YaHei';"><p>适用于支持CSS3的浏览器。</p><p>来源：<a href="http://hovertree.com/" target="_blank">何问起</a> <a href="http://hovertree.com/h/bjag/efqb2w4s.htm" target="_blank">说明</a></p></p></body></html>CSS ファイルコード:
使用する画像ファン葉っぱの風車:
http://hovertree.com/h/bjaf/h9tb5itb.htm
特殊効果コレクション: