🍅 作者主页：Java李杨勇
🍅 简介：Java领域优质创作者🏆、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我，都给你】
🍅 欢迎点赞 👍 收藏 ⭐留言 📝
效果演示：文末获取源码
代码目录：
主要代码实现：
CSS样式：
.load1 .loader,.load1 .loader:before,.load1 .loader:after {background: #FFF;-webkit-animation: load1 1s infinite ease-in-out;animation: load1 1s infinite ease-in-out;width: 1em;height: 4em;}.load1 .loader:before,.load1 .loader:after {position: absolute;top: 0;content: '';}.load1 .loader:before {left: -1.5em;-webkit-animation-delay: -0.32s;animation-delay: -0.32s;}.load1 .loader {text-indent: -9999em;margin: 8em auto;position: relative;font-size: 11px;-webkit-animation-delay: -0.16s;animation-delay: -0.16s;}.load1 .loader:after {left: 1.5em;}@-webkit-keyframes load1 {0%,80%,100% {box-shadow: 0 0 #FFF;height: 4em;}40% {box-shadow: 0 -2em #ffffff;height: 5em;}}@keyframes load1 {0%,80%,100% {box-shadow: 0 0 #FFF;height: 4em;}40% {box-shadow: 0 -2em #ffffff;height: 5em;}}
HTML代码 :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>单个元素实现的 CSS3 Loading 效果</title><meta name="viewport" content="width=device-width"><link rel="stylesheet" href="css/style.css"></head><body><div class="inner"><link rel="stylesheet" href="css/load1.css"><div class="load-container load1"><div class="loader">Loading...</div></div><link rel="stylesheet" href="css/load2.css"><div class="load-container load2"><div class="loader">Loading...</div></div><link rel="stylesheet" href="css/load3.css"><div class="load-container load3"><div class="loader">Loading...</div></div><link rel="stylesheet" href="css/load4.css"><div class="load-container load4"><div class="loader">Loading...</div></div><link rel="stylesheet" href="css/load5.css"><div class="load-container load5"><div class="loader">Loading...</div></div><link rel="stylesheet" href="css/load6.css"><div class="load-container load6"><div class="loader">Loading...</div></div><link rel="stylesheet" href="css/load7.css"><div class="load-container load7"><div class="loader">Loading...</div></div><link rel="stylesheet" href="css/load8.css"><div class="load-container load8"><div class="loader">Loading...</div></div></div></body></html>
上面的图片文件和js文件需要引入
源码获取
大家可以点赞、收藏、关注、评论我啦 、查看博主主页或下方微信公众号获取~！
打卡 文章 更新44/ 100天
精彩推荐更新中：
HTML5大作业实战100套
