请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
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>
|