鱼C论坛

 找回密码
 立即注册
查看: 4315|回复: 10

[庖丁解牛] 0 0 5 5 - 升级你的“按钮”元素动画效果 - 1.0

[复制链接]
发表于 2017-2-22 08:26:57 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 不二如是 于 2021-8-11 09:34 编辑

54我们用transition属性制作了第一个小动画。

从B格上讲,不得不佩服,这是HTML5的时代

如果你还不知道,为啥Flash已死,请看:

实用Tips - 5 “HTML”亲手为“Flash”放上最后一根稻草

这次,继续在上面的特效上进行升级,修改超链接样式transition动画速度曲线属性。

如果你懒得看54,给你zip 54.zip (162.02 KB, 下载次数: 49, 售价: 2 鱼币)

样式代码
  1.       body{
  2.             margin-top: 333px;
  3.             margin-left: 333px;
  4.         }
  5.         a{
  6.             color: #FFF;
  7.             font-size:33px;
  8.             text-decoration: none;
  9.             font-family:STFangsong;

  10.             display: block;
  11.             width:400px;
  12.             height: 66px;
  13.             border: 1px solid #FF0088;
  14.             line-height: 66px;
  15.             border-radius: 6px;

  16.         }
  17.         
  18.         a:hover{
  19.             color:#00AA00;
  20.             background:#555555;
  21.         }

  22.         a{
  23.             transition: all 1.9s;
  24.         }
复制代码

效果图:
1.gif


修改圆角矩形边框,宽高不做解释。

line-height属性设置行高,因为加了66px像素的height,所以为了显示效果更佳,设置内部行高。

当鼠标滑过(hover被触发),background变为黑色背景,color其实就是字体颜色变为绿色。

transition属性,还有几个值:

ease 默认属性值,逐渐变慢
linear 匀速
ease-in 加速
ease-out 减速
ease-in-out 加速然后减速
cubic-bezier 该值允许你去自定义一个时间曲线


示意图:

transition-timing-function.png

cubic-bezier.png


设置一个ease-in-out玩一玩:
  1. a{
  2.             transition: all 1.9s ease-in-out;
  3.         }
复制代码

效果图:
1.gif


看到了吗,鼠标拖入加速,移出后减速。

还可以分别设置color和background时间,注意要用“,”分开
  1.   a{
  2.             transition:color .6s,background 1.2s ease-in-out;
  3.         }
复制代码

效果图:
1.gif


color时间设置为0.6s,background1.2s,所以会出现“滞后”效果。

此外color只执行0.6s,然后字体颜色回复为初始设置的白色。

