主要涉及到了以下屬性：
<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:'微軟雅黑'; 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>
初始照片：
動態照片
動畫效果主要有兩個，一是當滑鼠移至上方在“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>
第二個動畫是蠟燭燈光效果的實現：蠟燭由按變數是由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%相當於 right bottom. 0% 0%相當於 left top.
before 和:after : 注入的內容是有關聯的目標元素的字子項目，但它會被置於這個元素任何內容的“前” 或"後"。插入的內容在頁面的源碼裡是看不見的，只能在css裡看見。同時插入的元素在預設情況是內嵌元素。因此，為了給插入的元素賦予高度、填充、邊距等等，通常必須顯示的定義一個區塊層級元素（display:block）。
此外，雖然可能不會插入任何內容，但是content必須寫上，如果不插入任何內容，那麼content寫成 content:"";
IE6和IE7不相容這兩個為元素
虛擬元素(雙冒號)，css3中的偽類是（單冒號）
animation-fill-mode: none|forwards|backwards|both|initial|inherit;
規定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式。
background-image:解決了p只能設定一個背景的問題，使一個p可以設定多個背景圖片。
box-shadow:一個經常被遺忘的參數--spread(擴充陰影半徑),這個曾經被遺忘的spread改變陰影的大小---其值可以是正負值，如果值為正，則整個陰影都延展擴大，反之是負值，則縮小。有了這個參數後可以使用box-shadow像photoshop中的陰影工作一樣，製作單邊陰影製作效果。這裡注意一點，這個擴充陰影值需要和陰影模糊半徑配合使用，一般情況是“擴充陰影半徑一般設定為和模糊半徑大小，並去其負值”
以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援topic.alibabacloud.com。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
