0 0 5 6 - 按钮‘最强’动画特效 2.0

不二如是 · 发表于 2017-2-23 11:21:11

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

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

x

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

54初步看到了transition的趣味。

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

那么本帖顺理成章，就要：

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

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

在55源码基础上优化

55.zip (585 Bytes, 下载次数: 61, 售价: 2 鱼币)

先设置左侧内边距，另按钮中文字，偏右。

因为改变内容，所以需要加宽按钮，防止文字分行。

设置按钮position属性为relative，方便后续内部添加绝对定位的元素。

／*其他代码略*／
width:600px;
box-sizing: border-box;
padding-left: 160px;
position: relative;

复制代码

效果图：

现在文字就整体偏右了，这样做我们就可以在左边加点有趣的东西了。

我们使用after伪元素创建一个图标。

定位方式采用绝对定位在按钮右侧。

为了演示，这次从外部导入，一个字体。

将字体格式，放在目录下：

添加调用码：

@font-face {
font-family: 'icon-font';
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');
}

复制代码

稍微偷了点懒，直接将字体放在目录下，正常开发，应该统一放在文件夹中。

然后调用的时候，在路径中添加文件名font/xxxx.xxx

你如果你对这几个后缀名好奇，请点这里

代码：

a::after{
font-family:'icon-font';
content: '\e607';
position: absolute;
right: 85%;
transition: all .8s;
}

复制代码

效果图：

正常开发中，经常通过外部调用flat-UI图标字体，提升效果。

图标搞定后，光秃秃的也不好玩，让他可以滑动摩擦。

a:hover{
color:#00AA00;
background:#555555;
padding-left: 20px;
background: rgba(0,0,0,.6);
}
a:hover::after{
right: 6%;
}

复制代码

效果图：

设置鼠标滑过按钮时，左侧内边距缩小，这样字体部分就会往左跑。

背景色用60%透明度，提升体验。

最后为鼠标指针滑动下after伪元素设置新的属性。

向右移动，并停止在右边整体宽度6%的位置。

注意伪元素的hover写法：

游客，如果您要查看本帖隐藏内容请回复

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

）

官方 Web 课程：

https://www.bilibili.com/video/BV1QW411N762

shishunfu · 发表于 2017-5-4 16:00:55

不想安装字体，图标点显示出来一个框框

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接动画演示</title>
<style type="text/css">
body{
margin-top: 333px;
margin-left: 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;
height: 66px;
border: 1px solid #FF0088;
line-height: 66px;
border-radius: 6px;
width:600px;
box-sizing: border-box;
padding-left: 160px;
position: relative;
}
a:hover{
color:#00AA00;
background:#555555;
padding-left: 20px;
background: rgba(0,0,0,.6);
/*
设置鼠标滑过按钮时，左侧内边距缩小，这样字体部分就会往左跑。
背景色用60%透明度，提升体验。
*/
}
a:hover::after{
right: 6%;
/*
最后为鼠标指针滑动下after伪元素设置新的属性。
向右移动，并停止在右边整体宽度6%的位置。
*/
}
@font-face {
font-family: 'icon-font';
/*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');*/
}
a::after{
/*font-family:'icon-font';*/
content: '\e607';
position: absolute;
right: 85%;
transition: all .8s;
}
</style>
</head>
<body>
<a href="http://bbs.fishc.com/forum.php?mod=collection&action=view&ctid=539">HTML5-庖丁解牛</a>
</body>
</html>

复制代码

a540656809 · 发表于 2017-3-7 00:03:44

编程还是设计师？

163areocraft · 发表于 2017-3-7 17:30:47

Xman · 发表于 2017-3-28 14:46:54

疯样的篮子 · 发表于 2017-3-31 22:42:33

求问为什么我按操作做，用IE或者chrome打开，整个块长度变化

不二如是 · 发表于 2017-4-1 09:24:39

疯样的篮子发表于 2017-3-31 22:42
求问为什么我按操作做，用IE或者chrome打开，整个块长度变化

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

疯样的篮子 · 发表于 2017-4-1 17:50:13

不二如是发表于 2017-4-1 09:24
建议发求助帖，方便把代码贴出话来

好像直接用你的代码问题就没有了~~~~~~~~监介......

dreamdnj · 发表于 2017-4-11 08:03:13

支持！！！！！！！！

不二如是 · 发表于 2017-4-11 09:46:29

dreamdnj 发表于 2017-4-11 08:03
支持！！！！！！！！

谢谢～

aswyamato1989 · 发表于 2017-7-27 07:56:04

回复看帖

aswyamato1989 · 发表于 2017-7-27 08:05:02

交作业！

白白白zzz · 发表于 2017-7-30 14:15:57

...真的丑正式项目不可能用

庚午 · 发表于 2018-1-24 20:59:18

helingyuan · 发表于 2018-2-20 11:31:20

支持学习了！

高冷 · 发表于 2018-3-25 16:14:27

嵊州第一帅 · 发表于 2018-5-11 13:40:04

学一下。。。。

c调小白 · 发表于 2018-5-15 21:05:18

c调小白 · 发表于 2018-5-15 21:07:43

：haver 是伪类选择器：：after是伪元素选择器

谁将新樽盛旧月 · 发表于 2018-5-17 23:07:44

大佬

账号		自动登录	找回密码
密码			立即注册

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

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

评分

本帖被以下淘专辑推荐:

点评

评分

评分

浏览过的版块