这位鱼油,如果喜欢本帖子,请订阅 专辑-->传送门)(不喜欢更要订阅


官方 Web 课程:

评分

参与人数 1荣誉 +5 鱼币 +5 贡献 +3 收起 理由
睦ちゃん她爹 + 5 + 5 + 3 无条件支持楼主!

查看全部评分

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2017-5-4 15:26:47 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>超链接动画演示</title>
  6.         <style type="text/css">
  7.                 body{
  8.                         margin-top: 333px;
  9.                         text-align: center;
  10.                 }
  11.                 span{
  12.                         color: red;
  13.                         font-size: 40px;
  14.                         font-family: "Comic Sans MS", cursive;
  15.                 }
  16.                 a{
  17.                         color: #FFF;
  18.                         font-size: 40px;
  19.                         text-decoration: none;
  20.                         font-family: "Comic Sans MS", cursive;
  21.                         transition: all 2.6s ease;

  22.                         /*display: block;*/
  23.                         width:400px;
  24.                         height: 66px;
  25.                         border: 1px solid #FF0088;
  26.                         line-height: 66px;
  27.                         border-radius: 6px;
  28.                 }
  29.                 a:hover{
  30.                         color:#00AA00;
  31.                         background:#555555;
  32.                 }
  33.         </style>
  34. </head>
  35. <body>
  36.         <span>此处有惊喜-->></span><a href="http://bbs.fishc.com/forum.php?mod=collection&action=view&ctid=539">HTML5-庖丁解牛</a>
  37. </body>
  38. </html>
复制代码
0043.png

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2017-5-4 21:38

评分

参与人数 1鱼币 +6 收起 理由
不二如是 + 6 支持楼主!

查看全部评分

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-7-27 07:42:41 | 显示全部楼层
交作业!
055.jpg

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2017-7-27 07:43

评分

参与人数 1鱼币 +6 收起 理由
不二如是 + 6 支持楼主!

查看全部评分

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-2-22 13:55:52 From FishC Mobile | 显示全部楼层
光一个transition就这么多功能啊
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-2-22 21:55:27 | 显示全部楼层
alltolove 发表于 2017-2-22 13:55
光一个transition就这么多功能啊

是滴,还有几个更好玩的
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-3-7 00:00:18 From FishC Mobile | 显示全部楼层
厉害了我的哥,睡觉,明天试试
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-6-24 13:10:12 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>55-超链接动画演示</title>
  6.     <style type="text/css">
  7.         body{
  8.             margin-top:333px;
  9.             margin-left:333px;
  10.         }
  11.         a{
  12.             color:#fff;
  13.             font-size:33px;
  14.             text-decoration:none;
  15.             font-family:STFangsong;
  16.             #transition:all 2s ease;/*ease-in-out先加后减,匀速:linear,逐渐慢下来ease*/
  17.             transition:color .6s,background 1.2s ease-in-out;/*还可以分别设置color和background时间,注意要用“,”分开*/
  18.             display:block;
  19.             width:400px;
  20.             height:66px;
  21.             border:1px solid #ff0088;
  22.             line-height:66px;
  23.             border-radius:6px;

  24.         }
  25.         a:hover{
  26.             color:#00aa00;
  27.             background:#555555;
  28.         }
  29.     </style>
  30. </head>
  31. <body>
  32. <a href="http://bbs.fishc.com/forum-337-1.html">小天才养殖场,快来闯一闯</a>
  33. </body>
  34. </html>
复制代码

55.gif
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-11-3 19:39:27 | 显示全部楼层
作业~
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>超链接动画演示</title>
  6. <style type="text/css">
  7. body {
  8.         text-align: center;
  9.         margin-top:333px;
  10. }
  11. a {
  12.         margin: 20px auto;
  13.         font-size: 55px;
  14.         text-decoration: none;
  15.         color:white;
  16.         display: block;
  17.         padding-bottom: 10px;
  18.         width: 700px;
  19.         height: 70px;
  20.         border: 1px solid black;
  21.         border-radius:20px;
  22.         
  23.         transition: color 2s,
  24.         background 1.2s ease-in-out;
  25.         /* 淡入淡出 */
  26. }
  27.         a:hover {
  28.                 color:black;
  29.                 background: #34495e;
  30.         }
  31. </style>
  32. </head>
  33. <body>
  34. <a href="http://bbs.fishc.com/forum-337-1.html" target="_thank">小天才养殖场,快来闯一闯</a>
  35. <hr>
  36. </body>
  37. </html>
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-1-10 16:14:34 | 显示全部楼层
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>超链接动画演示</title>
  6.     <style type="text/css">
  7.         body{
  8.             margin-top: 333px;
  9.             margin-left: 40%;
  10.             text-align: center;
  11.         }
  12.         a{
  13.             color: #fff;
  14.             font-size: 33px;
  15.             text-decoration: none;
  16.             font-family: STFangsong;
  17.             transition: color .6s,background 1.9s ease-in-out;
  18.             display: block;
  19.             width:400px;
  20.             height: 66px;
  21.             border: 1px solid #FF0088;
  22.             line-height: 66px;
  23.             border-radius: 6px;
  24.         }
  25.         a:hover{
  26.             color: #00AA00;
  27.             background:#555555;
  28.         }
  29.     </style>
  30. </head>
  31. <body>
  32.     <a href="http://bbs.fishc.com/forum-337-1.html">小天才养殖场,快来闯一闯</a>
  33. </body>
  34. </html>
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

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

本版积分规则

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

GMT+8, 2024-3-29 13:33

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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