一款纯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: 0;
  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: 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;
}

@-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

时间： 2024-10-05 05:44:05

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

一款纯css3实现的超炫3D表单

今天要给大家分享一款纯css3实现的超炫3D表单.该特效页面的加载的时候3d四十五度倾斜,当鼠标经过的时候表单动画回正.效果非常炫,一起看下效果图: 在线预览   源码下载 实现的代码. html代码: <div id="face"> <div id="content"> <p> <input type="text" placeholder="Name" /></p>

iHover &ndash; 30+ 纯 CSS3 实现的超炫的图片悬停特效

iHover 是一个令人印象深刻的图片悬停效果集合,完全基于 CSS3 实现,无依赖,能够搭配 Bootstrap 3 很好地工作.基于 SCSS 技术构建(包括文件),便于修改变量.有模块化的代码,无需包含整个文件. 把饭 30 多个悬停效果,满足各种需要. https://github.com/gudh/ihover https://github.com/gudh/ihover iHover – 30+ 纯 CSS3 实现的超炫的图片悬停特效

纯css3实现的超炫checkbox复选框和radio单选框

之前为大家分享了好多css3实现的按钮.今天要为大家分享的是纯css3实现的checkbox复选框和radio单选框,效果超级炫.先让我们看看图吧! 在线预览   源码下载 这个实例完全由css3实现的没有任何js代码.下面我们一起看下实现代码吧 html代码: <div style="width:200px; float:left"> <label> <input type="checkbox" class="option-

7款纯CSS3实现的炫酷动画应用

1.纯CSS3实现人物摇头动画 这次我们要来分享一款超级可爱的纯CSS3人物摇头动画,初始化的时候人物的各个部位是利用CSS3动画效果拼接而成,接下来就是人物听音乐的场景,一边听音乐一边摇着脑袋,十分陶醉的样子,周围还会出现跳动的音符动画. 在线演示 源码下载 2.CSS3 Loading进度条加载动画特效 3款绚丽风格 今天我要分享一款更加炫酷的CSS3进度条加载动画特效,该动画特效有3个不同的风格,注意,IE6,7,8是不支持该进度条动画的. 在线演示 源码下载 3.纯CSS3实现云雾缭绕动

推荐10款纯css3实现的实用按钮

在2014年的双11即将来临之季,爱编程小编为大家整理10款纯css3实现的按钮.希望这对坚守在前端的码农们有所帮助.亲,如果你有好的资源也可在本文留言,让从事编码的程序员们抱团.工作更轻松. No1.一款基于css3非常实用的鼠标悬停特效 这款特效,当鼠标经过时候一个半透明的遮罩层倒下来.效果很好,而且是纯css3实现的,代码很少,非常实用. 效果如下: 在线预览   源码下载 No2.一款基于css3的简单的鼠标悬停按钮 这款悬停按钮鼠标经过前边框是间断的.当鼠标经过的时候边框间隔消失.效果

纯css3实现的鼠标悬停动画按钮

今天给大家带来一款纯css3实现的鼠标悬停动画按钮.这款按钮鼠标经过前以正方形的形式,当鼠标经过的时候以动画的形式变成圆形.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div> <span></span> </div> css3代码: body { background-color: #333; } div { width: 200px; height: 200px; margin: 0 auto; } span { positio

纯CSS3悬停图标旋转导航动画代码

分享一款纯CSS3悬停图标旋转导航动画代码.这是一款鼠标移到图标上动画旋转显示导航菜单.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="x_contant"> <a class="xzt1" href="#"><img src="images/xztz_1.png" /></a> <a class="xzt2" hr

一款超炫的图片排列特效

今天给大家分享一款超炫的图片排列特效.页面加载时.图片纵向堆叠在页面中,当鼠标单击toggle按钮时,图片依次展开.铺满整个网页.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="t-container"> <div class="t-content"> <img class="t-img" src="img00.jpg" alt=""

一款纯css3实现的动画加载导航

之前为大家介绍了好几款导航菜单,今天为给大家再带来一款纯css3实现的动画加载导航.该导航出现的时候以动画的形式出现.效果图如下: 在线预览   源码下载 实现的代码. html代码: <ul class="main-menu"> <li class="main-menu-item active"><a href="#">Home</a></li><li class="m