0 0 5 6 - 按钮‘最强’动画特效 2.0,Web密训营,Web开发,鱼C论坛

隨鈊乄鎍慾 发表于 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

{:7_146:}

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

好好看好好学

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

{:5_109:}

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

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

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

看看{:7_112:}

睁眼睡大觉 发表于 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

{:5_109:}

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

不二牛{:5_91:}

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

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

爱恨原则吗

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

{:10_277:}

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

111

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

学习

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

123

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

{:5_90:}

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

我想看看

页: 1 [2] 3

鱼C论坛's Archiver