制御可能な速度 CSS3 回転風車特殊効果-CSSチュートリアル-php.cn

制御可能な速度 CSS3 回転風車特殊効果

高洛峰

リリース： 2017-02-23 10:44:12

オリジナル

2735 人が閲覧しました

以前は、Web アニメーションを作成するには JavaScript が一般的でしたが、現在では純粋な CSS を使用してアニメーションを実装することが増えています。CSS 3 の登場により、CSS 3 のアニメーション機能は確かに強力です。。以下は CSS3 のみで作成された風車の回転アニメーションで、速度の制御にも CSS3 を使用しています。

体験効果:
http://hovertree.com/texiao/css3/40/

レンダリング:
可控制转速CSS3旋转风车特效

ご覧のとおり、風車の羽根は三角形になっています。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 &#39;MicroSoft YaHei&#39;;"><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

特殊効果コレクション:

http://www.cnblogs.com/roucheng/p/texiao.html

その他制御可能な速度 CSS3 回転風車特殊効果関連記事については、PHP 中国語 Web サイトに注目してください。