亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

一款純css3制作的2015年元旦雪人動畫特效教程

  發(fā)布時間：2014-12-29 09:17:47   作者：佚名   我要評論
在元旦的時候我們可以在現(xiàn)實中堆雪人也可以用css3堆雪人，今天和大家分享一款純css3實現(xiàn)的雪人動畫特效。該實例實現(xiàn)一個雪人跳動的特效，下面有詳細的代碼，感興趣的可以來學習一下

　　在圣誕節(jié)或者是元旦的時候，愛編程小編給大家分享一款純css3實現(xiàn)的雪人動畫特效。該實例實現(xiàn)一個雪人跳動的特效，效果圖如下：

　　實現(xiàn)的代碼。

　　html代碼：

XML/HTML Code復制內(nèi)容到剪貼板
  1. <span class="text">lolwut<small>-@rsmswlln</small></span>  
  2.    <div class="body">  
  3.        <div class="hat">  
  4.            <div class="ribbon">  
  5.            </div>  
  6.        </div>  
  7.        <div class="face">  
  8.        </div>  
  9.        <div class="scarf">  
  10.        </div>  
  11.        <div class="right-arm">  
  12.            <div class="hand">  
  13.            </div>  
  14.        </div>  
  15.        <div class="left-arm">  
  16.            <div class="hand">  
  17.            </div>  
  18.        </div>  
  19.    </div>  
  20.    <div class="puddle">  
  21.    </div>  

　　css代碼：

