一款纯css3实现的超炫动画背画特效

之前为大家介绍了很多款由纯css3实现的特效。今天要再给大家带来一款纯css3实现的超炫动画背画特效。代码非常简单，没有引用任何其它js代码。css代码也不多。效果非常炫。一起看下效果图：

实现的代码。

html代码：

 <div class='fake-gif'>

        <span class='stripe'></span><span class='stripe'></span><span class='stripe'></span>

        <span class='stripe'></span><span class='stripe'></span><span class='stripe'></span>

        <span class='stripe'></span><span class='stripe'></span><span class='stripe'></span>

        <span class='stripe'></span><span class='stripe'></span><span class='stripe'></span>

        <span class='stripe'></span><span class='stripe'></span><span class='stripe'></span>

        <span class='stripe'></span><span class='stripe'></span><span class='stripe'></span>

        <span class='stripe'></span><span class='stripe'></span><span class='stripe'></span>

        <span class='stripe'></span><span class='stripe'></span><span class='stripe'></span>

        <span class='stripe'></span><span class='stripe'></span>

    </div>

css3代码：

        body{

    background: #000;

    -webkit-perspective:35px;

   -moz-perspective:35px;

    -ms-perspective:35px;

     -o-perspective:35px;

        perspective:35px;

    -webkit-transform-style:preserve-3d;

    -moz-transform-style:preserve-3d;

    -ms-transform-style:preserve-3d;

    -o-transform-style:preserve-3d;

    transform-style:preserve-3d;

    -webkit-transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg);

    -moz-transform:rotateX(45deg) rotateY(0deg) rotateZ(45deg);

    -ms-transform:rotateX(45deg) rotateY(0deg) rotateZ(45deg);

    -o-transform:rotateX(45deg) rotateY(0deg) rotateZ(45deg);

    transform:rotateX(45deg) rotateY(0deg) rotateZ(45deg);

    }

    .fake-gif {

  position: relative;

  margin: 10rem auto 0 auto;

  width: 20rem;

  height: 20rem;

}

.fake-gif .stripe {

  position: absolute;

  border-radius: 50%;

  -webkit-box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);

  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);

  -webkit-transform: translate3d(0px, 0px, 0px);

  transform: translate3d(0px, 0px, 0px);

}

.fake-gif .stripe:nth-child(odd) {

  left:;

  width: 100%;

  height: 5%;

background-color: rgba(109, 60, 209, 0.5);

box-shadow: 0px 6px 40px #5800FF, inset 0px 2px 5px #DF00FF;

}

.fake-gif .stripe:nth-child(even) {

  top:;

  width: 5%;

  height: 100%;

 background-color: rgba(0, 240, 40, 0.5);

box-shadow: 0px 6px 40px #007D35, inset 0px 2px 5px #7CFFB5;

}

.fake-gif .stripe:nth-child(4n+1) {

  z-index:;

}

.fake-gif .stripe:nth-child(4n+2) {

  z-index:;

}

.fake-gif .stripe:nth-child(4n+3) {

  z-index:;

}

.fake-gif .stripe:nth-child(4n) {

  z-index:;

}

.fake-gif .stripe:nth-child(2) {

  left: 4.7%;

  -webkit-animation: move-y 2.7s 0.2s infinite;

  animation: move-y 2.7s 0.2s infinite;

}

.fake-gif .stripe:nth-child(4) {

  left: 11.9%;

  -webkit-animation: move-y 2.7s 0.4s infinite;

  animation: move-y 2.7s 0.4s infinite;

}

.fake-gif .stripe:nth-child(6) {

  left: 19.1%;

  -webkit-animation: move-y 2.7s 0.6s infinite;

  animation: move-y 2.7s 0.6s infinite;

}

.fake-gif .stripe:nth-child(8) {

  left: 26.3%;

  -webkit-animation: move-y 2.7s 0.8s infinite;

  animation: move-y 2.7s 0.8s infinite;

}

.fake-gif .stripe:nth-child(10) {

  left: 33.5%;

  -webkit-animation: move-y 2.7s 1s infinite;

  animation: move-y 2.7s 1s infinite;

}

.fake-gif .stripe:nth-child(12) {

  left: 40.7%;

  -webkit-animation: move-y 2.7s 1.2s infinite;

  animation: move-y 2.7s 1.2s infinite;

}

.fake-gif .stripe:nth-child(14) {

  left: 47.9%;

  -webkit-animation: move-y 2.7s 1.4s infinite;

  animation: move-y 2.7s 1.4s infinite;

}

.fake-gif .stripe:nth-child(16) {

  left: 55.1%;

  -webkit-animation: move-y 2.7s 1.6s infinite;

  animation: move-y 2.7s 1.6s infinite;

}

.fake-gif .stripe:nth-child(18) {

  left: 62.3%;

  -webkit-animation: move-y 2.7s 1.8s infinite;

  animation: move-y 2.7s 1.8s infinite;

}

