0 0 5 5 - 升级你的“按钮”元素动画效果 - 1.0
本帖最后由 不二如是 于 2021-8-11 09:34 编辑在54我们用transition属性制作了第一个小动画。
从B格上讲，不得不佩服，这是HTML5的时代！
如果你还不知道，为啥Flash已死，请看：
实用Tips - 5 “HTML”亲手为“Flash”放上最后一根稻草
这次，继续在上面的特效上进行升级，修改超链接样式、transition动画速度曲线属性。
如果你懒得看54，给你zip
样式代码
body{
margin-top: 333px;
margin-left: 333px;
}
a{
color: #FFF;
font-size:33px;
text-decoration: none;
font-family:STFangsong;
display: block;
width:400px;
height: 66px;
border: 1px solid #FF0088;
line-height: 66px;
border-radius: 6px;
}
a:hover{
color:#00AA00;
background:#555555;
}
a{
transition: all 1.9s;
}
效果图：
修改圆角矩形边框，宽高不做解释。
line-height属性设置行高，因为加了66px像素的height，所以为了显示效果更佳，设置框内部行高。
当鼠标滑过（hover被触发），background变为黑色背景，color其实就是字体颜色变为绿色。
transition属性，还有几个值：
ease 默认属性值，逐渐变慢
linear 匀速
ease-in 加速
ease-out 减速
ease-in-out 加速然后减速
cubic-bezier 该值允许你去自定义一个时间曲线
示意图：
设置一个ease-in-out玩一玩：
a{
transition: all 1.9s ease-in-out;
}
效果图：
看到了吗，鼠标拖入加速，移出后减速。
还可以分别设置color和background时间，注意要用“，”分开
a{
transition:color .6s,background 1.2s ease-in-out;
}
效果图：
color时间设置为0.6s，background1.2s，所以会出现“滞后”效果。
此外color只执行0.6s，然后字体颜色回复为初始设置的白色。
这位鱼油，如果喜欢本帖子，请订阅 专辑-->（传送门）（不喜欢更要订阅{:10_278:} ）
官方 Web 课程：
https://www.bilibili.com/video/BV1QW411N762 <!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: 40px;
font-family: "Comic Sans MS", cursive;
}
a{
color: #FFF;
font-size: 40px;
text-decoration: none;
font-family: "Comic Sans MS", cursive;
transition: all 2.6s ease;
/*display: block;*/
width:400px;
height: 66px;
border: 1px solid #FF0088;
line-height: 66px;
border-radius: 6px;
}
a:hover{
color:#00AA00;
background:#555555;
}
</style>
</head>
<body>
<span>此处有惊喜-->></span><a href="http://bbs.fishc.com/forum.php?mod=collection&action=view&ctid=539">HTML5-庖丁解牛</a>
</body>
</html> 交作业！
光一个transition就这么多功能啊 alltolove 发表于 2017-2-22 13:55
光一个transition就这么多功能啊
是滴，还有几个更好玩的 厉害了我的哥，睡觉，明天试试 <!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:400px;
height:66px;
border:1px solid #ff0088;
line-height:66px;
border-radius:6px;
}
a:hover{
color:#00aa00;
background:#555555;
}
</style>
</head>
<body>
<a href="http://bbs.fishc.com/forum-337-1.html">小天才养殖场，快来闯一闯</a>
</body>
</html>
作业~
<!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;
width: 700px;
height: 70px;
border: 1px solid black;
border-radius:20px;
transition: color 2s,
background 1.2s ease-in-out;
/* 淡入淡出 */
}
a:hover {
color:black;
background: #34495e;
}
</style>
</head>
<body>
<a href="http://bbs.fishc.com/forum-337-1.html" target="_thank">小天才养殖场，快来闯一闯</a>
<hr>
</body>
</html> <!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:400px;
height: 66px;
border: 1px solid #FF0088;
line-height: 66px;
border-radius: 6px;
}
a:hover{
color: #00AA00;
background:#555555;
}
</style>
</head>
<body>
<a href="http://bbs.fishc.com/forum-337-1.html">小天才养殖场，快来闯一闯</a>
</body>
</html>
页:
[1]