CSS特效二：按钮动画效果

最新推荐文章于 2024-07-29 14:14:21 发布

githubcurry

最新推荐文章于 2024-07-29 14:14:21 发布

阅读量2.5k

点赞数 8

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

本文链接：https://blog.csdn.net/weixin_45277161/article/details/110354737

版权

css 专栏收录该内容

28 篇文章 17 订阅

订阅专栏

在这里插入图片描述

今天来实现一个按钮的动画效果：全部为css
动画前的效果为：在这里插入图片描述

动画后的效果为：
在这里插入图片描述

接下来讲一下怎么实现这个小效果：

首先是一个button，button里面包含一个span标签，span里面写一个“hover”
然后设置button为行内块级元素，设置圆角，设置一个transtion转换效果
设置span标签为行内块级元素，position: relative;，transform的转换效果
在span标签后设置一个after，after是可以在此元素后追加一个content，并且可以设置样式，透明度为0将元素隐藏起来
最后分别设置元素的hover效果就好了

其中主要用到了transform，after，hover等，有兴趣的小伙伴可以了解下！也可以私聊询问使用方法。

最后附上源码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>按钮动画</title>
    <style>
        body {
            text-align: center;
        }
        
        .button {
            display: inline-block;
            border-radius: 4px;
            background-color: #f4511e;
            border: none;
            color: #FFFFFF;
            text-align: center;
            font-size: 28px;
            padding: 20px;
            width: 200px;
            transition: all 0.5s;
            cursor: pointer;
            margin: 5px;
        }
        
        .button span {
            cursor: pointer;
            display: inline-block;
            position: relative;
            transition: 0.5s;
        }
        
        .button span:after {
            content: '»';
            position: absolute;
            opacity: 0;
            top: 0;
            right: -20px;
            transition: 0.5s;
        }
        
        .button:hover span {
            padding-right: 25px;
        }
        
        .button:hover span:after {
            opacity: 1;
            right: 0;
        }
    </style>
</head>

<body>

    <h2>按钮动画</h2>

    <button class="button" style="vertical-align:middle"><span>Hover </span></button>

</body>

</html>