鱼C论坛

 找回密码
 立即注册
楼主: 不二如是

[庖丁解牛] 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>
55.gif
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-7-12 19:09:42 | 显示全部楼层
fwwgehrfjkyl,yikyk
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-8-8 14:36:04 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-8-22 18:12:31 | 显示全部楼层
好好看好好学
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-11-7 14:31:58 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-1-12 20:52:47 | 显示全部楼层
RE: 0 0 5 6 - 按钮‘最强’动画特效 2.0 [修改]
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-1-13 19:57:52 | 显示全部楼层
看看
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-3-27 22:25:22 | 显示全部楼层
好骚啊 哈哈 赞
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 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>
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 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>
1.jpg
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-2-18 16:56:57 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-3-17 17:53:13 | 显示全部楼层
不二牛
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

头像被屏蔽
发表于 2020-4-1 17:10:34 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-5-30 11:19:59 | 显示全部楼层
爱恨原则吗
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-5-30 23:50:51 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-2-24 14:39:26 | 显示全部楼层
111
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-3-25 01:06:51 From FishC Mobile | 显示全部楼层
学习
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-5-19 22:27:55 | 显示全部楼层
123
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-10-26 09:55:39 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2022-5-6 21:19:00 | 显示全部楼层
我想看看
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-12-22 20:54

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表