温馨提示:这篇文章已超过1047天没有更新,请注意相关的内容是否还可用!
注意到box-shadow
还有个inset
,用于盒子内部发光利用这个特性我们可以在盒子内部的某个范围内设定颜色,做出一个新月形
再加点动画和滤镜效果,“猩红之月”闪亮登场!
HTML:
<div class="loading"></div>
CSS:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: black;
}
.loading {
position: relative;
width: 8em;
height: 8em;
background: black;
border-radius: 50%;
box-shadow: inset 0.5em -0.5em crimson;
animation: spin 2s linear infinite;
&::before,
&::after {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: inherit;
border-radius: inherit;
box-shadow: inherit;
}
&::before {
filter: blur(5px);
}
&::after {
filter: blur(10px);
}
}
@keyframes spin {
to {
transform: rotate(1turn);
}
}
text-shadow
文本阴影,本质上和box-shadow
相同,只不过是相对于文本而言,常用于文本发光,也可通过多层叠加来制作霓虹文本和伪3D文本等效果
文章版权声明:除非注明,否则均为折腾博客原创文章,转载或复制请以超链接形式并注明出处。
还没有评论,来说两句吧...