您现在的位置是：网站首页> 编程资料编程资料

CSS3实现可爱的小黄人动画 CSS3实现的绵羊奔跑动画特效源码CSS3鼠标滑过图片标题遮罩动画特效源码 8种纯CSS3绘制打火机动画火焰效果纯CSS3实现鼠标滑过tip提示框动画特效源码html5+css3绘制的滚动齿轮动画特效源码纯CSS3实现鼠标滑过圆形图片旋转翻盖动画特效源码浅谈CSS3动画的回调处理

2021-09-04 949人已围观

简介 这篇文章主要为大家详细介绍了CSS3实现可爱的小黄人动画的具体代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

每次看到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-align: center;   
  9.             font-size: 100px;   
  10.             font-weight: bolder;   
  11.             color:#333;   
  12.         }   
  13.         .wrapper{   
  14.             margin: 400px auto;   
  15.         }   
  16.         .littleH{   
  17.             position: relative;   
  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.             position: absolute;   
  26.             width: 100%;   
  27.             height: 300px;   
  28.             background: lightblue;   
  29.             -webkit-transform: rotateY(90deg) translate3d(0,300px,-200px);   
  30.             -webkit-animation: changeBgColor 2s 

    上一篇：详解CSS3中属性选择器新增加的特性css3之UI元素状态伪类选择器实例演示总结30个CSS3选择器 css3类选择器之结合元素选择器和多类选择器用法IE8下CSS3选择器nth-child() 不兼容问题的解决方法对CSS3选择器的研究(详解)CSS3中的常用选择器使用示例整理CSS3 新增选择器的实例

    下一篇：CSS3实现10种Loading效果 详解纯CSS3制作的20种loading动效CSS3轻松实现清新 Loading 效果的简单实例使用CSS3制作饼状旋转载入效果的实例浅析与CSS3的loading动画加载相关的transition优化8款使用 CSS3 实现超炫的 Loading（加载）的动画效果纯CSS3实现的8种Loading动画效果使用css3实现超炫的loading加载动画效果css3如何绘制一个圆圆的loading转圈动画

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网