怎么用純css3實現炫酷的動畫背畫特效

本篇內容介紹了“怎么用純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;</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實現炫酷的動畫背畫特效”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！