鱼C论坛

 找回密码
 立即注册
查看: 2059|回复: 25

[系列教程] 0 0 5 6 - 按钮‘最强’动画特效 2.0

[复制链接]
最佳答案
243 
发表于 2017-2-23 11:21:11 | 显示全部楼层 |阅读模式

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

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

x
本帖最后由 不二如是 于 2017-2-24 15:44 编辑

54初步看到了transition味。

55分析了transition的几个常用玩法

那么本帖顺理成章,就要:

抛弃一切套路,让有些奇妙的事情自然发生~


还是那个按钮,但是这次我们要加入多个transition动画!

在55源码基础上优化 55.zip (585 Bytes, 下载次数: 32, 售价: 2 鱼币)

评分

参与人数 2荣誉 +10 鱼币 +10 贡献 +6 收起 理由
STmove + 5 + 5 + 3
睦ちゃん她爹 + 5 + 5 + 3 感谢楼主无私奉献!

查看全部评分

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2017-5-4 16:00:55 | 显示全部楼层
不想安装字体,图标点显示出来一个框框
  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: 333px;
  10.                         text-align: center;
  11.                 }
  12.                 span{
  13.                         color: red;
  14.                         font-size: 40px;
  15.                         font-family: "Comic Sans MS", cursive;
  16.                 }
  17.                 a{
  18.                         color: #FFF;
  19.                         font-size: 40px;
  20.                         text-decoration: none;
  21.                         font-family: "Comic Sans MS", cursive;
  22.                         transition: all 2.6s ease;

  23.                         display: block;
  24.                         height: 66px;
  25.                         border: 1px solid #FF0088;
  26.                         line-height: 66px;
  27.                         border-radius: 6px;

  28.                         width:600px;
  29.                         box-sizing: border-box;
  30.                         padding-left: 160px;
  31.                         position: relative;
  32.                 }
  33.                 a:hover{
  34.                         color:#00AA00;
  35.                         background:#555555;
  36.                         padding-left: 20px;
  37.                         background: rgba(0,0,0,.6);
  38.                         /*
  39.                         设置鼠标滑过按钮时,左侧内边距缩小,这样字体部分就会往左跑。
  40.                         背景色用60%透明度,提升体验。
  41.                         */
  42.                 }
  43.                 a:hover::after{
  44.                         right: 6%;
  45.                         /*
  46.                         最后为鼠标指针滑动下after伪元素设置新的属性。
  47.                         向右移动,并停止在右边整体宽度6%的位置。
  48.                         */
  49.                 }
  50.                 @font-face {
  51.                         font-family: 'icon-font';
  52.                         /*src: url('flat-ui-icons-regular.ttf'), url('flat-ui-icons-regular.eot'), url('flat-ui-icons-regular.woff'), url('flat-ui-icons-regular.svg');*/
  53.                 }
  54.                 a::after{
  55.                         /*font-family:'icon-font';*/
  56.                         content: '\e607';
  57.                         position: absolute;
  58.                         right: 85%;
  59.                         transition: all .8s;
  60.                 }
  61.         </style>
  62. </head>
  63. <body>
  64.         <a href="http://bbs.fishc.com/forum.php?mod=collection&action=view&ctid=539">HTML5-庖丁解牛</a>
  65. </body>
  66. </html>
复制代码
0044.png

点评

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

评分

参与人数 1荣誉 +6 鱼币 +6 贡献 +3 收起 理由
不二如是 + 6 + 6 + 3 棒棒哒~

查看全部评分

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2017-3-7 00:03:44 From FishC Mobile | 显示全部楼层
编程还是设计师?
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2017-3-7 17:30:47 | 显示全部楼层
111
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2017-3-28 14:46:54 | 显示全部楼层
111
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2017-3-31 22:42:33 | 显示全部楼层
求问为什么我按操作做,用IE或者chrome打开,整个块长度变化

点击前

点击前
QQ截图20170331224153.jpg
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
243 
 楼主| 发表于 2017-4-1 09:24:39 | 显示全部楼层
疯样的篮子 发表于 2017-3-31 22:42
求问为什么我按操作做,用IE或者chrome打开,整个块长度变化


建议发求助帖,方便把代码贴出话来

help.gif
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2017-4-1 17:50:13 | 显示全部楼层
不二如是 发表于 2017-4-1 09:24
建议发求助帖,方便把代码贴出话来

好像直接用你的代码问题就没有了~~~~~~~~监介......
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2017-4-11 08:03:13 | 显示全部楼层
支持!!!!!!!!

评分

参与人数 1鱼币 +10 收起 理由
不二如是 + 10 热爱鱼C^_^

查看全部评分

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
243 
 楼主| 发表于 2017-4-11 09:46:29 | 显示全部楼层
dreamdnj 发表于 2017-4-11 08:03
支持!!!!!!!!

谢谢~
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2017-7-27 07:56:04 | 显示全部楼层
回复看帖
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2017-7-27 08:05:02 | 显示全部楼层
交作业!
056-02.jpg
056-01.jpg
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2017-7-30 14:15:57 | 显示全部楼层
...真的丑  正式项目不可能用
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2018-1-24 20:59:18 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2018-2-20 11:31:20 | 显示全部楼层
支持学习了!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2018-3-25 16:14:27 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2018-5-11 13:40:04 From FishC Mobile | 显示全部楼层
学一下。。。。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2018-5-15 21:05:18 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2018-5-15 21:07:43 | 显示全部楼层
:haver 是伪类选择器  ::after是伪元素选择器      
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2018-5-17 23:07:44 | 显示全部楼层
大佬
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

小甲鱼强烈推荐上一条 /1 下一条

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号

GMT+8, 2018-12-13 22:48

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

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