新年已經到來,各個網站都舉辦着各種不同類型的活動,'會呼吸的信封'有可能就是你遇到的其中一種.其實就是一個信封的樣式,在封口處加上開合開合的動畫效果,吸引用戶去打開這個信封,點擊后可能會送紅包,優惠券或介紹其他相關的活動內容.
動畫原理非常簡單:先寫出信封的樣式,然后將封口處的元素使用rotateX旋轉。這其中用到的技術就是3D transform的運用。
1. 先看截圖
2. 代碼實現思路
2.1寫出信封的樣式。
利用樣式實現三角形的形狀一般有兩種做法：一是使用邊框，二是使用方形的元素旋轉。第一種辦法靈活性好，寬高靈活設置。
2.2對封面的元素定義動畫。
封面的元素也為三角形形狀，一開一合的效果其實就是元素繞着X軸旋轉。使用3D的transform效果設置如下：
-webkit-transform-style:preserve-3d;-webkit-perspective:1500;-webkit-transform-origin:0 0;
具體的屬性說明參考如下：http://www.w3school.com.cn/css3/css3_3dtransform.asp
動畫的設置如下：
-webkit-animation:breath 1.2s ease infinite alternate;、
具體的屬性說明參考如下：http://www.w3school.com.cn/cssref/pr_animation.asp
2. 源代碼
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;"> 5 <title>CSS3效果之會呼吸的信封</title> 6 <meta name="author" content="rainna" /> 7 <meta name="keywords" content="rainna's css lib" /> 8 <meta name="description" content="CSS3" /> 9 <style> 10 *{margin:0;padding:0;} 11 body{background:#f0f0f0;} 12 13 /* 信封樣式1 */ 14 .m-envelope,.m-envelope2{position:relative;width:602px;height:382px;margin:100px auto;background:#F1F1F1;overflow:hidden;} 15 .m-envelope:before,.m-envelope:after{content:'';position:absolute;left:0;top:1px;width:0;height:0;border-left:235px solid #FFFAF7;border-top:190px solid transparent;border-bottom:190px solid transparent;} 16 .m-envelope:after{right:0;left:auto;-webkit-transform:rotate(180deg);} 17 .m-envelope .item,.m-envelope .item2{position:absolute;left:1px;bottom:0;width:0;height:0;border-bottom:242px solid #FFF7FE;border-left:300px solid transparent;border-right:300px solid transparent;} 18 .m-envelope .item2{top:0;bottom:auto;z-index:2;border-top:250px solid #F1F1F1;border-bottom:none;} 19 .m-envelope .item2-cover{border-top:246px solid #fff;} 20 .m-envelope .item2-cover:before{content:'幫我打開';position:absolute;left:-8px;top:-190px;color:#99c800;line-height:2;font-weight:bold;} 21 22 /* 信封封面動畫樣式1 */ 23 .m-envelope .item2-cover{-webkit-transform-style:preserve-3d;-webkit-perspective:1500;-webkit-transform-origin:0 0;-webkit-animation:breath 1.2s ease infinite alternate;} 24 25 @-webkit-keyframes breath{ 26 100%{-webkit-transform:rotateX(20deg);} 27 } 28 29 30 31 /* 信封樣式2 */ 32 .m-envelope2{background:#fff;} 33 .m-envelope2:before,.m-envelope2 .item{content:'';position:absolute;left:0;top:100%;width:422px;height:422px;border-width:2px;border-style:solid;border-color:#F1F1F1 #F1F1F1 transparent transparent;-webkit-transform-origin:left top;-webkit-transform:rotate(-45deg);} 34 .m-envelope2 .item{top:0;border-color:transparent transparent #F1F1F1 #F1F1F1;background:#F1F1F1;} 35 .m-envelope2 .item-cover{background:#fff;} 36 37 /* 信封封面動畫樣式2 */ 38 .m-envelope2 .f-trans{-webkit-transform-style:preserve-3d;-webkit-perspective:1500;-webkit-transform-origin:0 0;-webkit-animation:breath 1.2s ease infinite alternate;} 39 </style> 40 </head> 41 42 <body> 43 <div class="m-envelope"> 44 <div class="item"></div> 45 <div class="item2"></div> 46 <div class="item2 item2-cover"></div> 47 </div> 48 49 <div class="m-envelope2"> 50 <div class="item"></div> 51 <div class="f-trans"> 52 <div class="item item-cover"></div> 53 </div> 54 </div> 55 </body> 56 </html>
源碼下載:http://pan.baidu.com/s/1o6iI9tC