.fake-gif .stripe:nth-child(20) {

  left: 69.5%;

  -webkit-animation: move-y 2.7s 2s infinite;

  animation: move-y 2.7s 2s infinite;

}

.fake-gif .stripe:nth-child(22) {

  left: 76.7%;

  -webkit-animation: move-y 2.7s 2.2s infinite;

  animation: move-y 2.7s 2.2s infinite;

}

.fake-gif .stripe:nth-child(24) {

  left: 83.9%;

  -webkit-animation: move-y 2.7s 2.4s infinite;

  animation: move-y 2.7s 2.4s infinite;

}

.fake-gif .stripe:nth-child(26) {

  left: 91.1%;

  -webkit-animation: move-y 2.7s 2.6s infinite;

  animation: move-y 2.7s 2.6s infinite;

}

.fake-gif .stripe:nth-child(1) {

  top: 3.6%;

  -webkit-animation: move-x 2.7s 0.1s infinite;

  animation: move-x 2.7s 0.1s infinite;

}

.fake-gif .stripe:nth-child(3) {

  top: 10.8%;

  -webkit-animation: move-x 2.7s 0.3s infinite;

  animation: move-x 2.7s 0.3s infinite;

}

.fake-gif .stripe:nth-child(5) {

  top: 18%;

  -webkit-animation: move-x 2.7s 0.5s infinite;

  animation: move-x 2.7s 0.5s infinite;

}

.fake-gif .stripe:nth-child(7) {

  top: 25.2%;

  -webkit-animation: move-x 2.7s 0.7s infinite;

  animation: move-x 2.7s 0.7s infinite;

}

.fake-gif .stripe:nth-child(9) {

  top: 32.4%;

  -webkit-animation: move-x 2.7s 0.9s infinite;

  animation: move-x 2.7s 0.9s infinite;

}

.fake-gif .stripe:nth-child(11) {

  top: 39.6%;

  -webkit-animation: move-x 2.7s 1.1s infinite;

  animation: move-x 2.7s 1.1s infinite;

}

.fake-gif .stripe:nth-child(13) {

  top: 46.8%;

  -webkit-animation: move-x 2.7s 1.3s infinite;

  animation: move-x 2.7s 1.3s infinite;

}

.fake-gif .stripe:nth-child(15) {

  top: 54%;

  -webkit-animation: move-x 2.7s 1.5s infinite;

  animation: move-x 2.7s 1.5s infinite;

}

.fake-gif .stripe:nth-child(17) {

  top: 61.2%;

  -webkit-animation: move-x 2.7s 1.7s infinite;

  animation: move-x 2.7s 1.7s infinite;

}

.fake-gif .stripe:nth-child(19) {

  top: 68.4%;

  -webkit-animation: move-x 2.7s 1.9s infinite;

  animation: move-x 2.7s 1.9s infinite;

}

.fake-gif .stripe:nth-child(21) {

  top: 75.6%;

  -webkit-animation: move-x 2.7s 2.1s infinite;

  animation: move-x 2.7s 2.1s infinite;

}

.fake-gif .stripe:nth-child(23) {

  top: 82.8%;

  -webkit-animation: move-x 2.7s 2.3s infinite;

  animation: move-x 2.7s 2.3s infinite;

}

.fake-gif .stripe:nth-child(25) {

  top: 90%;

  -webkit-animation: move-x 2.7s 2.5s infinite;

  animation: move-x 2.7s 2.5s infinite;

}

@-webkit-keyframes move-y {

  0%, 100% {

    -webkit-transform: translateZ(-25px);

    transform: translateZ(-25px);

  }

  50% {

    -webkit-transform: translateZ(25px);

    transform: translateZ(25px);

  }

}

@-webkit-keyframes move {

  0%, 100% {

    -webkit-transform: rotateX(-25deg) rotateY(-25deg);

    transform: rotateX(-25deg) rotateY(-25deg);

  }

  50% {

    -webkit-transform: rotateX(25px) rotateY(25deg);

    transform: rotateX(25px) rotateY(25deg);

  }

}

@keyframes move-y {

  0%, 100% {

    -webkit-transform: translateY(-25%);

    transform: translateY(-25%);

  }

  50% {

    -webkit-transform: translateY(25%);

    transform: translateY(25%);

  }

}

@-webkit-keyframes move-x {

  0%, 100% {

    -webkit-transform: translateZ(-25px);

    transform: translateZ(-25px);

  }

  50% {

    -webkit-transform: translateZ(25px);

    transform: translateZ(25px);

  }

}

@keyframes move-x {

  0%, 100% {

    -webkit-transform: translateX(-25%);

    transform: translateX(-25%);

  }

  50% {

    -webkit-transform: translateX(25%);

    transform: translateX(25%);

  }

}

注：本文爱编程原创文章，转载请注明原文地址：http://www.w2bc.com/Article/7428

一款纯css3实现的超炫动画背画特效的更多相关文章