CSS Code復制內(nèi)容到剪貼板
  1. body {   
  2.   background: #c0392b;   
  3. }   
  4. .body {   
  5.   width: 250px;   
  6.   height: 250px;   
  7.   background: #ffffff;   
  8.   border-radius: 50%;   
  9.   box-shadow: inset -20px -5px 35px rgba(0, 0, 0, 0.2);   
  10.   position: absolute;   
  11.   rightright: 0;   
  12.   left: 0;   
  13.   margin: 300px auto;   
  14.   animation: jump 1s infinite;   
  15. }   
  16. .body:before {   
  17.   z-index: 2;   
  18.   content: "";   
  19.   width: 180px;   
  20.   height: 180px;   
  21.   background: #ffffff;   
  22.   border-radius: 50%;   
  23.   box-shadow: inset -10px -5px 10px rgba(0, 0, 0, 0.2);   
  24.   position: relative;   
  25.   display: inline-block;   
  26.   top: -120px;   
  27.   left: 25px;   
  28. }   
  29. .body:after {   
  30.   content: "";   
  31.   width: 140px;   
  32.   height: 140px;   
  33.   background: #ffffff;   
  34.   border-radius: 50%;   
  35.   box-shadow: inset -10px -5px 10px rgba(0, 0, 0, 0.2);   
  36.   position: relative;   
  37.   display: inline-block;   
  38.   top: -400px;   
  39.   left: 20px;   
  40. }   
  41. .body > .hat {   
  42.   width: 200px;   
  43.   height: 15px;   
  44.   border-radius: 50%;   
  45.   background-color: #111111;   
  46.   position: absolute;   
  47.   z-index: 4;   
  48.   top: -200px;   
  49.   left: -15px;   
  50. }   
  51. .body > .hat:before {   
  52.   content: "";   
  53.   width: 100px;   
  54.   height: 65px;   
  55.   background-color: #111111;   
  56.   display: inline-block;   
  57.   position: relative;   
  58.   top: -55px;   
  59.   left: 51px;   
  60. }   
  61. .body > .hat:after {   
  62.   z-index: 5;   
  63.   content: "";   
  64.   display: inline-block;   
  65.   position: relative;   
  66.   top: -145px;   
  67.   left: 51px;   
  68.   width: 100px;   
  69.   height: 5px;   
  70.   border-radius: 50%;   
  71.   background-color: #2b2b2b;   
  72. }   
  73. .body > .hat > .ribbon {   
  74.   height: 10px;   
  75.   width: 100px;   
  76.   background-color: #6d2018;   
  77.   position: relative;   
  78.   top: -90px;   
  79.   left: 51px;   
  80.   z-index: 6;   
  81. }   
  82. .body > .face {   
  83.   z-index: 3;   
  84.   width: 12px;   
  85.   height: 12px;   
  86.   background-color: #2c3e50;   
  87.   border-radius: 50%;   
  88.   position: absolute;   
  89.   top: -170px;   
  90.   left: 38px;   
  91. }   
  92. .body > .face:before {   
  93.   content: "";   
  94.   background-color: transparent;   
  95.   display: inline-block;   
  96.   position: relative;   
  97.   top: 30px;   
  98.   left: -45px;   
  99.   transform: rotate(-15deg);   
  100.   border-top: 12px solid transparent;   
  101.   border-bottom: 12px solid transparent;   
  102.   border-right: 40px solid #e67e22;   
  103. }   
  104. .body > .face:after {   
  105.   content: "";   
  106.   background-color: transparent;   
  107.   display: inline-block;   
  108.   position: relative;   
  109.   top: 0;   
  110.   left: -46px;   
  111.   transform: rotate(-15deg);   
  112.   border-top: 12px solid transparent;   
  113.   border-right: 40px solid #bf6516;   
  114. }   
  115. .body > .scarf {   
  116.   z-index: 3;   
  117.   width: 150px;   
  118.   height: 30px;   
  119.   background-color: #2980b9;   
  120.   position: absolute;   
  121.   top: -110px;   
  122.   left: 25px;   
  123.   transform: rotate(-15deg);   
  124.   border-radius: 20%;   
  125. }   
  126. .body > .scarf:after {   
  127.   content: "";   
  128.   width: 75px;   
  129.   height: 30px;   
  130.   background-color: #2980b9;   
  131.   display: inline-block;   
  132.   position: relative;   
  133.   top: 16px;   
  134.   left: 80px;   
  135.   transform: rotate(85deg);   
  136.   border-radius: 20%;   
  137. }   
  138. .body > .left-arm,   
  139. .body .rightright-arm {   
  140.   z-index: 7;   
  141.   width: 100px;   
  142.   height: 6px;   
  143.   background-color: #825a2c;   
  144.   position: absolute;   
  145.   top: 10px;   
  146.   left: -20px;   
  147.   transform: rotate(-15deg);   
  148.   animation: rub-rightright 0.5s infinite;   
  149. }   
  150. .body > .left-arm > .hand,   
  151. .body .rightright-arm > .hand {   
  152.   width: 25px;   
  153.   height: 6px;   
  154.   background-color: #825a2c;   
  155.   position: absolute;   
  156.   top: -32px;   
  157.   left: -60px;   
  158.   transform: rotate(75deg);   
  159. }   
  160. .body > .left-arm:after,   
  161. .body .rightright-arm:after {   
  162.   content: "";   
  163.   width: 75px;   
  164.   height: 6px;   
  165.   background-color: #a87439;   
  166.   display: inline-block;   
  167.   position: relative;   
  168.   top: -24px;   
  169.   left: -70px;   
  170.   transform: rotate(25deg);   
  171. }   
  172. .body > .left-arm.left-arm,   
  173. .body .rightright-arm.left-arm {   
  174.   background-color: #a87439;   
  175.   animation: rub-left 0.5s infinite;   
  176.   top: -15px;   
  177.   z-index: 1;   
  178. }   
  179. .body > .left-arm.left-arm > .hand,   
  180. .body .rightright-arm.left-arm > .hand {   
  181.   background-color: #a87439;   
  182.   top: -14px;   
  183.   transform: rotate(45deg);   
  184. }   
  185. .body > .left-arm.left-arm:after,   
  186. .body .rightright-arm.left-arm:after {   
  187.   background-color: #825a2c;   
  188.   transform: rotate(5deg);   
  189.   top: -12px;   
  190.   left: -74px;   
  191. }   
  192. .puddle {   
  193.   z-index: -1;   
  194.   width: 200px;   
  195.   height: 100px;   
  196.   background: #2980b9;   
  197.   border-radius: 50%;   
  198.   position: absolute;   
  199.   rightright: 0;   
  200.   left: -50px;   
  201.   margin: 500px auto;   
  202. }   
  203. .puddle:after {   
  204.   content: "";   
  205.   width: 120px;   
  206.   height: 80px;   
  207.   display: inline-block;   
  208.   border-radius: 50%;   
  209.   left: 150px;   
  210.   position: relative;   
  211.   background-color: #2980b9;   
  212. }   
  213. .text {   
  214.   text-align: center;   
  215.   font-family: 'Lobster', cursive;   
  216.   font-size: 74px;   
  217.   display: inline-block;   
  218.   transform: rotate(-15deg);   
  219.   position: absolute;   
  220.   margin: 50px 30px;   
  221.   color: #ffffff;   
  222.   text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.5);   
  223. }   
  224. .text > small {   
  225.   font-size: 20px;   
  226.   display: block;   
  227. }   
  228. @keyframes rub-left {   
  229.   0% {   
  230.     margin-left: 0px;   
  231.     margin-top: 0;   
  232.   }   
  233.   50% {   
  234.     margin-left: 5px;   
  235.     margin-top: 1px;   
  236.   }   
  237.   100% {   
  238.     margin-left: 0px;   
  239.     margin-top: 0;   
  240.   }   
  241. }   
  242. @keyframes rub-rightright {   
  243.   0% {   
  244.     margin-left: 4px;   
  245.   }   
  246.   50% {   
  247.     margin-left: 0px;   
  248.   }   
  249.   100% {   
  250.     margin-left: 4px;   
  251.   }   
  252. }   
  253. @keyframes jump {   
  254.   0% {   
  255.     margin: 300px auto;   
  256.   }   
  257.   40% {   
  258.     margin: 250px auto;   
  259.   }   
  260.   80% {   
  261.     margin: 300px auto;   
  262.   }   
  263. }  

