CSS特效二:按钮动画效果

在这里插入图片描述

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

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

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

  1. 首先是一个button,button里面包含一个span标签,span里面写一个“hover”
  2. 然后设置button为行内块级元素,设置圆角,设置一个transtion转换效果
  3. 设置span标签为行内块级元素,position: relative;,transform的转换效果
  4. 在span标签后设置一个after,after是可以在此元素后追加一个content,并且可以设置样式,透明度为0将元素隐藏起来
  5. 最后分别设置元素的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>
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 鲸 设计师:meimeiellie 返回首页