素材8网-专注前端素材！
来源：https://www.sucai8.cn/15995.html

纯CSS3制作的恐龙动态动画代码

  • 1768
  • 0
  • 0

HTML部分代码：
  1. .optimizilla
  2.         .head
  3.                 .forehead
  4.                         .eye.eye-left
  5.                         .eye.eye-right
  6.                 .jaws
  7.                         .top-jaw
  8.                                 .nostril.nostril-left
  9.                                 .nostril.nostril-right
  10.                         .bottom-jaw
  11.                                 .teeth
  12.                                         - for(i=0; i<5; i++)
  13.                                                 .tooth
  14.         .body
  15.                 .spikes
  16.                         - for(i=0; i<4; i++)
  17.                                 .spike
  18.                 .tail
  19.                 .torso
  20.                         .hand.hand-left
  21.                                 .claws
  22.                         .hand.hand-right
  23.                                 .claws
  24.                         .leg.leg-left
  25.                                 .toe.toe-left
  26.                                 .toe.toe-middle
  27.                                 .toe.toe-right
  28.                         .leg.leg-right
  29.                                 .toe.toe-left
  30.                                 .toe.toe-middle
  31.                                 .toe.toe-right
复制代码
CSS部分代码：
  1. html, body{
  2.         background-color: #aad0ff;
  3.         width: 100%;
  4.         height: 100%;
  5. }

  7. .optimizilla{
  8.        
  9.         *{
  10.                 box-sizing: border-box;
  11.                 position: absolute;
  12.                 font-size: 0;
  13.         }
  14.        
  15.         $skin-color: #38B1B3;
  16.         $claw-color: #D1D4D4;
  17.         $spike-color: #FF7863;
  18.        
  19.         box-sizing: border-box;
  20.         position: absolute;
  21.         width: 426px;
  22.         height: 324px;
  23.     left: 0;
  24.     right: 0;
  25.     top: 0;
  26.     bottom: 0;
  27.     margin: auto;
  28.        
  29.         .head{
  30.                 width: 236px;
  31.                 height: 152px;
  32.                 top: 0;
  33.                 right: 0;
  34.                 text-align: left;
  35.                 z-index: 1;
  36.                 transform-origin: left bottom;
  37.                 animation: head 1s linear infinite;
  38.                
  39.                 .forehead{
  40.                         position: relative;
  41.                         display: inline-block;
  42.                         background-color: $skin-color;
  43.                         width: 135px;
  44.                         height: 43px;
  45.                         border-top-left-radius: 40px;
  46.                         border-top-right-radius: 40px;
  47.                        
  48.                         .eye{
  49.                                 position: relative;
  50.                                 display: inline-block;
  51.                                 margin-left: 22px;
  52.                                 margin-top: 12px;
  53.                                 width: 42px;
  54.                                 height: 31px;
  55.                                 background-color: #ffffff;
  56.                                 border-top-left-radius: 25px;
  57.                                 border-top-right-radius: 25px;
  58.                                 overflow: hidden;
  59.                                 z-index: 1;
  60.                                
  61.                                 &:before{
  62.                                         content: '';
  63.                                         position: absolute;
  64.                                         display: block;
  65.                                         height: 22px;
  66.                                         width: 18px;
  67.                                         background-color: #000000;
  68.                                         bottom: 0;
  69.                                         left: 9px;
  70.                                         border-top-left-radius: 10px;
  71.                                         border-top-right-radius: 10px;
  72.                                         animation: pupils 5s linear infinite;
  73.                                 }
  74.                                
  75.                                 &:after{
  76.                                         content: '';
  77.                                         position: absolute;
  78.                                         display: block;
  79.                                         height: 31px;
  80.                                         width: 42px;
  81.                                         background-color: darken($skin-color, 5%);
  82.                                         animation: blink 3s linear infinite;
  83.                                 }
  84.                                
  85.                                 &.eye-left{
  86.                                         margin-left: 22px;
  87.                                 }
  88.                                
  89.                                 &.eye-right{
  90.                                         margin-left: 10px;
  91.                                 }
  92.                                
  93.                         }
  94.                        
  95.                 }
  96.                
  97.                 .jaws{
  98.                         position: relative;
  99.                         width: 236px;
  100.                         height: 109px;
  101.                        
  102.                         .top-jaw{
  103.                                 position: relative;
  104.                                 width: 236px;
  105.                                 height: 49px;
  106.                                 background-color: $skin-color;
  107.                                 border-top-right-radius: 49px;
  108.                                 text-align: right;
  109.                                
  110.                                 .nostril{
  111.                                         position: relative;
  112.                                         width: 18px;
  113.                                         height: 18px;
  114.                                         border-radius: 50%;
  115.                                         background-color: #ffffff;
  116.                                         display: inline-block;
  117.                                         margin-top: 20px;
  118.                                        
  119.                                         &.nostril-right{
  120.                                                 margin-right: 20px;
  121.                                         }
  122.                                        
  123.                                         &.nostril-left{
  124.                                                 margin-right: 10px;
  125.                                         }
  126.                                        
  127.                                 }
  128.                                
  129.                         }
  130.                        
  131.                         .bottom-jaw{
  132.                                 position: relative;
  133.                                 height: 60px;
  134.                                 width: 225px;
  135.                                 border-bottom-left-radius: 60px;
  136.                                 border-bottom-right-radius: 60px;
  137.                                 background-color: $skin-color;               
  138.                                 text-align: right;
  139.                                 overflow: hidden;
  140.                                
  141.                                 .teeth{
  142.                                         position: relative;
  143.                                         display: inline-block;
  144.                                         width: 140px;
  145.                                         height: 25px;
  146.                                         overflow: hidden;
  147.                                         margin-right: 2px;
  148.                                        
  149.                                         .tooth{
  150.                                                 width: 20px;
  151.                                                 height: 25px;
  152.                                                 position: relative;
  153.                                                 display: inline-block;
  154.                                                 background-color: #ffffff;
  155.                                                 width: 0;
  156.                                                 height: 0;
  157.                                                 border-left: 14px solid $skin-color;
  158.                                                 border-right: 14px solid $skin-color;
  159.                                                 border-top: 25px solid #ffffff;
  160.                                         }
  161.                                        
  162.                                 }
  163.                                
  164.                         }
  165.                        
  166.                 }
  167.                
  168.         }
  169.        
  170.         .body{
  171.                
  172.                 .spikes{
  173.                         transform: rotate(-45deg);
  174.                         width: 350px;
  175.                         left: -37px;
  176.                     top: 117px;
  177.                         animation: spikes 1s linear infinite;
  178.                        
  179.                         .spike{
  180.                                 position: relative;
  181.                                 display: inline-block;
  182.                                 background-color: $spike-color;
  183.                                 width: 60px;
  184.                                 height: 60px;
  185.                                 margin: 0 6px;
  186.                                 vertical-align: bottom;
  187.                                
  188.                                 &:after{
  189.                                         content: '';
  190.                                         width: 42px;
  191.                                         height: 42px;
  192.                                         background-color: $spike-color;
  193.                                         position: absolute;
  194.                                         display: block;
  195.                                         transform: rotate(45deg);
  196.                                         top: -21px;
  197.                                     left: 9px;
  198.                                 }
  199.                                
  200.                                 &:first-child{
  201.                                         margin-left: 0;
  202.                                         height: 17px;
  203.                                     margin-bottom: 14px;
  204.                                 }
  205.                                
  206.                                 &:last-child{
  207.                                         margin-right: 0;
  208.                                        
  209.                                 }
  210.                                
  211.                         }
  212.                        
  213.                 }
  214.                
  215.                 .tail{
  216.                         left: 0;
  217.                         top: 175px;
  218.                         width: 0;
  219.                         height: 0;
  220.                         border-bottom: 110px solid $skin-color;
  221.                         border-left: 110px solid transparent;
  222.                         animation: torso 1s linear infinite;
  223.                 }
  224.                
  225.                 .torso{
  226.                         width: 230px;
  227.                         height: 220px;
  228.                         background-color: darken($skin-color, 10%);
  229.                         left: 75px;
  230.                         top: 65px;
  231.                         border-top-left-radius: 100%;
  232.                         animation: torso 1s linear infinite;
  233.                        
  234.                         .hand{
  235.                                 width: 68px;
  236.                                 height: 46px;
  237.                                 background-color: $skin-color;
  238.                                 top: 105px;
  239.                                 border-top-right-radius: 40px;
  240.                                 animation: hands 3s linear infinite;
  241.                                
  242.                                 &.hand-left{
  243.                                         left: 112px;
  244.                                 }
  245.                                
  246.                                 &.hand-right{
  247.                                         right: -40px;
  248.                                 }
  249.                                
  250.                                 .claws{
  251.                                         width: 68px;
  252.                                         height: 34px;
  253.                                         bottom: -34px;
  254.                                        
  255.                                         &:before, &:after{
  256.                                                 content: '';
  257.                                                 display: inline-block;
  258.                                                 width: 34px;
  259.                                                 height: 34px;
  260.                                                 background-color: $claw-color;
  261.                                                 border-bottom-right-radius: 100%;
  262.                                                 bottom: 0px;
  263.                                         }
  264.                                        
  265.                                 }
  266.                                
  267.                         }
  268.                
  269.                         .leg{
  270.                                 top: 204px;
  271.                                 width: 115px;
  272.                                 height: 55px;
  273.                                 background-color: $skin-color;
  274.                                 border-top-left-radius: 55px;
  275.                                 border-top-right-radius: 55px;
  276.                                 animation: legs 1s linear infinite;
  277.                                
  278.                                 &.leg-right{
  279.                                         left: 172px;
  280.                                 }
  281.                                
  282.                                 &.leg-left{
  283.                                         left: 20px;
  284.                                 }
  285.                                
  286.                                 .toe{
  287.                                         width: 44px;
  288.                                         height: 20px;
  289.                                         background-color: $claw-color;
  290.                                         bottom: 0;
  291.                                         border-top-left-radius: 20px;
  292.                                         border-top-right-radius: 20px;
  293.                                        
  294.                                         &.toe-left{
  295.                                                 left: 25px;
  296.                                                 border-top: 6px solid $skin-color;
  297.                                                 border-right: 6px solid $skin-color;
  298.                                                 z-index: 3;
  299.                                                 width: 50px;
  300.                                                 height: 26px;
  301.                                                 border-top-left-radius: 26px;
  302.                                                 border-top-right-radius: 26px;
  303.                                         }
  304.                                        
  305.                                         &.toe-middle{
  306.                                                 left: 61px;
  307.                                                 z-index: 2;
  308.                                                 width: 50px;
  309.                                                 height: 26px;
  310.                                                 border-top: 6px solid $skin-color;
  311.                                                 border-right: 6px solid $skin-color;
  312.                                                 border-top-left-radius: 26px;
  313.                                                 border-top-right-radius: 26px;
  314.                                         }
  315.                                        
  316.                                         &.toe-right{
  317.                                                 left: 86px;
  318.                                                 z-index: 1;
  319.                                         }
  320.                                        
  321.                                 }
  322.                                
  323.                         }
  324.                        
  325.                 }
  326.                
  327.         }
  328.        
  329.         @keyframes head{
  330.                 0%{
  331.                         transform: rotate(0);
  332.                 }
  333.                 50%{
  334.                         transform: rotate(2deg);
  335.                 }
  336.                 100%{
  337.                         transform: rotate(0);
  338.                 }
  339.         }
  340.        
  341.         @keyframes blink{
  342.                 0%{
  343.                         transform: translateY(-70%);
  344.                 }
  345.                 30%{
  346.                         transform: translateY(-70%);
  347.                 }
  348.                 32%{
  349.                         transform: translateY(0);
  350.                 }
  351.                 34%{
  352.                         transform: translateY(-70%);
  353.                 }
  354.                 64%{
  355.                         transform: translateY(-70%);
  356.                 }
  357.                 66%{
  358.                         transform: translateY(0);
  359.                 }
  360.                 68%{
  361.                         transform: translateY(-70%);
  362.                 }
  363.                 100%{
  364.                         transform: translateY(-70%);
  365.                 }
  366.         }
  367.        
  368.         @keyframes hands{
  369.                 0%{
  370.                         transform: rotate(0) translateX(0);
  371.                 }
  372.                 10%{
  373.                         transform: rotate(-140deg) translateX(0);
  374.                 }
  375.                 15%{
  376.                         transform: rotate(-70deg) translateX(40px);
  377.                 }
  378.                 20%{
  379.                         transform: rotate(0) translateX(0);
  380.                 }
  381.                 100%{
  382.                         transform: rotate(0) translateX(0);
  383.                 }
  384.         }
  385.        
  386.         @keyframes torso{
  387.                 0%{
  388.                         transform: translateY(0);
  389.                 }
  390.                 50%{
  391.                         transform: translateY(5px);
  392.                 }
  393.                 100%{
  394.                         transform: translateY(0);
  395.                 }
  396.         }
  397.        
  398.         @keyframes spikes{
  399.                 0%{
  400.                         transform: rotate(-45deg) translateY(0);
  401.                 }
  402.                 50%{
  403.                         transform: rotate(-45deg) translateY(6px);
  404.                 }
  405.                 100%{
  406.                         transform: rotate(-45deg) translateY(0);
  407.                 }
  408.         }
  409.        
  410.         @keyframes legs{
  411.                 0%{
  412.                         transform: translateY(0);
  413.                 }
  414.                 50%{
  415.                         transform: translateY(-5px);
  416.                 }
  417.                 100%{
  418.                         transform: translateY(0);
  419.                 }
  420.         }
  421.        
  422.         @keyframes pupils{
  423.                 0%{
  424.                         transform: translateX(0);
  425.                 }
  426.                 20%{
  427.                         transform: translateX(0);
  428.                 }
  429.                 25%{
  430.                         transform: translateX(8px);
  431.                 }
  432.                 40%{
  433.                         transform: translateX(8px);
  434.                 }
  435.                 45%{
  436.                         transform: translateX(0);
  437.                 }
  438.                 100%{
  439.                         transform: translateX(0);
  440.                 }
  441.         }
  442.        
  443. }
复制代码
相关素材
纯CSS3制作的恐龙动态动画代码
  • 拔刀向天 刚刚下载了一个素材
  • qq小白兔Zja 刚刚下载了一个素材
  • Hitzqf 刚刚下载了一个素材
  • 驳马科技 刚刚下载了一个素材
  • 不爱睡觉 刚刚下载了一个素材
  • 哈哈111111122558 刚刚下载了一个素材
  • Thintime 刚刚下载了一个素材
  • Injoker 刚刚下载了一个素材
  • qqCongA4V 刚刚下载了一个素材
  • 湛江婚礼跟拍 刚刚下载了一个素材
  • 婚礼聚 刚刚下载了一个素材
  • 凝聚影视传媒 刚刚下载了一个素材
  • 廉江婚礼跟拍 刚刚下载了一个素材
  • 婚礼小当家 刚刚下载了一个素材
  • 轉角妳可還在 刚刚下载了一个素材
分享者：
分享者头像
xiaozhi
热门素材推荐
HTML素材网，HTML5模板，网页特效 微信公众账号二维码 淘宝店铺地址二维码
Copyright©2024  素材8  Powered by 智伙伴科技
   鲁ICP备14029286号-5 鲁公网安备37060202001967号
返回顶部返回顶部
发布主题