巅云智能建站平台搭建版(创业流派版)火爆上线,毕生受权!新增:文章智能收罗+全站真静态打包+都会分站+智能小法式+不法词过滤+H5自顺应+智能链词等功效功效概况
建站专提News

CSS3完成心爱的小黄人动画

一佰互联网站开辟设想(www.taishanly.com) 宣布日期 2020-04-21 17:23:36 阅读数: 156

每次看到CSS3动画就心痒痒想试一下,记得一个多月前看了白树哥哥的一篇博客,俄然开窍,因而拿他供给的demo试了一下,感受很棒!下图为demo供给的动画帧设想稿。

本身也想说搞一个DIY的动画出来,但是,会PS不必然会设想啊,我搞不出一套动画设想稿出来啊【抓狂】….因而乎,去了站酷网找找素材,我公然仍是太无邪了,最初从心只找到了一张图:

遐想到我要做CSS3动画,呵呵……怎样办 ? ——没体例,抠呗!(此处勿喷,实在无素材)

……最初结果变成这模样,这是挪动真个例子!(gif图有卡顿景象,请对付看吧,非喜勿喷…):

OK,实在首要目标仍是常识点的进修吧:

这个demo触及的常识点有:

perspective

perspective-origin

transform-style

transform-origin

animation

@keyframes

translate3d,translateX,rotateY….

这些常识点有些触及css3d动画,各个常识点的详细详解我就不诠释了,有乐趣能够到这里领会一下:http://isux.tencent.com/css3/index.html

回到这个案例,话说这么挫的动画是怎样详细完成的呢? 我将分享代码给大师操练:

html布局:

XML/HTML Code复制内容到剪贴板
  1. <body>  
  2.     <div class="title">  
  3.         <p>小黄人</p>  
  4.     </div>  
  5.     <div class="wrapper">  
  6.         <div class="littleH">  
  7.             <div class="light">  
  8.                 <div class="light_left">  
  9.                     <p>接待接待,强烈热闹接待</p>  
  10.                 </div>  
  11.                 <div class="light_right">  
  12.                     <p>接待接待,强烈热闹接待</p>  
  13.                 </div>  
  14.                 <div class="load"></div>  
  15.             </div>  
  16.             <div class="littleH_body">  
  17.                 <div class="leftHair"></div>  
  18.                 <div class="rightHair"></div>  
  19.                 <div class="leftBlackeye"></div>  
  20.                 <div class="leftWhiteeye"></div>  
  21.                 <div class="rightBlackeye"></div>  
  22.                 <div class="rightWhiteeye"></div>  
  23.                 <div class="mouse"></div>  
  24.                 <div class="leftFoot"></div>  
  25.                 <div class="rightFoot"></div>  
  26.             </div>  
  27.         </div>  
  28.     </div>  
  29. </body>  

css代码:

