CSS小温泉

凡哥

花简静 发表于 2024-8-29 19:56
好像还是思路的问题。。点一下开窍了

思路慢慢会开阔的

花简静

凡哥 发表于 2024-8-29 20:03
思路慢慢会开阔的

好吧，我慢慢来

凡哥

花简静 发表于 2024-8-29 20:07
好吧，我慢慢来

这个关键是做下去。如果停了，将来想再做，还需要一点时间回复记忆

花简静

凡哥 发表于 2024-8-29 22:57
这个关键是做下去。如果停了，将来想再做，还需要一点时间回复记忆

非常有道理，同图那阵子教程停了之后，再做是回去温习完前面的课才写的作业。

凡哥

花简静 发表于 2024-8-30 19:36
非常有道理，同图那阵子教程停了之后，再做是回去温习完前面的课才写的作业。 ...

应该的

花简静

凡哥 发表于 2024-8-30 19:40
应该的

预料之中的对吧，被预判了。。

凡哥

2024年9月6日 星期五

再用 border 做一个小播

<style>
.cone {
	--size: 160px;
	--color: rgba(0,100,128,.6);
	margin: 30px;
	position: relative;
	left: calc(50% - var(--size) / 2);
	top: 20px;
	width: var(--size);
	height: var(--size);
	display: grid;
	place-items: center;
}
.cone::before, .cone::after {
	position: absolute;
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: calc(var(--size) / 2) calc(var(--size) / 2 - 35px);
	border-color: var(--color) transparent;
	border-radius: 50%;
}
.cone::after { transform: rotate(90deg); }
</style>

<div class="cone"></div>

点击查看效果

凡哥

尺寸和颜色只需改变两个变量：--size 和 --color；
22行，border-radius 的值会影响叶片外观；

还可以考虑给叶片加阴影

凡哥

2024年9月7日 星期六

无穷大图标

<style>
.infinity {
	--size: 200px;
	--border: 16px;
	margin: 30px auto;
	width: var(--size);
	height: var(--size);
	border: 1px solid gray;
	filter: drop-shadow(0 0 6px black);
	position: relative;
}
.infinity::before, .infinity::after {
	position: absolute;
	content: '';
	width: calc(50% - var(--border) * 1.5);
	height: calc(50% - var(--border) * 1.5);
	border: var(--border) solid teal;
	border-radius: 50% 50% 0 50%;
	transform-origin: 100% 100%;
}
.infinity::after {
	transform: rotate(-180deg) translate(var(--border), var(--border));
}
</style>

<div class="infinity"></div>

运行代码

凡哥

图标没有平躺，需要躺平的话，给 .infinity 选择器加个旋转语句，-45deg，并将用于观察的灰色边框去掉。