请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 马黑黑 于 2024-3-2 21:42 编辑
效果：
代码：
<!--
实现方法：一个父元素带两个子元素
其中：
父元素的两个伪元素分别绘制折线与圆圈
子元素的两个伪元素分别绘制左右风车叶并旋转
风车叶使用同一个切割方法
-->
<style>
#mydiv {
margin: 20px auto;
width: 260px;
height: 260px;
position: relative;
--path: polygon(0 100%, 56% 56%, 100% 56%, 100% 100%); /* 统一切割变量 */
}
/* 主元素伪元素共同属性 */
#mydiv::before, #mydiv::after {
position: absolute;
content: '';
}
/* 主元素伪元素一 ：交叉线 */
#mydiv::before {
inset: 28%; /* 28% 是 56% 的一半 */
background:
linear-gradient(to top right, transparent 49.5%, tan 50%, transparent 50.5%),
linear-gradient(to bottom right, transparent 49.5%, tan 50%, transparent 50.5%);
z-index: 9; /* 提升层级 */
}
/* 主元素伪元素二 ：中心圆圈 */
#mydiv::after {
left: calc(50% - 10px);
top: calc(50% - 10px);
width: 12px;
height: 12px;
background: red;
border: 4px solid white;
border-radius: 50%;
z-index: 10; /* 提升层级 */
}
/* 风车叶主元素 */
.innerDiv {
position: absolute;
width: 100%;
height: 50%;
}
/* 风车叶伪元素共同属性 */
.innerDiv::before, .innerDiv::after {
position: absolute;
content: '';
width: 50%;
height: 100%;
clip-path: var(--path);
}
/* 风车叶伪元素一 ：左部叶子*/
.innerDiv::before {
background: linear-gradient(to top right, olive, red);
}
/* 风车叶伪元素二 ： 右部叶子 */
.innerDiv::after {
left: 50%;
background: linear-gradient(to bottom right, yellow, red);
transform: rotate(90deg);
}
/* 风车叶下部叶子 */
.innerDiv:nth-of-type(2) {
top: 50%;
transform: rotate(-180deg);
}
</style>
<div id="mydiv">
<div class="innerDiv"></div>
<div class="innerDiv"></div>
</div>
| 
发表于 2024-3-2 21:24
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2024-3-2 21:31
创意和实现手法都是一流。。。
楼主
