首页 > 生活讲堂

小球消消看(小球消消消)

更新时间:2023-03-02 06:34:54 阅读：评论：0

效果展示

思路

这里用span元素代表外层白色圆圈

两个红色小球分别用span的两个伪类::before和::after代表

根据效果图，可以大概得出思路

先利用span生成一个正方形，设置好边框两个伪类元素为绝对定位，分别位于正方形的左上和右下然后分别对其进行圆角处理最后添加旋转动画即可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元素设置为

一个96✖️96px的正方形边框为10px，白色，solid

width : 96px; height: 96px; border: 10px solid #fff;

效果图如下

步骤2

span::before和span::after设置

宽度、高度均为20px绝对定位，其中before位于左上，after位于右下背景色为红色

/* before的设置*/position: absolute; content: ''; top: 0; left: 0; width: 20px; height: 20px; background: red; /*after的设置*/ position: absolute; content: ''; bottom: 0; right: 0; width: 20px; height: 20px; background: red;

效果图如下

在这里插入图片描述

步骤3

稍微向正方形中心移动下::before和::after

/* before的设置*/ top: 15px; left: 15px; /*after的设置*/ bottom: 15px; right: 15px;

效果图如下

在这里插入图片描述

步骤4

对span、span::before、span::after设置圆角

border-radius: 50%;

效果图如下

步骤7