CSS Code复制内容到剪贴板
  1. body{   
  2.             margin: 0;   
  3.             padding: 0;   
  4.             width: 100%;   
  5.             height: 100%;   
  6.         }   
  7.         .title p{   
  8.             text-aligncenter;   
  9.             font-size100px;   
  10.             font-weightbolder;   
  11.             color:#333;   
  12.         }   
  13.         .wrapper{   
  14.             margin400px auto;   
  15.         }   
  16.         .littleH{   
  17.             positionrelative;   
  18.             -webkit-perspective: 800;   
  19.             -webkit-perspective-origin: 50% 50%;   
  20.         }   
  21.         .light{   
  22.             -webkit-transform-style: preserve-3d;   
  23.         }   
  24.         .light .light_left,.light .light_right{   
  25.             positionabsolute;   
  26.             width: 100%;   
  27.             height300px;   
  28.             background: lightblue;   
  29.             -webkit-transform: rotateY(90deg) translate3d(0,300px,-200px);   
  30.             -webkit-animation: changeBgColor 2s linear infinite;   
  31.         }   
  32.         .light .light_right{   
  33.             -webkit-transform: rotateY(-90deg) translate3d(0,300px,-215px);   
  34.             -webkit-animation-delay: 1s;   
  35.         }   
  36.         @-webkit-keyframes changeBgColor{   
  37.             0%,100%{   
  38.                 background: lightblue;   
  39.             }   
  40.             50%{   
  41.                 background: lightgreen;   
  42.             }   
  43.         }   
  44.         .light .light_left p,.light .light_right p{   
  45.             color:#fff;   
  46.             font-size80px;   
  47.             font-weightbold;   
  48.             margin-left100px;   
  49.         }   
  50.         .light .light_right p{   
  51.             floatrightright;   
  52.             margin-right100px;   
  53.         }   
  54.         .light .load{   
  55.             positionabsolute;   
  56.             width500px;   
  57.             height1500px;   
  58.             background: -webkit-gradient(linear, left topleft bottombottomcolor-stop(51%,#aadbdc), color-stop(52%,#ffffff));   
  59.             background: -webkit-linear-gradient(top#aadbdc 51%,#ffffff 52%);   
  60.             background: linear-gradient(to bottombottom#aadbdc 51%,#ffffff 52%);    
  61.             background-size350px 80px;   
  62.             -webkit-animation: move_load 5s linear infinite;   
  63.         }   
  64.         @-webkit-keyframes move_load{   
  65.             0%{   
  66.                 -webkit-transform:rotateX(90deg) translate3d(250px,0,0);   
  67.             }   
  68.             100%{   
  69.                 -webkit-transform:rotateX(90deg) translate3d(250px,-320px,0);   
  70.             }   
  71.         }   
  72.         .littleH_body{   
  73.             positionabsolute;   
  74.             left:50%;   
  75.             margin-left: -157px;   
  76.             width314px;   
  77.             height425px;   
  78.             backgroundurl(1.png);   
  79.             -webkit-transform-style: preserve-3d;   
  80.         }   
  81.         .leftHair{   
  82.             positionabsolute;   
  83.             rightright58px;   
  84.             top:-5px;   
  85.             width100px;   
  86.             height17px;   
  87.             backgroundurl(lefthair.png);   
  88.             -webkit-transform-origin: left bottombottom;   
  89.             -webkit-animation: lefthair 1s .3s ease-in-out infinite;   
  90.   
  91.         }   
  92.         @-webkit-keyframes lefthair{   
  93.             0%,10%,40%,100%{   
  94.                 -webkit-transform: rotate(0deg) translateY(1px);   
  95.             }   
  96.             30%{   
  97.                 -webkit-transform: rotate(-3deg) translateY(1px);   
  98.             }   
  99.         }   
  100.         .rightHair{   
  101.             positionabsolute;   
  102.             left58px;   
  103.             top:-8px;   
  104.             width100px;   
  105.             height16px;   
  106.             backgroundurl(righthair.png);   
  107.             -webkit-transform-origin: rightright bottombottom;   
  108.             -webkit-animation: righthair 1s ease-in-out infinite;   
  109.         }   
  110.         @-webkit-keyframes righthair{   
  111.             0%,10%,40%,100%{   
  112.                 -webkit-transform: rotate(0deg) translateY(1px);   
  113.             }   
  114.             30%{   
  115.                 -webkit-transform: rotate(4deg) translateY(1px);   
  116.             }   
  117.         }   
  118.         .leftBlackeye{   
  119.             positionabsolute;   
  120.             rightright87px;   
  121.             top:102px;   
  122.             width43px;   
  123.             height43px;   
  124.             backgroundurl(eyeblack.png);   
  125.             -webkit-animation: leftblackeye 5s ease-in infinite;   
  126.         }   
  127.         @-webkit-keyframes leftblackeye{   
  128.             0%,20%,50%,70%,100%{   
  129.                 -webkit-transform: translateX(0px);   
  130.             }   
  131.             30%,40%{   
  132.                 -webkit-transform: translateX(15px);   
  133.             }   
  134.             80%,90%{   
  135.                 -webkit-transform: translateX(-15px);   
  136.             }   
  137.         }   
  138.         .leftWhiteeye{   
  139.             positionabsolute;   
  140.             rightright92px;   
  141.             top:110px;   
  142.             width20px;   
  143.             height21px;   
  144.             backgroundurl(whiteeye.png);   
  145.             background-size: 95% 95%;   
  146.             background-repeatno-repeat;   
  147.             -webkit-animation: leftwhiteeye 5s ease-in infinite;   
  148.         }   
  149.         @-webkit-keyframes leftwhiteeye{   
  150.             0%,20%,50%,70%,100%{   
  151.                 -webkit-transform: translateX(0px);   
  152.             }   
  153.             30%,40%{   
  154.                 -webkit-transform: translate3d(15px,3px,0);   
  155.             }   
  156.             80%,90%{   
  157.                 -webkit-transform: translate3d(-30px,3px,0);   
  158.             }   
  159.         }   
  160.         .rightBlackeye{   
  161.             positionabsolute;   
  162.             left84px;   
  163.             top:102px;   
  164.             width43px;   
  165.             height43px;   
  166.             backgroundurl(eyeblack.png);   
  167.             -webkit-animation: rightblackeye 5s ease-in infinite;   
  168.         }   
  169.         @-webkit-keyframes rightblackeye{   
  170.             0%,20%,50%,70%,100%{   
  171.                 -webkit-transform: translateX(0px);   
  172.             }   
  173.             30%,40%{   
  174.                 -webkit-transform: translateX(15px);   
  175.             }   
  176.             80%,90%{   
  177.                 -webkit-transform: translateX(-15px);   
  178.             }   
  179.         }   
  180.         .rightWhiteeye{   
  181.             positionabsolute;   
  182.             left102px;   
  183.             top:112px;   
  184.             width20px;   
  185.             height21px;   
  186.             backgroundurl(whiteeye.png);   
  187.             background-size: 95% 95%;   
  188.             background-repeatno-repeat;   
  189.             -webkit-animation: rightwhiteeye 5s ease-in infinite;   
  190.         }   
  191.         @-webkit-keyframes rightwhiteeye{   
  192.             0%,20%,50%,70%,100%{   
  193.                 -webkit-transform: translateX(0px);   
  194.             }   
  195.             30%,40%{   
  196.                 -webkit-transform: translate3d(15px,3px,0);   
  197.             }   
  198.             80%,90%{   
  199.                 -webkit-transform: translate3d(-30px,3px,0);   
  200.             }   
  201.         }   
  202.         .mouse{   
  203.             positionabsolute;   
  204.             left126px;   
  205.             top:210px;   
  206.             width71px;   
  207.             height30px;   
  208.             backgroundurl(mouse.png);   
  209.             -webkit-transform-origin: center top;   
  210.             -webkit-animation: mouse 5s ease-in-out infinite;   
  211.         }   
  212.         @-webkit-keyframes mouse{   
  213.             40%{   
  214.                 -webkit-transform: rotate(-15deg) translateX(22px);   
  215.             }   
  216.             0%,20%,60%,100%{   
  217.                 -webkit-transform: rotate(0deg);   
  218.             }   
  219.         }   
  220.         .leftFoot{   
  221.             positionabsolute;   
  222.             rightright85px;   
  223.             top:424px;   
  224.             width68px;   
  225.             height43px;   
  226.             backgroundurl(leftfoot.png);   
  227.             -webkit-transform-origin: left top;   
  228.             -webkit-animation: leftfoot .6s ease-in-out infinite;   
  229.         }   
  230.         @-webkit-keyframes leftfoot{   
  231.             0%,50%,100%{   
  232.                 -webkit-transform: rotate(0deg);   
  233.             }   
  234.             80%{   
  235.                 -webkit-transform: rotate(-10deg);   
  236.             }   
  237.         }   
  238.         .rightFoot{   
  239.             positionabsolute;   
  240.             left85px;   
  241.             top:424px;   
  242.             width68px;   
  243.             height43px;   
  244.             backgroundurl(rightfoot.png);   
  245.             margin-bottom100px;   
  246.             -webkit-transform-origin: rightright top;   
  247.             -webkit-animation: rightfoot .6s ease-in-out infinite;   
  248.         }   
  249.         @-webkit-keyframes rightfoot{   
  250.             0%,50%,100%{   
  251.                 -webkit-transform: rotate(0deg);   
  252.             }   
  253.   
  254.             30%{   
  255.                 -webkit-transform: rotate(10deg);   
  256.             }   
  257.         }   

代码应当仍是很简略就能够看懂的,缺乏的地方在于图片不归并,就对付吧,首要目标仍是对CSS3动画(出格是3d)常识点的进修及理论。多操练,能力记得更牢,用得更顺,这只是起头……

PS:附上我抠的图片

1.png

righthair.png

lefthair.png

eyeblack.png

whiteeye.png

mouse.png

rightfoot.png

leftfoot.png

以上便是本文的全数内容,但愿对大师的进修有所赞助,也但愿大师多多撑持网页设想。

原文链接:http://www.cnblogs.com/jr1993/p/4654622.html

一佰互联是天下着名建站品牌办事商,咱们有九年、网站建造、网页设想、php开辟和域名注册及假造主机办事经历,供给的办事更是天下着名。最近几年来还整合团队上风自立开辟了可视化多用户”“3.0平台版,拖拽排版网站建造设想,轻松完成pc站、手机微网站、小法式、APP一体化全网营销网站扶植 ,已胜利的为天下上百家收集公司供给自助建站平台搭建办事。更多资讯:tags标签

相干消息more

25
04月
PHP基于openssl完成的非对称加密操纵

本文实例报告了PHP基于openssl完成的非对称加密操纵。分享给大师供大师参考,详细以下:利用非对称加密首要是借助openssl的公钥和私... >>概况

04
05月
优化网站外部布局的三个体例

网站优化是个体系工程,不是一挥而就的,须要大批的堆集和测验考试。而外部布局又是网站优化的首要局部,这里就首要的注重事变总结出来,供大师参考。起首... >>概况

15
05月
微信外面谁更红?“微信指数”告知你若何利用微

window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":... >>概况

28
04月
WampServer下装置多个版本的PHP、

明天,我在调试一套PHP法式的时辰,该法式中利用的某些函数在低版本中没法利用,以是只能在搞个高版本的php。作为Web开辟职员,在机械上装置... >>概况

高端网站扶植

美工统筹SEO,为企业电子商务营销助力!

德律风:

023-85725751
建站

产物

域名注册 假造主机 云办事器 企业邮局
智能建站 APP打包 微站/小法式 创业平台
网站推行 媒体营销 智能收罗 AI机械人
400德律风 短信营销 店销机械人
私家定制 流派网站