WEB：伪元素应用1：给按钮换颜色加简单动画效果（CSS）

最新推荐文章于 2023-08-11 12:57:45 发布

阳春三月天

最新推荐文章于 2023-08-11 12:57:45 发布

阅读量698

点赞数 1

分类专栏： HTML&CSS&JS 文章标签： html5 css

本文链接：https://blog.csdn.net/weixin_50517811/article/details/125811737

版权

HTML&CSS&JS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章介绍了如何利用CSS中的伪元素选择器::after创建一个可重复使用的类.btn，实现背景色变化的动画效果。通过设置伪元素的样式，包括内容、定位、尺寸、过渡动画等，实现了在鼠标悬停时按钮背景色淡出的效果。同时，文章强调了CSS布局、层级和过渡属性在实现这一效果中的关键作用。

摘要由CSDN通过智能技术生成

1. 效果

增加可重复使用的类 .btn，完成背景色变化动画效果

标签+伪元素简单动画效果

2. 介绍

2.1 伪元素选择器

2.1.1 作用：选中元素中的一些特殊位置

2.1.2 常用伪元素

::first-letter 选中元素中的第一个文字

::first-line 选中元素中的第一行文字

::selection 选中被鼠标选中的内容

::placeholder 选中输入框的提示文字

::before 在元素最开始的位置创建一个子元素（必须用content属性指定内容）

::after 在元素最后的位置创建一个子元素（必须用content属性指定内容）

2.1.3 本节选用 ::after伪元素选择器

3. 实操

3.1 html部分

<div class="btn-box">
        <a class="btn-a" href="">
            <div class="more btn">
                了解更多
            </div>
        </a>
 </div>

3.2 css部分

*{
    margin:0;
    padding: 0;
}
a{
    text-decoration: none;
}

.btn-box{
    margin-top: 50px;
    text-align: center;
}

.more{
    display: inline-block;
    font-size: 14px;
    padding: 20px 30px;
    width: 100px;
    position: relative;
}
.btn{
    color: #fff;
    border-radius: 30px;
    overflow: hidden;
    text-align: center;
    border: 1px solid blue;
    z-index:1;
}
.btn::after{
    content: '';
    display: block;
    position: absolute;
    background-color: blue;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index:-1;
    transition: opacity 0.5s ease;
}

a:hover .btn::after{
    opacity: 0;
}

a:hover .btn{
    color:blue;
}

4. 总结

html盒子关系：div>a>div

a是行内元素，若未给内层div设置宽高，默认会占满其父元素a，顶满外层div（整行都是a的可点击范围）

.more类作为此按钮的“本身类”

只写一些用作本身的属性
添加属性display:inline-block，可控制其大小（宽、高等），不会再顶满其祖元元素
因需要对其子元素::after作定位（围栏），需要添加属性 position:relative

.btn类作为可重复使用的按钮效果类

写一些固定按钮效果的属性
在.btn中添加边框，不受到后续1px的影响
否则，需要在*类中添加属性 box-sizing:border-box; 这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中
但是在鼠标移入移出效果时会有字体不居中的现象出现，还需要再修改一些属性
可以添加overflow:hidden 将超出部分隐藏
因为border-radius属性不会被继承，所以当after"飘起来"时，它的形状是矩形，需要进行一下超出部分隐藏

.btn::after 可作为一个div去使用

伪元素选择器::after使用必须写content属性，此演示效果不添加任何字体内容
为了给按钮上色后续改色，在此选择器上添加background-color:blue
position:relative可以使该元素从其原来的位置——“飘到正上方”
通过left、right、top、bottom去定具体的位置
此效果通过left:0;top:0去定位伪元素选择器after处于.btn的左上角
此时的::after大小为：0*0 不显示
display:block 将其设置为块元素去设置其宽、高
此效果width:100%;height:100%，百分比是父元素的百分之多少，这样设置填充满了其父元素.btn
此时效果：整个按钮被伪元素选择器“遮罩住”——只显示蓝色，文本也被遮住
after“飘起来”盖住了其父元素.btn，通过设置z-index来调整层级
after中z-index:-1;此时按钮正常显示（背景色+文本都出现），原因是.btn没有设置背景色是透明色，显示出来其下方的after
为了防止有bug出现，我们可以在.btn上增加层级z-index=1;此时after是在.btn的z-index=1的层级的z-index:-1
如果不给.btn加层级，可能出现加了z-index:-1的after被.btn的父元素盖住，而没有显示出效果
z-index:1的层级永远比z-index:0的要高，即使是z-index:1的子元素的z-index:-1000也在z-index:0之上
动画效果
添加属性 transition:opacity 0.5s ease;
监控背景色的透明度，如果有变化，会在0.5s内改变完成，采用ease的动画效果

.a:hover .btn 当鼠标在a链接上悬停时，.btn会发生的变化

添加属性 color:blue;

.a:hover .btn::atfer 当鼠标在a链接上悬停时，伪元素选择器的会发生的变化

修改属性 opacity:0
当鼠标悬停到a链接上时，背景透明度会发生变化，监控会检测到这个变化，开始动画

5. 重点

子元素在父元素中的排列方式是一列一列的（多个行内元素挨着，会处于一行内）

故atfer刚生成时是在.btn的左下角，由于overflow:hidden，所以会看不到其存在，多点F12检查一下

当设置了属性后没有看到可思考以下方面

CSS文件引入了吗？

该属性所在元素的层级够不够？

其元素的父元素的层级够不够？

是否是由于超出并且设置了overflow:hidden？

position定位

子元素中加了position:absolute，其父元素需要添加position:relative

伪元素选择器

atfer、before需要写 content