0 0 5 4 - 这应该是你见过最“小巧精致灵活“的一个CSS动画 - 0.0

不二如是 · 发表于 2017-2-21 10:06:15

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

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

x

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

在53铺垫了一段很有意义的吹水！

现在就要进入正题，考虑再三，如果一下子就让可爱单纯的鱼油：

看到些过于性感经验丰富的xxx，怕你身体扛不住

So，先搞一个最纯粹，最底层，不带任何技巧的一个姿势！

俗名叫：传教士体位

(哈哈，就知道你得看！欲知姿势详情，请点这里)

好了，安利到此结束，本帖主要基于超链接制作一个动画案例。

既然是超链接，怎么少的了广告呢？

小天才养殖场，快来闯一闯

预知更多的超链接样式，请点这里

基本代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接动画演示</title>
    <style type="text/css">

    </style>
</head>
<body>
    <a href="http://bbs.fishc.com/forum-337-1.html">小天才养殖场，快来闯一闯</a>
</body>
</html>

效果图：

接下来就是，妙手回春的时刻！

设置一些样式，默认显示为无下划线的白色文字。

鼠标指针经过时切换为黑色，放大字体，横向居中，纵向333px。

      body{
            margin-top: 333px;
            text-align: center;
        }
        a{
            color: #FFF;
            font-size: 66px;
            text-decoration: none;
            font-family: STFangsong;
        }
        a:hover{
            color: #000;
        }

效果图：

现在我们要添加一些最简单的动画效果。

当鼠标指针滑过链接时，不会立即变色，而是从白色慢慢过渡到黑色。

  a{
            transition: all 1.9s;
        }

效果图：

哇塞！

有没有，一下就B格很高了呢？！

设置transtition属性，指定了超链接的过渡动画。

属性设置为all，表示当超链接元素中任何属性发生变化，都以动画形式呈现。

动画时间设置为1.9s。

鼠标指针移到超链接，链接在1.9s内从白色变为黑色。

鼠标指针移出超链接，链接在1.9s从黑色变为白色。

此外，该句：

 transition: all 1.9s;

效果上，和color，没有区别。

 transition: color 1.9s;

怎么样，是不是很简单？！

但是效果却是一级棒！

这也是为什么我在53中说

“HTML时代已经来临，Flash已经日落西山”

很残酷，却很现实。

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

）

官方 Web 课程：

shishunfu · 发表于 2017-5-4 11:21:16

交作业

<!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: 66px;
                        font-family: "Comic Sans MS", cursive;
                }
                a{
                        color: #FFF;
                        font-size: 66px;
                        text-decoration: none;
                        font-family: "Comic Sans MS", cursive;
                        transition: all 2.6s;
                }
                a:hover{
                        color: #000;
                }
        </style>
</head>
<body>
        <span>此处有惊喜-->></span><a href="http://bbs.fishc.com/forum.php?mod=collection&action=view&ctid=539">HTML5-庖丁解牛</a>
</body>
</html>

jackche0214 · 发表于 2017-2-21 10:40:07

不错不错~感觉这个还是不错哦

不二如是 · 发表于 2017-2-21 11:15:19

jackche0214 发表于 2017-2-21 10:40
不错不错~感觉这个还是不错哦

那还不订阅：HTML5 - 庖丁解牛

jackche0214 · 发表于 2017-2-21 16:53:49

不二如是发表于 2017-2-21 11:15
那还不订阅：HTML5 - 庖丁解牛

已经订阅了~感觉要学和想学的东西好多啊

不二如是 · 发表于 2017-2-21 17:10:42

jackche0214 发表于 2017-2-21 16:53
已经订阅了~感觉要学和想学的东西好多啊

没事，别着急，一步一步来。

有不会的尽管开头！

虽然我可能会答复不上来

。

但我一定尽力去探索解决办法～

aswyamato1989 · 发表于 2017-7-27 05:38:23

交作业。。。。
这个，动画不会上传啊。。。。

你在意在便在 · 发表于 2019-11-3 18:46:44

come on~

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接动画演示</title>
<style type="text/css">
body {
        text-align: center;
        margin-top:333px;
}
a {
        font-size: 55px;
        text-decoration: none;
        color:white;
        transition: all 1.9s;
        /* 淡入淡出 */
}
        a:hover{
                color:black;
        }
</style>
</head>
<body>
    <a href="http://bbs.fishc.com/forum-337-1.html" target="_thank">小天才养殖场，快来闯一闯</a>
</body>
</html>

suweixuan1998 · 发表于 2020-1-10 12:28:51

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>超链接动画演示</title>
    <style type="text/css">
        body{
            margin-top: 333px;
            text-align: center;
        }
        a{
            color: #fff;
            font-size: 66px;
            text-decoration: none;
            font-family: STFangsong;
            transition: all 1.9s;
        }
        a:hover{
            color: #000;
        }
    </style>
</head>
<body>
    <a href="http://bbs.fishc.com/forum-337-1.html">小天才养殖场，快来闯一闯</a>
</body>
</html>

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

[庖丁解牛] 0 0 5 4 - 这应该是你见过最“小巧精致灵活“的一个CSS动画 - 0.0

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

评分

本帖被以下淘专辑推荐:

点评

点评

评分