效果展示
思路這里用span元素代表外層白色圓圈
兩個紅色小球分別用span的兩個偽類::before和::after代表
根據(jù)效果圖，可以大概得出思路
先利用span生成一個正方形，設(shè)置好邊框兩個偽類元素為絕對定位，分別位于正方形的左上和右下然后分別對其進(jìn)行圓角處理最后添加旋轉(zhuǎn)動畫即可Demo代碼HTML
<!DOCTYPE html><!DOCTYPE html><html lang="en"><head> <meta chart="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title></head><body> <ction><span></span></ction></body></html>
CSS
html,body{ margin: 0; height: 100%;}body{ display: flex; justify-content: center; align-items: center; background: #263238;}ction { width: 650px; height: 300px; padding: 10px; position: relative; display: flex; align-items: center; justify-content: center; /* 紅色邊框僅作提示 */ border: 2px solid red;}span{ width : 96px; height: 96px; border: 10px solid white; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; animation: rotation 2s linear infinite;}span::before{ position: absolute; content: ''; top: 15px; left: 15px; width: 20px; height: 20px; background: red; border-radius: 50%;}span::after{ position: absolute; content: ''; bottom: 15px; right: 15px; width: 20px; height: 20px; background: red; border-radius: 50%;}@keyframes rotation { 0% { transform: rotate(0deg) } 100% { transform: rotate(360deg) }}原理詳解步驟1
將span元素設(shè)置為
一個96??96px的正方形邊框為10px，白色，solid width : 96px; height: 96px; border: 10px solid #fff;
效果圖如下
步驟2span::before和span::after設(shè)置
寬度、高度均為20px絕對定位，其中before位于左上，after位于右下背景色為紅色/* before的設(shè)置*/position: absolute; content: ''; top: 0; left: 0; width: 20px; height: 20px; background: red; /*after的設(shè)置*/ position: absolute; content: ''; bottom: 0; right: 0; width: 20px; height: 20px; background: red;
效果圖如下
在這里插入圖片描述
步驟3稍微向正方形中心移動下::before和::after
/* before的設(shè)置*/ top: 15px; left: 15px; /*after的設(shè)置*/ bottom: 15px; right: 15px;
效果圖如下
在這里插入圖片描述
步驟4對span、span::before、span::after設(shè)置圓角
border-radius: 50%;
效果圖如下
步驟7為span添加動畫
animation: rotation 1s linear infinite;
/*動畫實(shí)現(xiàn)*/ @keyframes rotation { 0% { transform: rotate(0deg) } 100% { transform: rotate(360deg) }
效果圖如下
在這里插入圖片描述
本文發(fā)布于:2023-02-28 20:56:00，感謝您對本站的認(rèn)可！
本文鏈接：http://www.newhan.cn/zhishi/a/167771009494481.html
版權(quán)聲明：本站內(nèi)容均來自互聯(lián)網(wǎng)，僅供演示用，請勿用于商業(yè)和其他非法用途。如果侵犯了您的權(quán)益請與我們聯(lián)系，我們將在24小時內(nèi)刪除。
本文word下載地址：小球消消看(小球消消消).doc
本文 PDF 下載地址：小球消消看(小球消消消).pdf
| 留言與評論（共有 0 條評論） |
