白光划过效果

最新推荐文章于 2024-12-03 18:59:15 发布

原创最新推荐文章于 2024-12-03 18:59:15 发布 · 417 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #html

css 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何使用CSS伪元素`:before`和`:after`来创建白光划过的效果，以及如何利用`:after`清除浮动，避免布局影响。示例代码展示了在鼠标悬停时应用过渡效果实现动态变化。同时，文章强调了伪元素配合`content`使用以及它们在DOM中的不可见性。

白光划过效果

CSS伪元素，::after

用于创建一个伪元素，作为已选中元素的最后一个子元素，配合content的属性为该元素添加修饰内容，该修饰内容属于虚拟内容，默认为行内元素；

:after 写在css中为标签之后添加新的内容；
::after写在HTML中的元素之后，增添新的内容；

都可以用来表示伪类对象，用来设置对象前后的内容；

区别
- :before/:after是css2的写法，::before/::after是css3的写法，从兼容性的角度，写:before/:after，但是在H5开发中建议使用::before/::after
注意点
- 伪元素需配合content使用
- 伪元素不会出现在DOM中，无法使用js进行操作，仅仅在CSS渲染时加入
- 伪元素的特效通常使用：hover激活

:after 清除浮动

元素设置浮动后，父元素和父元素的兄弟元素的布局都会受到影响，为避免这种浮动带来的影响，必须要清除浮动

使用：after清除浮动的方法：

xx:after{
	content:"";
	display:block;
	width:0;
	height:0;
	clear:both;
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>玻璃划过</title>
    <link rel="stylesheet" href="day_5.css">
</head>
<body>
<div class="box">
    <h1>白光划过</h1>
</div>
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
}

.box {
    position: relative;
    width: 300px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    color: #ffffff;
    cursor: pointer;
    border-radius: 5px;
    background-image: linear-gradient(to right, #fb7299, #ff5c7c);
}

.box::after {
    content: "";
    position: absolute;
    top: 100px;
    left: 0;
    width: 600px;
    height: 70px;
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0));
    transform: rotate(-45deg) translate(0, -360px);
    transition:all .5s;
}

.box:hover {
    margin-top: -20px;
    box-shadow:3px 3px 3px rgba(0,0,0,0.2)
}
.box:hover::after{
    transition:1s;
    transform: rotate(-45deg) translate(0, 100px);
}