0 0 5 5 - 升级你的“按钮”元素动画效果 - 1.0

不二如是 · 发表于 2017-2-22 08:26:57

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由不二如是于 2021-8-11 09:34 编辑

在54我们用transition属性制作了第一个小动画。

从B格上讲，不得不佩服，这是HTML5的时代！

如果你还不知道，为啥Flash已死，请看：

实用Tips - 5 “HTML”亲手为“Flash”放上最后一根稻草

这次，继续在上面的特效上进行升级，修改超链接样式、transition动画速度曲线属性。

如果你懒得看54，给你zip

54.zip (162.02 KB, 下载次数: 49, 售价: 2 鱼币)

样式代码

      body{
            margin-top: 333px;
            margin-left: 333px;
        }
        a{
            color: #FFF;
            font-size:33px;
            text-decoration: none;
            font-family:STFangsong;

            display: block;
            width:400px;
            height: 66px;
            border: 1px solid #FF0088;
            line-height: 66px;
            border-radius: 6px;

        }
        
        a:hover{
            color:#00AA00;
            background:#555555;
        }

        a{
            transition: all 1.9s;
        }

效果图：

修改圆角矩形边框，宽高不做解释。

line-height属性设置行高，因为加了66px像素的height，所以为了显示效果更佳，设置框内部行高。

当鼠标滑过（hover被触发），background变为黑色背景，color其实就是字体颜色变为绿色。

transition属性，还有几个值：

ease 默认属性值，逐渐变慢
linear 匀速
ease-in 加速
ease-out 减速
ease-in-out 加速然后减速
cubic-bezier 该值允许你去自定义一个时间曲线

示意图：

设置一个ease-in-out玩一玩：

a{
            transition: all 1.9s ease-in-out;
        }

效果图：

看到了吗，鼠标拖入加速，移出后减速。

还可以分别设置color和background时间，注意要用“，”分开

  a{
            transition:color .6s,background 1.2s ease-in-out;
        }

效果图：

color时间设置为0.6s，background1.2s，所以会出现“滞后”效果。

此外color只执行0.6s，然后字体颜色回复为初始设置的白色。

这位鱼油，如果喜欢本帖子，请订阅专辑-->（传送门）（不喜欢更要订阅

）

官方 Web 课程：

shishunfu · 发表于 2017-5-4 15:26:47

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>超链接动画演示</title>
        <style type="text/css">
                body{
                        margin-top: 333px;
                        text-align: center;
                }
                span{
                        color: red;
                        font-size: 40px;
                        font-family: "Comic Sans MS", cursive;
                }
                a{
                        color: #FFF;
                        font-size: 40px;
                        text-decoration: none;
                        font-family: "Comic Sans MS", cursive;
                        transition: all 2.6s ease;

                        /*display: block;*/
                        width:400px;
                        height: 66px;
                        border: 1px solid #FF0088;
                        line-height: 66px;
                        border-radius: 6px;
                }
                a:hover{
                        color:#00AA00;
                        background:#555555;
                }
        </style>
</head>
<body>
        <span>此处有惊喜-->></span><a href="http://bbs.fishc.com/forum.php?mod=collection&action=view&ctid=539">HTML5-庖丁解牛</a>
</body>
</html>

aswyamato1989 · 发表于 2017-7-27 07:42:41

交作业！

alltolove · 发表于 2017-2-22 13:55:52

光一个transition就这么多功能啊

不二如是 · 发表于 2017-2-22 21:55:27

alltolove 发表于 2017-2-22 13:55
光一个transition就这么多功能啊

是滴，还有几个更好玩的

a540656809 · 发表于 2017-3-7 00:00:18

厉害了我的哥，睡觉，明天试试

隨鈊乄鎍慾 · 发表于 2018-6-24 13:10:12

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>55-超链接动画演示</title>
    <style type="text/css">
        body{
            margin-top:333px;
            margin-left:333px;
        }
        a{
            color:#fff;
            font-size:33px;
            text-decoration:none;
            font-family:STFangsong;
            #transition:all 2s ease;/*ease-in-out先加后减，匀速：linear,逐渐慢下来ease*/
            transition:color .6s,background 1.2s ease-in-out;/*还可以分别设置color和background时间，注意要用“，”分开*/
            display:block;
            width:400px;
            height:66px;
            border:1px solid #ff0088;
            line-height:66px;
            border-radius:6px;

        }
        a:hover{
            color:#00aa00;
            background:#555555;
        }
    </style>
</head>
<body>
<a href="http://bbs.fishc.com/forum-337-1.html">小天才养殖场，快来闯一闯</a>
</body>
</html>

你在意在便在 · 发表于 2019-11-3 19:39:27

作业~

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接动画演示</title>
<style type="text/css">
body {
        text-align: center;
        margin-top:333px;
}
a {
        margin: 20px auto;
        font-size: 55px;
        text-decoration: none;
        color:white;
        display: block;
        padding-bottom: 10px;
        width: 700px;
        height: 70px;
        border: 1px solid black;
        border-radius:20px;
        
        transition: color 2s,
        background 1.2s ease-in-out;
        /* 淡入淡出 */
}
        a:hover {
                color:black;
                background: #34495e;
        }
</style>
</head>
<body>
<a href="http://bbs.fishc.com/forum-337-1.html" target="_thank">小天才养殖场，快来闯一闯</a>
<hr>
</body>
</html>

suweixuan1998 · 发表于 2020-1-10 16:14:34

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>超链接动画演示</title>
    <style type="text/css">
        body{
            margin-top: 333px;
            margin-left: 40%;
            text-align: center;
        }
        a{
            color: #fff;
            font-size: 33px;
            text-decoration: none;
            font-family: STFangsong;
            transition: color .6s,background 1.9s ease-in-out;
            display: block;
            width:400px;
            height: 66px;
            border: 1px solid #FF0088;
            line-height: 66px;
            border-radius: 6px;
        }
        a:hover{
            color: #00AA00;
            background:#555555;
        }
    </style>
</head>
<body>
    <a href="http://bbs.fishc.com/forum-337-1.html">小天才养殖场，快来闯一闯</a>
</body>
</html>

账号		自动登录	找回密码
密码			立即注册

[庖丁解牛] 0 0 5 5 - 升级你的“按钮”元素动画效果 - 1.0

马上注册，结交更多好友，享用更多功能^_^

评分

本帖被以下淘专辑推荐:

点评

评分

点评

评分