1200字范文 > HTML小案例-使用CSS3实现网页加载loding动画

HTML小案例-使用CSS3实现网页加载loding动画

时间：2023-12-08 18:42:56

话不多说先看效果

** 以下为源代码 **

<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>CSS3实现loding动画</title><style type="text/css">*{margin: 0;padding: 0;}.circlebox{width: 50px;height: 50px;margin: 200px 200px;position: absolute;}.circlebox p {width: 12px;height: 12px;background-color: red;border-radius: 50%;position: absolute;/* animation: 动画名称，周期，匀速，无限循环*/animation: move 1.5s linear infinite;}/* nth-of-type()表示同类型的第几个元素 */.circlebox p:nth-of-type(1) {left: 0; top: 0;}.circlebox p:nth-of-type(2) {left: 0; bottom: 0}.circlebox p:nth-of-type(3) {right: 0; top: 0}.circlebox p:nth-of-type(4) {right: 0; bottom: 0}/* 复制同类型的四个点，并将其旋转45度，形成围成一个圆的八个点 */.circlebox:nth-of-type(2) {transform: rotate(45deg)}@keyframes move {0% {/* scale(n) 表示扩大n倍 */transform: scale(0);}50% {transform: scale(1);}100% {transform: scale(0);}}.circlebox:nth-of-type(1) p:nth-of-type(1) {animation-delay: -0.1s;}.circlebox:nth-of-type(2) p:nth-of-type(1) {animation-delay: -0.3s;}.circlebox:nth-of-type(1) p:nth-of-type(2) {animation-delay: -0.5s;}.circlebox:nth-of-type(2) p:nth-of-type(2) {animation-delay: -0.7s;}.circlebox:nth-of-type(1) p:nth-of-type(3) {animation-delay: -0.9s;}.circlebox:nth-of-type(2) p:nth-of-type(3) {animation-delay: -1.1s;}.circlebox:nth-of-type(1) p:nth-of-type(4) {animation-delay: -1.3s;}.circlebox:nth-of-type(2) p:nth-of-type(4) {animation-delay: -1.5s;}</style></head><body><div class="circlebox"><p></p><p></p><p></p><p></p></div><div class="circlebox"><p></p><p></p><p></p><p></p></div></body></html>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。