css实例教程 一款纯css3实现的超炫动画背画特效


Posted in HTML / CSS onNovember 05, 2014

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

css实例教程 一款纯css3实现的超炫动画背画特效

实现的代码:

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;</p> <p>
}
.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: 0;
width: 100%;
height: 5%;
background-color: rgba(109, 60, 209, 0.5);
box-shadow: 0px 6px 40px #5800FF, inset 0px 2px 5px #DF00FF;</p> <p>}
.fake-gif .stripe:nth-child(even) {
top: 0;
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: 3;
}
.fake-gif .stripe:nth-child(4n+2) {
z-index: 4;
}
.fake-gif .stripe:nth-child(4n+3) {
z-index: 1;
}
.fake-gif .stripe:nth-child(4n) {
z-index: 2;
}
.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;
}</p> <p>@-webkit-keyframes move-y {
0%, 100% {
-webkit-transform: translateZ(-25px);
transform: translateZ(-25px);
}</p> <p> 50% {
-webkit-transform: translateZ(25px);
transform: translateZ(25px);
}
}</p> <p>@-webkit-keyframes move {
0%, 100% {
-webkit-transform: rotateX(-25deg) rotateY(-25deg);
transform: rotateX(-25deg) rotateY(-25deg);
}</p> <p> 50% {
-webkit-transform: rotateX(25px) rotateY(25deg);
transform: rotateX(25px) rotateY(25deg);
}
}</p> <p>@keyframes move-y {
0%, 100% {
-webkit-transform: translateY(-25%);
transform: translateY(-25%);
}</p> <p> 50% {
-webkit-transform: translateY(25%);
transform: translateY(25%);
}
}
@-webkit-keyframes move-x {
0%, 100% {
-webkit-transform: translateZ(-25px);
transform: translateZ(-25px);
}</p> <p> 50% {
-webkit-transform: translateZ(25px);
transform: translateZ(25px);
}
}
@keyframes move-x {
0%, 100% {
-webkit-transform: translateX(-25%);
transform: translateX(-25%);
}</p> <p> 50% {
-webkit-transform: translateX(25%);
transform: translateX(25%);
}
}

以上就是纯css3实现的超炫动画背画特效,是不是很简单,谢谢阅读,希望能帮到大家,请继续关注三水点靠木,我们会努力分享更多优秀的文章。
HTML / CSS 相关文章推荐
CSS3模块的目前的状况分析
Feb 24 HTML / CSS
分享CSS3中必须要知道的10个顶级命令
Apr 26 HTML / CSS
css3打造一款漂亮的卡哇伊按钮
Mar 20 HTML / CSS
详解CSS3弹性伸缩盒
Sep 21 HTML / CSS
用HTML5实现手机摇一摇的功能的教程
Oct 30 HTML / CSS
基于HTML5代码实现折叠菜单附源码下载
Nov 27 HTML / CSS
整理HTML5中支持的URL编码与字符编码
Feb 23 HTML / CSS
HTML 5.1来了 9月份正式发布 更新内容预览
Apr 26 HTML / CSS
canvas之自定义头像功能实现代码示例
Sep 29 HTML / CSS
canvas实现圆形进度条动画的示例代码
Dec 26 HTML / CSS
HTML5 manifest离线缓存的示例代码
Aug 08 HTML / CSS
HTML5 客户端数据库简易使用:IndexedDB
Dec 19 HTML / CSS
一款纯css3实现的非常实用的鼠标悬停特效演示
Nov 05 #HTML / CSS
利用css3实现的简单的鼠标悬停按钮
Nov 04 #HTML / CSS
一款简洁的纯css3代码实现的动画导航
Oct 31 #HTML / CSS
一款纯css3实现的响应式导航
Oct 31 #HTML / CSS
CSS3提交意见输入框样式代码
Oct 30 #HTML / CSS
css3实例教程 一款纯css3实现的环形导航菜单
Oct 20 #HTML / CSS
在HTML5中如何使用CSS建立不可选的文字
Oct 17 #HTML / CSS
You might like
php数组函数序列之array_pop() - 删除数组中的最后一个元素
2011/11/07 PHP
解析使用substr截取UTF-8中文字符串出现乱码的问题
2013/06/20 PHP
PHP cdata 处理(详细介绍)
2013/07/05 PHP
PHP使用CURL_MULTI实现多线程采集的例子
2014/07/29 PHP
Smarty中调用FCKeditor的方法
2014/10/27 PHP
Smarty实现页面静态化(生成HTML)的方法
2016/05/23 PHP
php中的explode()函数实例介绍
2019/01/18 PHP
浅谈php的TS和NTS的区别
2019/03/13 PHP
网页设计常用的一些技巧
2006/12/22 Javascript
基于jquery的文章中所有图片width大小批量设置方法
2013/08/01 Javascript
extjs表格文本启用选择复制功能具体实现
2013/10/11 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
2013/10/18 Javascript
js获取客户端外网ip的简单实例
2013/11/21 Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
2017/03/27 Javascript
react.js使用webpack搭配环境的入门教程
2017/08/14 Javascript
JavaScript实现图片懒加载的方法分析
2018/07/05 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
2019/10/10 jQuery
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
基于JS判断对象是否是数组
2020/01/10 Javascript
Python内置数据类型详解
2014/08/18 Python
编写Python小程序来统计测试脚本的关键字
2016/03/12 Python
python 上下文管理器及自定义原理解析
2019/11/19 Python
pytorch中的自定义数据处理详解
2020/01/06 Python
Python并发爬虫常用实现方法解析
2020/11/19 Python
马来西亚在线时尚女装商店:KEI MAG
2017/09/28 全球购物
香港百佳网上超级市场:PARKNSHOP.com
2020/06/10 全球购物
运动会广播稿100字
2014/01/11 职场文书
银行职员个人的工作自我评价
2014/02/15 职场文书
《大自然的语言》教学反思
2014/04/08 职场文书
爱国口号
2014/06/19 职场文书
个人授权委托书
2014/09/15 职场文书
2016小学教师读书心得体会
2016/01/13 职场文书
重温经典:乔布斯在斯坦福大学的毕业演讲(双语)
2019/08/26 职场文书
如何用JS实现网页瀑布流布局
2021/04/24 Javascript
小程序实现筛子抽奖
2021/05/26 Javascript
yyds什么意思?90后已经听不懂00后讲话了……
2022/02/03 杂记