CSS小温泉

花简静

凡哥 发表于 2024-8-22 21:42
改变一些数据，效果会大不一样。例如，单单改变 .leaf 的 border-radius

改了页片宽高不同，
border-radius的裁剪试了好多种，还是目前这个比较漂亮。
旋转中心点也试了一下，整体性还是右下角的比较漂亮。
最后这个Y轴改为X之后，色彩整体发生了变化。

花简静

花简静

用了深粉色跟黄色搭配，太娇嫩了。中间部分跟阳光透过来一样。。就是一个好看。。

花简静

<style> #mydiv {     margin: 80px auto;     width: 60px;     height: 80px;     position: relative;     cursor: pointer;     animation: rot 8s linear infinite var(--state);     --state: running; }   .leaf {     position: absolute;     left: -50%;     top: -50%;     width: 100%;     height: 100%;     background: linear-gradient(45deg, yellow, DeepPink);     border-radius: 80% 0%;     transform-origin: 100% 100%;     transform: rotate(var(--deg)) translateX(65px); } .leaf:nth-of-type(1) { --deg: 0deg; } .leaf:nth-of-type(2) { --deg: 72deg; } .leaf:nth-of-type(3) { --deg: 144deg; } .leaf:nth-of-type(4) { --deg: 216deg; } .leaf:nth-of-type(5) { --deg: 288deg; } @keyframes rot { to { transform: rotate(360deg); } </style>   <div id="mydiv">     <span class="leaf"></span>     <span class="leaf"></span>     <span class="leaf"></span>     <span class="leaf"></span>     <span class="leaf"></span>     <audio id="aud" src="https://music.163.com/song/media/outer/url?id=136937" autoplay loop></audio> </div>   <script> mydiv.onclick = () => {     aud.paused ? aud.play() : aud.pause();     mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running'); }; </script>  

凡哥

花简静 发表于 2024-8-23 15:42
用了深粉色跟黄色搭配，太娇嫩了。中间部分跟阳光透过来一样。。就是一个好看。。 ...

非常漂亮，漂亮的不要不要的

花简静

凡哥 发表于 2024-8-23 18:39
非常漂亮，漂亮的不要不要的

跟你之前那朵经典的小粉花有得一比

凡哥

花简静 发表于 2024-8-24 19:51
跟你之前那朵经典的小粉花有得一比

你的更强

花简静

凡哥 发表于 2024-8-24 20:02
你的更强

我的要用还要费一番功夫才能用到贴子里。

凡哥

2024年8月27日 星期二

纸风车

<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>

凡哥

纸风车效果