纯CSS-logo扫光特效-网站logo扫光美化CSS！

在自定义CSS样式代码中复制以下css代码粘贴至里面！

/**logo位置扫光创心域**/
.logo-wrapper:after {
content: “”;
position: absolute;
width: 80px;

这段CSS代码实现了一个创心域顶部logo的扫光特效，包括日间和夜间两个版本。

首先，.logo-wrapper:after选择器表示选择logo-wrapper类的元素的伪元素after，即在元素的内容之后插入一个伪元素。

接下来是该伪元素的属性设置：

content: “”; 表示伪元素的内容为空。

position: absolute; 将伪元素的定位设置为绝对定位，相对于其最近的具有定位属性的父元素进行定位。

width: 150px; 设置伪元素的宽度为150像素。

height: 10px; 设置伪元素的高度为10像素。

background-color: rgba(255,255,255,.5); 设置伪元素的背景颜色为半透明的白色。

接下来是对伪元素应用动画效果的设置：

-webkit-transform: rotate(-45deg); 和 transform: rotate(-45deg); 将伪元素进行旋转，角度为-45度。
-webkit-animation: blink 1s ease-in 1s infinite; 和 animation: blink 1s ease-in 1s infinite; 应用名为blink的动画效果，持续时间为1秒，以渐入方式开始动画，延迟1秒后开始动画，并且无限循环播放。

接下来是针对夜间模式的样式设置：

.dark-open .logo-wrapper:after选择器表示当具有dark-open类的元素的子元素，且该子元素具有logo-wrapper类时，应用以下样式。
background-color: rgba(41,48,66,1); 设置伪元素的背景颜色为不透明的深蓝色。

最后是关键帧动画的定义：

@-webkit-keyframes blink、@-o-keyframes blink、@-moz-keyframes blink和@keyframes blink分别定义了名为blink的关键帧动画。
from {left: 10px;top: 0;} 定义了动画的起始关键帧，将伪元素的左边距设置为10像素，上边距设置为0。
to {left: 320px;top: 0;} 定义了动画的结束关键帧，将伪元素的左边距设置为320像素，上边距保持为0。
这样，通过这段CSS代码，可以实现一个创心域顶部logo的扫光特效，根据日间和夜间模式的不同，改变伪元素的背景颜色，给用户带来视觉上的动态效果。

创心域技术网永久会员

打赏 收藏 海报 链接