关于伪元素如何添加过渡动画功能

最新推荐文章于 2024-01-09 15:18:27 发布

peachmaple

最新推荐文章于 2024-01-09 15:18:27 发布

阅读量1.1k

点赞数 2

文章标签： css

本文链接：https://blog.csdn.net/weixin_44731038/article/details/123964541

版权

关于伪元素如何添加过渡动画功能

首先准备一个容器，在容器中添加伪元素及想添加的过渡属性初始值
这里使用width举例我将width初始设置为0，过渡到100%；

初始设置元素基本样式

 <style>
      div{
        position: relative;
        width: 100px; 
        height: 30px;
        line-height: 30px;
        text-align: center;
        margin: 100px auto;
        background-color: #28e874;
      }
    </style>
</head>
<body>
<div>按钮</div>

设置伪元素的基本样式并且将width设置为0；

 div::before{
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
        height: 30px;
        width: 0px;        //初始为0
        transition: all .2s linear;
        background-color: rgba(30, 110, 213,.5);
      }

添加过渡的目标宽度或者目标属性值

  div:hover::before{
       width: 100%;       //过渡到100
  }

最后鼠标移入移出就会有动画效果了！
不管大家要添加什么效果都可以按照这个试试噢！如果有什么问题，希望小伙伴们可以及时纠正互相学习！

peachmaple

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
关于伪元素如何添加过渡动画功能

关于伪元素如何添加过渡动画功能首先准备一个容器，在容器中添加伪元素及想添加的过渡属性初始值这里使用width举例我将width初始设置为0，过渡到100%；初始设置元素基本样式 <style> div{ position: relative; width: 100px; height: 30px; line-height: 30px; text-align: center;
复制链接

扫一扫