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 日志相册贡献荣誉积分 129 狗仔卡头像被屏蔽	发表于 2020-4-1 17:10:34 \| 显示全部楼层提示: 作者被禁止或删除内容自动屏蔽
	小甲鱼最新课程 -> https://ilovefishc.com
	回复使用道具举报显身卡

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

浏览过的版块