伪元素结合伪类 css3

最新推荐文章于 2024-06-25 18:31:00 发布

洽 1279

最新推荐文章于 2024-06-25 18:31:00 发布

阅读量337

点赞数

分类专栏： CSS学习文章标签： css3 css 前端

本文链接：https://blog.csdn.net/weixin_42393848/article/details/120917194

版权

CSS学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

伪元素
- 代码
- 示例图
伪类与伪元素的结合
参考

伪元素

伪元素在某个元素上添加了一个页面中没有的元素，也即在添加到页面的伪元素是不存在与DOM树中的，伪元素常见的有::before , ::after,分别是在元素前添加、元素后添加，添加的伪元素是目标的子组件。下面的代码显示了基本的效果。

代码

<body>
<div class="parent">
    <div class="child"></div>
</div>
</body>

.parent
{
        background-color: antiquewhite;
        width: 100vw;
        height: 100vh;
}
.child
{
        width: 50%;
        height: 100px;
        background-color: aqua;
        position: relative;
        transform: skewX(20deg);
        left: 50%;
        transform: translateX(-50%); /*搭配left实现居中效果*/
        transition: all 2s ease;
}
.child::before
{
		content: "";
        z-index: 100;
        position: absolute;/*因为父组件是relative方式，所以此组件的绝对定位是相对于div.child*/
        left: 0;
        transform: skewX(20deg);/*x轴倾斜*/
        top: 0;
        width: 50%;  /*这里是使用父组件（div.child)宽度的100%*/
        height: 100%;
        background-color: black;
}

示例图

absolute定位的基点是相对于父组件，但若父组件的定位方式是static，定位的基点就会变成Html文档流，即此时的top,left,bottom,right是相对于标签html的。child::before的父组件是child，且child的定位方式是relative，所以child::before定位方式top left bottom right是相对于child的。
在这里插入图片描述

伪类与伪元素的结合

最常用的伪类是:hover,我们可以对上面的代码稍加修改，对伪元素施加鼠标悬停的动画效果。

.child:hover::before{
        animation: child_animation 2s ease alternate;
    }
    @keyframes child_animation {
        0%,100%{background-color: aquamarine}
        50%{background-color: cadetblue}
    }

注意
.child::before:hover是行不通的

参考

CSS定位详解
 伪类
 伪元素

洽 1279

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
伪元素结合伪类 css3

文章目录实现伪类元素的hover效果新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入实现伪类元素的hover效果你好！这是你第一次使用 Markdown编辑器所展示的欢迎页。如果你想学习如何使用Markdown编辑器
复制链接

扫一扫