温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

怎么用纯css3实现炫酷的动画背画特效

发布时间:2021-07-30 09:12:32 阅读:126 作者:chen 栏目:web开发
前端开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

本篇内容介绍了“怎么用纯css3实现炫酷的动画背画特效”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

  之前为大家介绍了很多款由纯css3实现的特效。今天要再给大家带来一款纯css3实现的超炫动画背画特效。代码非常简单,没有引用任何其它js代码。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代码:

代码如下:

bodybackground#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-transformrotateX(45degrotateY(0degrotateZ(45deg); -moz-transform:rotateX(45degrotateY(0degrotateZ(45deg); -ms-transform:rotateX(45degrotateY(0degrotateZ(45deg); -o-transform:rotateX(45degrotateY(0degrotateZ(45deg); transform:rotateX(45degrotateY(0degrotateZ(45deg); }   .fake-gif {  position: relative;  margin10rem auto 0 auto;  width20rem;  height20rem;</p>
<p> }.fake-gif .stripe {  position: absolute;  border-radius50%;  -webkit-box-shadow2px 2px 0 rgba(0000.3);  box-shadow2px 2px 0 rgba(0000.3);  -webkit-transformtranslate3d(0px0px0px);  transformtranslate3d(0px0px0px);}.fake-gif .stripe:nth-child(odd) {  left0;  width100%;  height5%;background-colorrgba(109602090.5);box-shadow0px 6px 40px #5800FF, inset 0px 2px 5px #DF00FF;</p>
<p>}.fake-gif .stripe:nth-child(even) {  top0;  width5%;  height100%background-colorrgba(0240400.5);box-shadow0px 6px 40px #007D35, inset 0px 2px 5px #7CFFB5;}.fake-gif .stripe:nth-child(4n+1) {  z-index3;}.fake-gif .stripe:nth-child(4n+2) {  z-index4;}.fake-gif .stripe:nth-child(4n+3) {  z-index1;}.fake-gif .stripe:nth-child(4n) {  z-index2;}.fake-gif .stripe:nth-child(2) {  left4.7%;  -webkit-animation: move-y 2.7s 0.2s infinite;  animation: move-y 2.7s 0.2s infinite;}.fake-gif .stripe:nth-child(4) {  left11.9%;  -webkit-animation: move-y 2.7s 0.4s infinite;  animation: move-y 2.7s 0.4s infinite;}.fake-gif .stripe:nth-child(6) {  left19.1%;  -webkit-animation: move-y 2.7s 0.6s infinite;  animation: move-y 2.7s 0.6s infinite;}.fake-gif .stripe:nth-child(8) {  left26.3%;  -webkit-animation: move-y 2.7s 0.8s infinite;  animation: move-y 2.7s 0.8s infinite;}.fake-gif .stripe:nth-child(10) {  left33.5%;  -webkit-animation: move-y 2.7s 1s infinite;  animation: move-y 2.7s 1s infinite;}.fake-gif .stripe:nth-child(12) {  left40.7%;  -webkit-animation: move-y 2.7s 1.2s infinite;  animation: move-y 2.7s 1.2s infinite;}.fake-gif .stripe:nth-child(14) {  left47.9%;  -webkit-animation: move-y 2.7s 1.4s infinite;  animation: move-y 2.7s 1.4s infinite;}.fake-gif .stripe:nth-child(16) {  left55.1%;  -webkit-animation: move-y 2.7s 1.6s infinite;  animation: move-y 2.7s 1.6s infinite;}.fake-gif .stripe:nth-child(18) {  left62.3%;  -webkit-animation: move-y 2.7s 1.8s infinite;  animation: move-y 2.7s 1.8s infinite;}.fake-gif .stripe:nth-child(20) {  left69.5%;  -webkit-animation: move-y 2.7s 2s infinite;  animation: move-y 2.7s 2s infinite;}.fake-gif .stripe:nth-child(22) {  left76.7%;  -webkit-animation: move-y 2.7s 2.2s infinite;  animation: move-y 2.7s 2.2s infinite;}.fake-gif .stripe:nth-child(24) {  left83.9%;  -webkit-animation: move-y 2.7s 2.4s infinite;  animation: move-y 2.7s 2.4s infinite;}.fake-gif .stripe:nth-child(26) {  left91.1%;  -webkit-animation: move-y 2.7s 2.6s infinite;  animation: move-y 2.7s 2.6s infinite;}.fake-gif .stripe:nth-child(1) {  top3.6%;  -webkit-animation: move-x 2.7s 0.1s infinite;  animation: move-x 2.7s 0.1s infinite;}.fake-gif .stripe:nth-child(3) {  top10.8%;  -webkit-animation: move-x 2.7s 0.3s infinite;  animation: move-x 2.7s 0.3s infinite;}.fake-gif .stripe:nth-child(5) {  top18%;  -webkit-animation: move-x 2.7s 0.5s infinite;  animation: move-x 2.7s 0.5s infinite;}.fake-gif .stripe:nth-child(7) {  top25.2%;  -webkit-animation: move-x 2.7s 0.7s infinite;  animation: move-x 2.7s 0.7s infinite;}.fake-gif .stripe:nth-child(9) {  top32.4%;  -webkit-animation: move-x 2.7s 0.9s infinite;  animation: move-x 2.7s 0.9s infinite;}.fake-gif .stripe:nth-child(11) {  top39.6%;  -webkit-animation: move-x 2.7s 1.1s infinite;  animation: move-x 2.7s 1.1s infinite;}.fake-gif .stripe:nth-child(13) {  top46.8%;  -webkit-animation: move-x 2.7s 1.3s infinite;  animation: move-x 2.7s 1.3s infinite;}.fake-gif .stripe:nth-child(15) {  top54%;  -webkit-animation: move-x 2.7s 1.5s infinite;  animation: move-x 2.7s 1.5s infinite;}.fake-gif .stripe:nth-child(17) {  top61.2%;  -webkit-animation: move-x 2.7s 1.7s infinite;  animation: move-x 2.7s 1.7s infinite;}.fake-gif .stripe:nth-child(19) {  top68.4%;  -webkit-animation: move-x 2.7s 1.9s infinite;  animation: move-x 2.7s 1.9s infinite;}.fake-gif .stripe:nth-child(21) {  top75.6%;  -webkit-animation: move-x 2.7s 2.1s infinite;  animation: move-x 2.7s 2.1s infinite;}.fake-gif .stripe:nth-child(23) {  top82.8%;  -webkit-animation: move-x 2.7s 2.3s infinite;  animation: move-x 2.7s 2.3s infinite;}.fake-gif .stripe:nth-child(25) {  top90%;  -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-transformtranslateZ(-25px);    transformtranslateZ(-25px);  }</p>
<p>  50% {    -webkit-transformtranslateZ(25px);    transformtranslateZ(25px);  }}</p>
<p>@-webkit-keyframes move {  0%100% {    -webkit-transformrotateX(-25degrotateY(-25deg);    transformrotateX(-25degrotateY(-25deg);  }</p>
<p>  50% {    -webkit-transformrotateX(25pxrotateY(25deg);    transformrotateX(25pxrotateY(25deg);  }}</p>
<p>@keyframes move-y {  0%100% {    -webkit-transformtranslateY(-25%);    transformtranslateY(-25%);  }</p>
<p>  50% {    -webkit-transformtranslateY(25%);    transformtranslateY(25%);  }}@-webkit-keyframes move-x {  0%100% {    -webkit-transformtranslateZ(-25px);    transformtranslateZ(-25px);  }</p>
<p>  50% {    -webkit-transformtranslateZ(25px);    transformtranslateZ(25px);  }}@keyframes move-x {  0%100% {    -webkit-transformtranslateX(-25%);    transformtranslateX(-25%);  }</p>
<p>  50% {    -webkit-transformtranslateX(25%);    transformtranslateX(25%);  }}  

“怎么用纯css3实现炫酷的动画背画特效”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

原文链接:https://www.jb51.net/css/241774.html

AI

开发者交流群×