纯css制作九宫格色块翻转效果，代码只需100行

来源：互联网发布：linux内网端口转发编辑：程序博客网时间：2024/04/30 09:43

用纯css代码制作的九宫格色块翻转效果，代码只有100行左右，全程不添加javascript代码，一起来看下是怎么样写的吧。

九宫格色块翻转源码：

<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>纯css制作九宫格色块翻转效果</title><style>.loader {width: 100px;height: 100px;-webkit-perspective: 100px;perspective: 100px;position: absolute;top: 50%;left: 50%;margin-top: -50px;margin-left: -50px;}.loader__tile {display: block;float: left;width: 33.33%;height: 33.33%;-webkit-animation-name: flip;animation-name: flip;-webkit-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;-webkit-animation-duration: 2s;animation-duration: 2s;-webkit-animation-timing-function: ease-in-out;animation-timing-function: ease-in-out;-webkit-transform: rotateY(0deg);transform: rotateY(0deg);z-index: 0;}.loader__tile__1 {background-color: #943048;-webkit-animation-delay: 0.1s;animation-delay: 0.1s;}.loader__tile__2 {background-color: #d7532d;-webkit-animation-delay: 0.2s;animation-delay: 0.2s;}.loader__tile__3 {background-color: #d2cabb;-webkit-animation-delay: 0.3s;animation-delay: 0.3s;}.loader__tile__4 {background-color: #9faad0;-webkit-animation-delay: 0.4s;animation-delay: 0.4s;}.loader__tile__5 {background-color: #b39a3b;-webkit-animation-delay: 0.5s;animation-delay: 0.5s;}.loader__tile__6 {background-color: #dc2c34;-webkit-animation-delay: 0.6s;animation-delay: 0.6s;}.loader__tile__7 {background-color: #ece5be;-webkit-animation-delay: 0.7s;animation-delay: 0.7s;}.loader__tile__8 {background-color: #d07500;-webkit-animation-delay: 0.8s;animation-delay: 0.8s;}.loader__tile__9 {background-color: #7983a9;-webkit-animation-delay: 0.9s;animation-delay: 0.9s;}@-webkit-keyframes flip {0% {-webkit-transform: rotateY(0deg);transform: rotateY(0deg);}11% {-webkit-transform: rotateY(180deg);transform: rotateY(180deg);}}@keyframes flip {0% {-webkit-transform: rotateY(0deg);transform: rotateY(0deg);}11% {-webkit-transform: rotateY(180deg);transform: rotateY(180deg);}}</style></head><body><div class="loader"><i class="loader__tile loader__tile__1"></i><i class="loader__tile loader__tile__2"></i><i class="loader__tile loader__tile__3"></i><i class="loader__tile loader__tile__4"></i><i class="loader__tile loader__tile__5"></i><i class="loader__tile loader__tile__6"></i><i class="loader__tile loader__tile__7"></i><i class="loader__tile loader__tile__8"></i><i class="loader__tile loader__tile__9"></i></div></body></html>

web前端学习群：575308719，分享源码、视频、企业级案例、最新知识点，欢迎初学者和在进阶中的小伙伴。

关注公众号→‘学习web前端’跟大佬一起学前端！

阅读全文

0 0