一款纯css3实现的超炫3D表单
今天要给大家分享一款纯css3实现的超炫3D表单.该特效页面的加载的时候3d四十五度倾斜,当鼠标经过的时候表单动画回正.效果非常炫,一起看下效果图: 在线预览源码下载实现的代码. html代码 ...
iHover – 30+ 纯 CSS3 实现的超炫的图片悬停特效
iHover 是一个令人印象深刻的图片悬停效果集合,完全基于 CSS3 实现,无依赖,能够搭配 Bootstrap 3 很好地工作.基于 SCSS 技术构建(包括文件),便于修改变量.有模块化的代码, ...
iHover – 30+ 纯 CSS 实现的超炫的图片悬停特效
iHover 是一个令人印象深刻的图片悬停效果集合,完全基于 CSS3 实现,无依赖,能够搭配 Bootstrap 3 很好地工作.基于 SCSS 技术构建,便于修改变量.有模块化的代码,无需包含整个 ...
推荐9款使用CSS3实现的超酷动画效果
大家都知道,在网页制作时使用CSS技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制.只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和 ...
纯css3实现的超炫checkbox复选框和radio单选框
之前为大家分享了好多css3实现的按钮.今天要为大家分享的是纯css3实现的checkbox复选框和radio单选框,效果超级炫.先让我们看看图吧! 在线预览源码下载这个实例完全由css3实现 ...
7款纯CSS3实现的炫酷动画应用
1.纯CSS3实现人物摇头动画这次我们要来分享一款超级可爱的纯CSS3人物摇头动画,初始化的时候人物的各个部位是利用CSS3动画效果拼接而成,接下来就是人物听音乐的场景,一边听音乐一边摇着脑袋,十分 ...
推荐10款纯css3实现的实用按钮
在2014年的双11即将来临之季,爱编程小编为大家整理10款纯css3实现的按钮.希望这对坚守在前端的码农们有所帮助.亲,如果你有好的资源也可在本文留言,让从事编码的程序员们抱团.工作更轻松. No1 ...
纯CSS3悬停图标旋转导航动画代码
分享一款纯CSS3悬停图标旋转导航动画代码.这是一款鼠标移到图标上动画旋转显示导航菜单.效果图如下: 在线预览源码下载实现的代码. html代码: <div id="x_con ...
纯css3实现的鼠标悬停动画按钮
今天给大家带来一款纯css3实现的鼠标悬停动画按钮.这款按钮鼠标经过前以正方形的形式,当鼠标经过的时候以动画的形式变成圆形.效果图如下: 在线预览源码下载实现的代码. html代码: < ...

随机推荐

27、ArrayList和LinkedList的区别
在Java的List类型集合中,ArrayList和LinkedList大概是最常用到的2个了,细看了一下它们的实现,发现区别还是很大的,这里简单的列一下个人比较关心的区别. 类声明 ArrayLis ...
Ubuntu14.04 mount远程服务器上的目录
备忘用. 一,远程服务器设置: 1,在/etc/exports中添加如下配置: /home/xxx *(insecure,rw,sync,no_root_squash,anonuid=123,anon ...
'<>' operator is not allowed for source level below 1.7
报错:'<>' operator is not allowed for source level below 1.7 这是eclipse的编译环境与项目的要求不对应造成的,这个错误一般是导 ...
Google C++单元测试框架之宏
一.概述 gtest中,断言的宏可以理解分为两类,一类是ASSERT系列,一类是EXPECT系列: 1.ASSERT_*系列的断言,当检查点失败时,退出当前函数(注意:并非退出当前案例) 2.EXCE ...
Android 下拉菜单 Spinner 赋值
private Spinner m_spiModel = null; //产品型号 m_spiModel = (Spinner) findViewById(R.id.spiModel);//产品型号 ...
errno之我见
Errno能帮我们找到系统函数的错误信息. 比方open函数,假设正常返回时,其返回值是一个非负的整数. 异常时会返回-1.同一时候该系统函数会设置errno的值.让我们能够了解错误的原因. Errn ...
Python2 unichr() 函数
描述 unichr() 函数和 chr()函数功能基本一样, 只不过是返回 unicode 的字符. 语法以下是 unichr() 方法的语法: unichr(i) 参数 i -- 可以是10进制 ...
关于apache服务器加载so的报错
早上突然发现我的虚拟机上的WEB应用访问不了了,后台检查httpd服务,无法启动,出现一行提示: ①starting httpd: httpd: Syntax error on line 163 of ...
es6 generator 基础知识
1.定义和使用 function *gen() { return 'first generator'; } // 有点类似类的实例化过程 let generatorResult = gen() // ...
vue中如何实现数据的双向绑定
vue中如何实现数据的双向绑定实现视图变化数据跟着变:分两步,上面get中的为第二步(即再次读取的时候会调用get方法得到之前设置的值,以此来实现动态改变) 由于直接写obj.name = this ...

一款纯css3实现的超炫动画背画特效

一款纯css3实现的超炫动画背画特效的更多相关文章

随机推荐

热门专题