米字形圆环小播制作演示
位置:
首页 >
前端三套件[发布: 2024.7.1 作者: 马黑 阅读: 352]
米字形圆环小播效果：
制作方法：
（一）部件 ：元素 + ::before + ::after
（二）组装 ：
（三）米字形圆环小播代码
<style>
#player {
position: relative;
width: 100px; height: 100px;
background:
/* center/5% 5% 渐变背景图像位置居中、尺寸 5% * 5%
第一个渐变背景自上而下布置颜色（默认），背景纵向重复
第二个渐变背景从左到右布置颜色，背景横向重复
*/
linear-gradient(green,lightgreen) repeat-y center/5% 5%,
linear-gradient(to right,green,lightgreen) repeat-x center/5% 5%;
border: thick double;
border-color: green lightgreen;
border-radius: 50%;
}
#player::before, #player::after {
position: absolute;
content: '';
}
#player::before {
inset: 0;
background: inherit;
transform: rotate(45deg);
}
#player::after {
inset: 40px;
background: green;
border-radius: 50%;
}
</style>
<div id="player"></div>
前一篇: CSS关键帧动画文本效果：逐行出场
下一篇: CSS代码实时着色测试
发表评论:
评论列表 [2条]
#2 | 飞飞 于 2024-7-1 20:05 发布: 这个组装零件的动画，看着好治愈
#1 | 悄然 于 2024-7-1 20:05 发布: 居中、尺寸 5% * 5%这个我见过，重新复习一次
