コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS3 を使用して、アニメーション化された軽い炎の効果を描画します。

CSS3 を使用して、アニメーション化された軽い炎の効果を描画します。

不言
リリース： 2018-06-20 15:48:52
オリジナル
1811 人が閲覧しました

この記事は主にライターアニメーションの炎効果を描くための純粋なCSS3の関連情報を詳しく紹介しています。興味のある方は参考にしてください。

この記事のサンプルはあなたと共有することを目的としています。ライターアニメーションの炎エフェクトの描画。具体的なコードは次のとおりです。

主に次の属性が含まれます: 

<span style="font-family:Comic Sans MS;">animation(webkit-animation),   
@keyframes name (@-webkit-keyframes name),   
transform,   
transform-origin,   
transition,   
box-shadow（spread属性）,   
text-shadow   
z-index   
linear-gradient。   
radial-gradient   
background-image    
</span>
ログイン後にコピー

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

 <span style="font-family:Comic Sans MS;"><!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>纯CSS绘制打火机动画火焰特效</title>
  <link rel="stylesheet" href="css/style.css">
 </head>
 <body class="keBody">
  <h1 class="keTitle">纯CSS3绘制打火机动画火焰特效</h1>
  <p class="kePublic">
   <p class="playground">
    <p class="flame"></p>
    <p class="lighterBody">
     <p class="hover">hover me</p>
    </p>
    <p class="lid"></p>
   </p>
   <p class="clear"></p>
  </p>
 </body>
</html></span>
ログイン後にコピー

style.cssファイルは次のとおりです: 