相關(guān)文章

  • CSS3 最強二維布局系統(tǒng)之Grid 網(wǎng)格布局

    CS3的Grid網(wǎng)格布局是目前最強的二維布局系統(tǒng),可以同時對列和行進行處理,將網(wǎng)頁劃分成一個個網(wǎng)格,可以任意組合不同的網(wǎng)格,做出各種各樣的布局，本文介紹CSS3 最強二維布局系
    2025-02-27

  • 如何使用CSS3實現(xiàn)波浪式圖片墻

    本文介紹了如何使用CSS3的transform屬性和動畫技巧實現(xiàn)波浪式圖片墻,通過設置圖片的垂直偏移量,并使用動畫使其周期性地改變位置,可以創(chuàng)建出動態(tài)且具有波浪效果的圖片墻,同
    2025-02-27

  • CSS3模擬實現(xiàn)一個雷達探測掃描動畫特效(最新推薦)

    文章介紹了如何使用CSS3實現(xiàn)一個雷達探測掃描的效果,包括夜色背景、蜘蛛網(wǎng)盤、掃描體的轉(zhuǎn)動效果、尾巴陰影以及被掃描到的光點,通過HTML和CSS的配合,實現(xiàn)了豐富的動畫效果,
    2025-02-21

  • css3 display:flex 彈性盒模型的使用方法

    CSS3的Flexbox是一種強大的布局模式,通過設置display:flex可以輕松實現(xiàn)對齊、排列和分布網(wǎng)頁元素,它解決了傳統(tǒng)布局方法中的對齊、間距分配和自適應布局等問題,接下來通過本
    2025-02-19

  • css3 實現(xiàn)icon刷新轉(zhuǎn)動效果

    本文給大家介紹css3 實現(xiàn)icon刷新轉(zhuǎn)動效果，文章開頭給大家介紹了webkit-transform、animation、@keyframes這三個屬性，結(jié)合實例代碼給大家介紹的非常詳細，感興趣的朋友一
    2025-02-19

  • CSS3動態(tài)效果之過渡屬性(最新推薦)

    CSS3過渡屬性用于實現(xiàn)元素從一種樣式平滑過渡到另一種樣式,通過設置transition-property過渡屬性、transition-duration過渡時長transition-timing-function過渡函數(shù)和trans
    2025-02-19

  • CSS3實現(xiàn)動態(tài)旋轉(zhuǎn)加載樣式的示例代碼

    本文介紹了如何使用CSS3創(chuàng)建一個簡單的動態(tài)旋轉(zhuǎn)加載樣式,通過定義一個帶有類名“l(fā)oader”的HTML元素,并使用CSS樣式和@keyframes規(guī)則來實現(xiàn)旋轉(zhuǎn)動畫,你可以根據(jù)需要調(diào)整樣式
    2025-02-19

  • 使用CSS3實現(xiàn)平滑的過渡動畫效果(實例代碼)

    這篇文章主要介紹了如何使用CSS3的transition屬性實現(xiàn)平滑的過渡動畫，本文通過實例代碼給大家介紹的非常詳細，感興趣的朋友一起看看吧
    2025-02-13

  • CSS3中使用flex和grid實現(xiàn)等高元素布局的示例代碼

    本文介紹了使用CSS3中的Flexbox和Grid布局實現(xiàn)等高元素布局的方法,通過簡單的兩列實現(xiàn)、每行放置3列以及全部代碼的展示,展示了這兩種布局方式的實現(xiàn)細節(jié)和效果，感興趣的朋
    2025-02-11

  • 使用CSS3和SVG創(chuàng)建圓形進度條動畫效果

    CSS3和SVG的結(jié)合使用為網(wǎng)頁設計帶來了創(chuàng)新的動態(tài)視覺效果,本文通過一個圓形進度條的動畫特效示例,展示了如何利用CSS3的動畫功能和SVG的矢量圖形能力來創(chuàng)建豐富的用戶交互體
    2024-10-24

最新評論