0 0 5 6 - 按钮‘最强’动画特效 2.0

隨鈊乄鎍慾 · 发表于 2018-6-25 21:08:55

交作业：
<!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:600px;
         box-sizing: border-box;
         padding-left:160px;
         height:66px;
         border:1px solid #ff0088;
         line-height:66px;
         border-radius:6px;
         position:relative;

      }
      /*外部导入，一个字体*/
      @font-face {
         font-family: 'icon-font';
         src: url('fonts/icons.eot'), url('fonts/icons.otf'), url('fonts/icons.ttf'), url('fonts/icons.woff');
      }
      a:hover{
         color:#00aa00;
         background:#555555;
         padding-left:20px;
         background:rgba(0,0,0,.6);
      }
      /*使用after伪元素创建一个图标。*/
      a::after{
         font-family:'icon-font';
         content: '\e607';
         position: absolute;
         left:15%;
         transition: all .8s;
      }
      a:hover::after{
         left: 85%;
      }

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

shaoran334@qq.c · 发表于 2018-7-12 19:09:42

fwwgehrfjkyl,yikyk

floride · 发表于 2018-8-8 14:36:04

a211827754 · 发表于 2018-8-22 18:12:31

好好看好好学

小丸子hjm · 发表于 2018-11-7 14:31:58

莫希 · 发表于 2019-1-12 20:52:47

RE: 0 0 5 6 - 按钮‘最强’动画特效 2.0 [修改]

2506846774 · 发表于 2019-1-13 19:57:52

看看

睁眼睡大觉 · 发表于 2019-3-27 22:25:22

好骚啊哈哈赞

你在意在便在 · 发表于 2019-11-3 20:29:11

这章有点懵

<!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;
        /* padding-left: 220px; */
        width: 900px;
        height: 70px;
        border: 1px solid black;
        box-sizing: border-box;
        position: relative;
        border-radius:20px;
        
        transition: color 2s,
        background 1.2s ease-in-out;
        /* 淡入淡出 */
}
        a:hover {
                color:black;
                background: #34495e;
                /* padding-left: 20px; */
                background: rgba(0,0,0,.6);
        }
        a::after {
                font-family: 'icon-font';
                content: '>';
                position: absolute;
                right: 88%;
                /* 符号移动范围 */
                transition: all 1s;
        }
        a:hover::after {
                right: 6%;
                /* 符号最后停止位置 */
        }
</style>
</head>
<body>
<a href="http://bbs.fishc.com/forum-337-1.html" target="_thank">小天才养殖场，快来闯一闯</a>
<hr>
</body>
</html>

suweixuan1998 · 发表于 2020-1-10 23:33:01

<!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:600px;
            height: 66px;
            border: 1px solid #FF0088;
            line-height: 66px;
            border-radius: 6px;
            box-sizing: border-box;
            padding-left: 160px;
            position: relative;
        }



        @font-face {
            font-family: 'icon-font';
            src: url('fonts/icons.ttf'), url('fonts/icons.eot'), url('fonts/icons.woff'), url('fonts/icons.svg');
        }
        a::after{
            font-family:'icon-font';
            content: '\e607';
            position: absolute;
            right: 85%;
            transition: all .8s;
        }
        a:hover{
            color:#00AA00;
            background:#555555;
            padding-left: 20px;
            background: rgba(0,0,0,.6);
        }
        a:hover::after{
            right: 6%;
        }
    </style>
</head>
<body>
    <a href="http://bbs.fishc.com/forum-337-1.html">小天才养殖场，快来闯一闯</a>
</body>
</html>

幸运幸运 · 发表于 2020-2-18 16:56:57

小脑斧 · 发表于 2020-3-17 17:53:13

不二牛

287187056 · 发表于 2020-4-1 17:10:34

提示: 作者被禁止或删除内容自动屏蔽

1041556532 · 发表于 2020-5-30 11:19:59

爱恨原则吗

tianyuan · 发表于 2020-5-30 23:50:51

以梦喂马 · 发表于 2021-2-24 14:39:26

ainz42 · 发表于 2021-3-25 01:06:51

学习

Rydia · 发表于 2021-5-19 22:27:55

RC1300603763 · 发表于 2021-10-26 09:55:39

红tea少年 · 发表于 2022-5-6 21:19:00

我想看看

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

287187056 287187056 当前离线 UID 104738 日志相册贡献荣誉积分 128 狗仔卡头像被屏蔽	发表于 2020-4-1 17:10:34 \| 显示全部楼层提示: 作者被禁止或删除内容自动屏蔽
	想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
	回复使用道具举报显身卡

[庖丁解牛] 0 0 5 6 - 按钮‘最强’动画特效 2.0