<span style="font-family:Comic Sans MS;">@charset "utf-8";   
body{   
 margin:0;   
 padding:0;   
 color:#333;   
 text-align:center;   
 font:12px "微软雅黑";   
}   
:before,:after{   
 position:absolute;   
 content:"";   
}   
.keBody{   
 background:url(../images/bodyBg.jpg) repeat #333;   
}   
.keTitle{   
 height:100px;   
 line-height:100px;   
 font-size:30px;   
 font-family:&#39;微软雅黑&#39;;   
 color:#fff;   
 text-align:center;   
 background:url(../images/bodyBg3.jpg) repeat-x bottombottom left;   
 font-weight:normal;   
 margin-bottom:0;   
}   
.kePublic{   
 background:#cccccc;   
 padding:50px;   
}   
.playground{   
 position:relative;   
 width:140px;   
 height:400px;   
 left:50%;   
 margin-left:-70px;   
}   
.flame{   
   opacity: 0;   
   position: absolute;   
   bottombottom: 60%;   
   left: 42%;   
   width: 14px;   
   height: 70px;   
   background-color: white;   
   border-radius: 100% 100% 0 0;   
   box-shadow: 0 0 20px #FFFEF0, 0 0 20px #FFFEE6, 0 0 20px #fefcc9,  10px -10px 30px #feec85,  -20px -20px 40px #ffae34,  20px -40px 50px #ec760c,  -20px -60px 60px #cd4606,  0 -80px 70px #973716,  10px -90px 80px #451b0e;   
}   
.playground:hover .flame {   
 opacity:1;   
 transition:opacity 3s linear;   
 -webkit-animation:flame 1s infinite linear;   
}   
.playground:hover .lid{   
 -webkit-animation:lidoff 1s linear;   
 /*把物体动画地从一个地方移动到另一个地方，并让它停留在那里：*/
 -webkit-animation-fill-mode:forwards;   
}   
.lighterBody{   
 position:absolute;   
 width:140px;   
 height:130px;   
 top:200px;   
 left:0;   
 background-image:linear-gradient(to rightright,#959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,   
     #4e4e4e 76%,#383838 87%,#1b1b1b 100%);   
 border-radius:2% 2% 8% 8%;   
 box-shadow:inset 0 0 5px 5px #333;   
}   
.lighterBody:before{   
 width:47px;   
 height:47px;   
 top:-50px;   
 left: 42px;   
 content:"...";   
 color:#e6e6e6;   
 border-radius:6% 6% 0 0;   
 background-image:linear-gradient(to rightright,#f5f5f5 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%);   
 font-size:30px;   
 font-weight:bold;   
 letter-spacing:7px;   
 line-height:16px;   
 text-shadow:0 0 5px black;   
 padding-top:3px;   
 padding-left:4px;   
}   
.lighterBody:after{   
 width:33px;   
 height:33px;   
 background-image:radial-gradient(ellipse at center,#7d737d 0%,#0e0e0e 100%);   
 border-radius:100%;   
 top:-33px;   
 left:10px;   
 box-shadow:inset 0 0 1px 2px gray;   
}   
.lid{   
 z-index:2;   
 position:absolute;   
 width:140px;   
 height:75px;   
 top:125px;   
 left:0;   
 background:linear-gradient(to rightright,#959595 0%,#0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%);   
 border-radius:8% 8% 2% 2%;   
 box-shadow:inset 0 0 5px 5px #333;   
 /*border-bottom:3px solid #f2f2f2;*/
}   
.lid:before{   
 width:10px;   
 height:10px;   
 top:70px;   
 left:133px;   
 background-image:radial-gradient(ellipse at center, #959595 0%, #0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%);   
 border-radius:100%;   
}   
.hover{   
 z-index:1;   
 text-align:center;   
 margin-top:30%;   
 color:rgba(255,255,255,0.9);   
 text-shadow:0 1px 1px rgba(0,0,0,0.8);   
 font: 20px "微软雅黑";   
}   
.hover:before{   
 content:"";   
 z-index:1;   
 width:0;   
 height:0;   
 top:-50px;   
 left:20px;   
 border-bottom:35px solid #f2f2f2;   
 /*border-left:10px solid transparent;*/
}   
@-webkit-keyframes flame{   
 0%{   
  height:70px;   
  transform:skewY(0deg);   
  border-radius:100% 100% 0 0;   
 }   
 25%{   
  height:60px;   
  transform:skewY(40deg);   
  border-radius:10% 100% 0 0;   
 }   
 60%{   
  height:65px;   
  transform:skewY(-20deg);   
  border-radius:90% 10% 0 0;   
 }   
 70%{   
  height:50px;   
  transform:skewY(10deg);   
  border-radius:10% 100% 0 0;   
 }   
 100%{   
  height:70px;   
  tranform:skewY(0deg);   
 }   
}   
@-webkit-keyframes lidoff{   
 from{   
  transform:rotate(0deg);   
  transform-origin:100% 100%;   
 }   
 to{   
  transform:rotate(130deg);   
  transform-origin:100% 100%;   
 }   
}</span>
ログイン後にコピー

初期写真:

動的写真

2 つの主なアニメーション効果があります。1 つは、マウスを「hover me」の上に置くとライターの蓋が開く状況です。は、次のアニメーション コードによって実装されます。 

 <span style="font-family:Comic Sans MS;font-size:12px;">@-webkit-keyframes lidoff{     注意这里要加上-webkit-   
     from{   
          transform:rotate(0deg);   
          transform-origin:100% 100%;   
     }   
     to{   
          transform:rotate(130deg);   
          transform-origin:100% 100%;   
     }   
}    
</span>
ログイン後にコピー

2 番目のアニメーションは、キャンドル ライトの効果です。 実装: キャンドルの変数は、transition:opacity 3s Linear によって実装されます。
風に揺れるキャンドル ライトの効果は、次のコード: 

<span style="font-family:Comic Sans MS;font-size:12px;">@-webkit-keyframes lidoff{   
    from{   
         transform:rotate(0deg);   
         transform-origin:100% 100%;   
    }   
    to{   
         transform:rotate(130deg);   
         transform-origin:100% 100%;   
    }   
</span>
ログイン後にコピー

ライターのカバーを胴体から分離する効果は次の方法で実現されます: box-shadow :inset 0 0 5px 5px #333; ここでは主に inset によって実装されます (insert を書かないように注意してください)。
ライターを点けたときに現れる丸いボールと小さな白い四角は、:after :before と z-index の組み合わせによって達成される効果です。

以下では、この例を通じて私が学んだ注意が必要な属性をいくつか紹介します。

transform-origin: デフォルトの初期位置は画像の中心で、100% 100% は右下に相当し、0% は左上に相当します。

before と :after : injected コンテンツは関連付けられたターゲット要素のサブ要素ですが、この要素のコンテンツの「前」または「後」に配置されます。挿入されたコンテンツはページのソース コードには表示されず、CSS でのみ表示されます。同時に挿入される要素は、デフォルトではインライン要素です。したがって、挿入された要素に高さ、パディング、マージンなどを与えるには、通常、ブロックレベルの要素 (display:block) を明示的に定義する必要があります。
さらに、コンテンツを挿入することはできませんが、コンテンツを記述する必要があります。コンテンツが挿入されない場合、コンテンツは content:"" として書き込まれます。
これら 2 つは要素です

。 擬似要素 (二重コロン)、css3 の擬似クラスは (単一コロン) です。

animation-fill-mode: none|forwards|backwards|both|initial|inherit;
アニメーションが再生されないときを指定します (アニメーションが完了したとき、またはアニメーションが開始するまでに遅延があったとき)、要素に適用されるスタイル。

background-image:は、pが背景を1つしか設定できないという問題を解決し、1つのpで複数の背景画像を設定できるようにします。
box-shadow: 忘れられがちなパラメータ、spread (拡張されたシャドウ半径)。このスプレッドはシャドウのサイズを変更します。値は正または負になります。値が正の場合、シャドウ全体が変化します。 be Extension は拡大し、それ以外の場合は負の値の場合は縮小します。このパラメータを使用すると、box-shadow を使用して、Photoshop の影付けのような片面の影効果を作成できます。ここで注意すべき点は、この拡張シャドウの値はシャドウのブラー半径と組み合わせて使用​​する必要があるということです。一般的な状況としては、「拡張シャドウの半径は通常、ブラー半径のサイズに設定され、その負の値が削除される」ということです。

上記がこの記事の全内容です。学習が役立つことを願っています。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

CSS3 を使用して羽ばたく蝶のコードを作成します

CSS3 を使用してバルーン スタイルの効果を実現します

以上がCSS3 を使用して、アニメーション化された軽い炎の効果を描画します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
css3 ライター
ソース：php.cn
前の記事：CSS3 remの解析について（フォントサイズの設定） 次の記事：divレイヤーのz-index属性の調整が無効になる問題の解決方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ページをモバイル対応にしますか? たくさんの Web ページといくつかの Web サイトがあります。問題は、私は初心者だということです。基本的な html5 と css3 を使用していますが、それらをスケールアップ...
から 2024-04-01 20:42:38
0
1
259
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート