一款纯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代码: < ...

随机推荐

解决Mysql中文乱码问题的方案
MySQL会出现中文乱码的原因不外乎下列几点: 1.server本身设定问题,例如还停留在latin12.table的语系设定问题(包含character与collation)3.客户端程式(例如ph ...
Windows 消息机制浅析
1. Windows 的历史中国人喜欢以史为鉴,而事实也确实是,如果你能知道一件事情的来龙去脉,往往可以更容易地理解事物为什么会表现为当前这样的现状.所以,我的介绍性开场白通常会以一段历 ...
MySQL5.7.18基于GTID的主从复制过程实现
GTID是5.6时加入的,在5.7中被进一步完善,生产环境建议在5.7版本中使用.GTID全称为Global Transaction Identifiers,全局事务标识符.GTID的复制完全是基于事 ...
为Emacs添加标签tabbar功能
Emacs的强大之处在于,只有你想不到,没有她做不到! 折腾了两个小时,终于在终端putty上搞定了tabbar.下面是一些资源,以方便后面的同学快速搞定. 首先下载tabbar的插件tabbar.e ...
PAT 1085 Perfect Sequence
PAT 1085 Perfect Sequence 题目: Given a sequence of positive integers and another positive integer p. ...
pythonl练习笔记——threading线程中的事件Event
1 事件Event 使用方法:e = threading.Event() Event对象主要用于线程间通信,确切地说是用于主线程控制其他线程的执行. Event事件提供了三个方法:wait等待.cle ...
使用Xcode、Android Studio将项目链接到Git
一.使用Android Studio创建本地git仓库: 1.检查本地git环境:在Android Studio中setting-->Version Control 点击Test按钮,提示suc ...
转： Python中的os.path.dirname(__file__)
(1).当"print os.path.dirname(__file__)"所在脚本是以完整路径被运行的, 那么将输出该脚本所在的完整路径,比如: ...
Workflow_工作流的基本概念（概念）
2014-06-01 Created By BaoXinjian
Linux使用技巧5--格式化U盘
通常来说,格式化一个分区的U盘还是非常easy的.仅仅须要使用mkfs命令指定目标文件系统就能够了,样例例如以下: $ sudo fdisk -l $ sudo mkfs -t vfat /dev/s ...

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

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

随机推荐

热门专题