CSS+HTML纸风车

马黑黑

马黑黑

一楼代码

<style>
.mdiv {
	--size: 300px;
	margin: 50px auto;
	width: var(--size);
	height: var(--size);
	border: 1px solid gray;
	transition: 3s;
	position: relative;
}
.mdiv:hover { transform: rotate(360deg); }
.mdiv > span {
	position: absolute;
	left: calc(var(--size) / 4);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: calc(var(--size) / 4) calc(var(--size) / 4) calc(var(--size) / 4) 0;
	border-color: transparent lightblue steelblue transparent;
	transform-origin: 100% 100%;
}
.mdiv > span:nth-of-type(2) { transform: rotate(90deg); }
.mdiv > span:nth-of-type(3) { transform: rotate(180deg); }
.mdiv > span:nth-of-type(4) { transform: rotate(270deg); }
</style>

<div class="mdiv">
	<span></span>
	<span></span>
	<span></span>
	<span></span>
</div>

马黑黑

说明：

一、父元素边框只为观察使用；
二、CSS变量 --size 是父元素的宽高尺寸，也是子元素 span 的left属性定位和边框宽度（border-width）的依据；
三、父元素的伪类选择器 :hover 只为动画演示需要；
四、父元素下不应存在其他的span标签，要单纯。

红影

这个有趣，鼠标触动，可以转动360度，鼠标移开又转回去了

红影

看了半天，有点想不通，border-width:数值不需要单位的么？默认是px吧。
然后border-color:的设置下，感觉已经到了75的地方，怎么还需要设置left，，，我再去想想

红影

想起了以前的三角形等形状，就是不设宽高，然后用透明加颜色就能弄出三角形。
不过那个时候是四个方向一样的border-width:，现在左边的是0，有点想不出来。哦，我知道了，左边border-width:是0，所以贴着左边了，加上上下的border-width:，如此宽度是1/4，高度是1/2，如此取border-color的上是透明，就已经得到其中的叶片了，最后面的那个不管是不是透明都没什么了，也就是border-color: transparent lightblue steelblue transparent;随便放什么颜色都没影响。
嗯，看明白了

红影

怪不得要设left: ，这样可以放到中间去，然后旋转基点用transform-origin: 100% 100%;，其实这个是叶瓣右下角，同时也是父元素的中心点，再旋转就行了。
--size 的设置巧妙，都能被用上。

红影

去试了一下，把border-color: transparent lightblue steelblue transparent;里的steelblue也变成透明，出来的效果也挺好玩的

红影

马黑黑

红影 发表于 2024-8-27 21:18
去试了一下，把border-color: transparent lightblue steelblue transparent;里的steelblue也变成透明，出 ...

很多可能

马黑黑

红影 发表于 2024-8-27 20:28
这个有趣，鼠标触动，可以转动360度，鼠标移开又转回去了

这是经典的 transition 动画

马黑黑

红影 发表于 2024-8-27 21:16
怪不得要设left: ，这样可以放到中间去，然后旋转基点用transform-origin: 100% 100%;，其实这个是叶瓣右下 ...

酱紫，修改一个数字就成了，这是CSS变量的用处之一

红影

马黑黑 发表于 2024-8-27 21:36
这是经典的 transition 动画

取border-width: calc(var(--size) / 4) 0 calc(var(--size) / 4) calc(var(--size) / 4);

也就是切掉右边，还能变成逆时针转的叶瓣

红影

马黑黑

红影 发表于 2024-8-27 21:54
取border-width: calc(var(--size) / 4) 0 calc(var(--size) / 4) calc(var(--size) / 4);

也就是切掉 ...

对，多试试会有惊喜。开始时，可以不用 CSS变量 和 calc函数，也不用那么多的子元素

红影

马黑黑 发表于 2024-8-27 21:36
很多可能

是啊，很好玩

小辣椒

这个风车做的太漂亮了

红影

马黑黑 发表于 2024-8-27 21:36
这是经典的 transition 动画

border-width 和 border-color 结合创造的美好效果。

红影

马黑黑 发表于 2024-8-27 21:37
酱紫，修改一个数字就成了，这是CSS变量的用处之一

嗯嗯，感受到，这样的变量非常好用。