请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 马黑黑 于 2024-7-1 15:58 编辑
米字形圆环小播效果：
制作方法：
（一）部件 ：元素 + ::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>
| 
发表于 2024-7-1 12:23
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2024-7-1 12:25
楼主
发表于 2024-7-1 17:06
