一种类似护盾绕圆旋转的设计

来源：互联网发布：餐饮进销存软件编辑：程序博客网时间：2024/05/22 13:57

效果：

index.html

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>test</title><link rel="stylesheet" type="text/css" href="style.css"></head><body><div class="circle"><span>爱心等级</span><strong>4</strong><span>2012-03-02</span></div></body></html>

style.css

.circle {position: relative;border: solid 1px green;border-radius: 50%;height: 200px;width: 200px;text-align: center;display: flex;align-items: center;justify-content: center;flex-direction:column;margin: 100px;}.circle> strong {display: block;font-size: 48px;margin-top: 10px;color: red;}.circle:before,.circle:after {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: -5%;border-radius: 50%;box-shadow: inset 0 0 0 2px green;animation: rotate 8s linear infinite;clip: rect(0, 110px, 110px, 0);}.circle:before {clip: rect(0, 110px, 110px, 0);}.circle:after {clip: rect(110px, 220px, 220px, 110px);}@keyframes rotate{0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}

阅读全文

0 0