QQ登录

只需一步,快速开始

登录 | 立即注册 | 找回密码

主题

帖子

荣誉

管理团队

Rank: 30Rank: 30Rank: 30Rank: 30

技术值
查看: 1237|回复: 20

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

[复制链接]
最佳答案
134 
累计签到:655 天
连续签到:183 天
不二如是 发表于 2017-2-23 11:21:11 123720 | 显示全部楼层 |阅读模式

马上注册加入鱼C,享用更多服务吧^_^

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

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

54初步看到了transition味。

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

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

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


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

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

本帖被以下淘专辑推荐:

楼层
跳转到指定楼层
最佳答案
0 
累计签到:137 天
连续签到:1 天
shishunfu 发表于 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 棒棒哒~

查看全部评分

最佳答案
0 
累计签到:1 天
连续签到:1 天
a540656809 发表于 2017-3-7 00:03:44 From FishC Mobile | 显示全部楼层
编程还是设计师?
最佳答案
0 
累计签到:2 天
连续签到:2 天
163areocraft 发表于 2017-3-7 17:30:47 | 显示全部楼层
111
最佳答案
0 
累计签到:2 天
连续签到:1 天
Xman 发表于 2017-3-28 14:46:54 | 显示全部楼层
111
最佳答案
0 
累计签到:7 天
连续签到:1 天
疯样的篮子 发表于 2017-3-31 22:42:33 | 显示全部楼层
求问为什么我按操作做,用IE或者chrome打开,整个块长度变化

点击前

点击前
QQ截图20170331224153.jpg
最佳答案
134 
累计签到:655 天
连续签到:183 天
不二如是  楼主| 发表于 2017-4-1 09:24:39 | 显示全部楼层
疯样的篮子 发表于 2017-3-31 22:42
求问为什么我按操作做,用IE或者chrome打开,整个块长度变化


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

help.gif
最佳答案
0 
累计签到:7 天
连续签到:1 天
疯样的篮子 发表于 2017-4-1 17:50:13 | 显示全部楼层
不二如是 发表于 2017-4-1 09:24
建议发求助帖,方便把代码贴出话来

好像直接用你的代码问题就没有了~~~~~~~~监介......
最佳答案
0 
累计签到:89 天
连续签到:1 天
dreamdnj 发表于 2017-4-11 08:03:13 | 显示全部楼层
支持!!!!!!!!

评分

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

查看全部评分

最佳答案
134 
累计签到:655 天
连续签到:183 天
不二如是  楼主| 发表于 2017-4-11 09:46:29 | 显示全部楼层
dreamdnj 发表于 2017-4-11 08:03
支持!!!!!!!!

谢谢~
最佳答案
0 
累计签到:703 天
连续签到:1 天
aswyamato1989 发表于 2017-7-27 07:56:04 | 显示全部楼层
回复看帖
最佳答案
0 
累计签到:703 天
连续签到:1 天
aswyamato1989 发表于 2017-7-27 08:05:02 | 显示全部楼层
交作业!
056-02.jpg
056-01.jpg
最佳答案
0 
累计签到:19 天
连续签到:1 天
白白白zzz 发表于 2017-7-30 14:15:57 | 显示全部楼层
...真的丑  正式项目不可能用
最佳答案
0 
累计签到:617 天
连续签到:1 天
庚午 发表于 2018-1-24 20:59:18 | 显示全部楼层
最佳答案
0 
累计签到:2 天
连续签到:1 天
helingyuan 发表于 2018-2-20 11:31:20 | 显示全部楼层
支持学习了!
最佳答案
0 
累计签到:6 天
连续签到:1 天
高冷 发表于 2018-3-25 16:14:27 | 显示全部楼层
最佳答案
0 
累计签到:24 天
连续签到:1 天
嵊州第一帅 发表于 2018-5-11 13:40:04 From FishC Mobile | 显示全部楼层
学一下。。。。
最佳答案
0 
累计签到:27 天
连续签到:16 天
c调小白 发表于 5 天前 | 显示全部楼层
最佳答案
0 
累计签到:27 天
连续签到:16 天
c调小白 发表于 5 天前 | 显示全部楼层
:haver 是伪类选择器  ::after是伪元素选择器      
最佳答案
0 

尚未签到

大佬

发表回复

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

本版积分规则

关闭

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

    移动客户端下载(未启用)
    微信公众号

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

Copyright 2018 鱼C论坛 版权所有 All Rights Reserved.

Powered by Discuz! X3.1 Copyright
© 2001-2018 Comsenz Inc.    All Rights Reserved.

小黑屋|手机版|Archiver|鱼C工作室 ( 粤公网安备 44051102000370号 | 粤ICP备11014136号

GMT+8, 2018-5-20 19:46

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