CSS小温泉

花简静

花简静

凡哥 发表于 2024-8-27 20:01
纸风车效果

.mdiv {

太漂亮了，也跟了一个，反方向的。

花简静

凡哥 发表于 2024-8-27 20:00
2024年8月27日 星期二
纸风车

构思太巧了吧，这也能想出来。。裁来裁去就裁出个漂亮的风车了

花简静

<style> .mdiv {     --size: 300px;     margin: 50px auto;     width: var(--size);     height: var(--size);     transition: 8s;     position: relative; } .mdiv:hover { transform: rotate(360deg); filter: hue-rotate(100deg) drop-shadow(0 0 10px yellow); border-color: OrangeRed Yellow DeepSkyBlue;} .mdiv > span {     position: absolute;     right: calc(var(--size) / 4);     width: 0;     height: 0;     border-style: solid;     border-width: calc(var(--size) / 4) 0 calc(var(--size) / 4) calc(var(--size) / 4);     border-color: transparent green #be7902 #8dbd81;     transform-origin: 0 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>

花简静

transform-origin: 0 100%;又学到一个定位点的改变

凡哥

花简静 发表于 2024-8-27 21:59
transform-origin: 0 100%;又学到一个定位点的改变

这是定义 transform 的运动中心，默认或缺省时是 50% 50% 或 center center

凡哥

花简静 发表于 2024-8-27 21:58 构思太巧了吧，这也能想出来。。裁来裁去就裁出个漂亮的风车了

利用JS，可以做出更多效果：

花简静

凡哥 发表于 2024-8-27 22:10
这是定义 transform 的运动中心，默认或缺省时是 50% 50% 或 center center

这个好象用得不多，所以试了一会才找出来

凡哥

187楼的代码：

<style>
#mdiv {
	--size: 200px;
	--color: lightblue;
	margin: 30px auto;
	width: var(--size);
	height: var(--size);
	transition: 3s;
	position: relative;
}
#mdiv::after {
	position: absolute;
	content: '';
	left: calc(50% - 10px);
	top: calc(50% - 10px);
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: pink;
}
#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 var(--color) transparent transparent;
	transform-origin: 100% 100%;
}
</style>

<div id="mdiv"></div>

<script>
Array(total = 7).fill('').forEach((s,k) => {
	s = document.createElement('span');
	s.style.transform = `rotate(${360 / total * k}deg)`;
	s.style.setProperty('--color', `#${Math.random().toString().substring(2,8)}`);
	mdiv.appendChild(s);
});
</script>

花简静

凡哥 发表于 2024-8-27 22:11
利用JS，可以做出更多效果：

#mdiv {

天啦，更好看