米字形圆环小播制作演示

评论资讯 [ 总 12 则 ]

友情链接

网站统计

·前端三套件 : 180
·JS插件 : 68
·黑石音画 : 514
·代码集锦 : 78
·小工具集合 : 31
·网友作品精选 : 9
·svgdr : 26
·杂记 : 4

·今日访问 : 336
·页面点击 : 346
·当前在线 : 4

米字形圆环小播制作演示

位置: 首页 > 前端三套件[ 发布时间: 2024.7.1 作者: 马黑阅读: 528 ]

米字形圆环小播效果：

（一）部件：元素 + ::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>

发表评论:

评论列表 [2条]

#2 | 飞飞于 2024-7-1 20:05 发布: 这个组装零件的动画，看着好治愈

#1 | 悄然于 2024-7-1 20:05 发布: 居中、尺寸 5% * 5%这个我见过，重新复习一次