马上注册,结交更多好友,享用更多功能^_^
您需要 登录 才可以下载或查看,没有账号?立即注册
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 课程:
|