白光划过效果

最新推荐文章于 2024-05-08 19:48:17 发布

this_is_Azou

最新推荐文章于 2024-05-08 19:48:17 发布

阅读量326

点赞数

分类专栏： css 文章标签： css3 html

本文链接：https://blog.csdn.net/this_is_Azou/article/details/110834372

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

白光划过效果

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);
}

效果

白光划过效果

this_is_Azou

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
白光划过效果

白光划过效果CSS伪元素，::after用于创建一个伪元素，作为已选中元素的最后一个子元素，配合content的属性为该元素添加修饰内容，该修饰内容属于虚拟内容，默认为行内元素；:after 写在css中为标签之后添加新的内容；::after写在HTML中的元素之后，增添新的内容；都可以用来表示伪类对象，用来设置对象前后的内容；区别:before/:after是css2的写法，::before/::after是css3的写法，从兼容性的角度，写:before/:after，但是在H5开发中
复制链接

扫一扫