HTML5+CSS3 マウスが画像の内外を移動してランダムなアニメーションを生成する_html/css_WEB-ITnose

今日は、html+css3+少量の jquery を使用して、マウスを写真の内外に移動することでランダムなアニメーションを生成する方法を共有します。まず、最終的なレンダリングを見てみましょう (スクリーンショットは静的効果です)。ただし、作成されると動的になります)

左右に回転

上下に移動

ズーム

時間の制約のため、コードステップの各部分の意味は分析しませんここでいくつかのアイデアとキーコードを説明します:

1. まず、ul li を使用して 4 つの写真を表示します

この例では、写真だけでなく、「」という単語を含むテキストも使用されています。 WEB」も画像の表面に配置され、画像を非表示または表示するため、HTML の各画像の上に追加します:

<div class="mytext">WEB</div>

2. CSS は画像とテキストの透明度を制御します

この例では、画像とテキストのグループが同時に li に配置され、高さと幅が li と同じ大きさに設定され、絶対位置を使用して位置を固定します。

#myimg ul li a div {position: absolute;top: 0;left: 0;width: 100%;height: 100%;text-align: center;font-size: 40px;}

デフォルトの画像は非表示の場合、テキストのみが表示され、li にマウスを置くと画像が表示されます。ここでは、不透明度の透明度属性を使用して次の制御を行います。たとえば、CSS3 を使用して 3 つのアニメーションが定義されています:

#myimg ul li a div.pic {opacity: 0;}#myimg ul li:hover a div.pic {opacity: 1;}

CSS を使用して上記のカスタム アニメーションを実行します:

 @keyframes rot /*自定义 旋转动画*/                        { 0% 20% 40% 60% 80% 100% { transform-origin: top center;                } 0% { transform: rotate(0deg) } 20% { transform: rotate(-20deg) } 40% { transform: rotate(15deg) } 60% { transform: rotate(-10deg) } 80% { transform: rotate(5deg) } 100% { transform: rotate(0deg) } } @keyframes top /*自定义 上下动画*/                        { 0% { top: 0 } 20% { top: 20px } 40% { top: -15px } 60% { top: 10px } 80% { top: -5px } 100% { top: 0px } } @keyframes sca /*自定义 缩放动画*/                        { 0% { transform: scale(1) } 20% { transform: scale(1.1) } 40% { transform: scale(0.9) } 60% { transform: scale(1.05) } 80% { transform: scale(0.95) } 100% { transform: scale(1) } }

4. Jquery はランダムなアニメーションを生成します

ウルリに移動し、ここでは、jquery を使用して上記 3 つのカスタム アニメーションをランダムに生成します。 hover イベントの使用

HTML コードは次のとおりです:

#myimg ul li.rot {animation: rot 1s;}#myimg ul li.top {animation: top 1s;}#myimg ul li.sca {animation: sca 1s;}

CSS コードは次のとおりです:

りー

Jquery コードは次のとおりです:

            
                
                                            <div class="mytext">WEB</div>                        
                                    
                
                                            <div class="mytext">WEB</div>                        
                                    
                
                                            <div class="mytext">WEB</div>                        
                                    
                
                                            <div class="mytext">WEB</div>                        
                                    
            
        

注: jquery を導入する必要があります ファイル、jquery のバージョンは自分で選択できます

今日の共有はここまでです。今後さらに多くのことを共有する予定です。私たち