|
马上注册,结交更多好友,享用更多功能^_^
您需要 登录 才可以下载或查看,没有账号?立即注册
x
本帖最后由 不二如是 于 2021-8-11 09:35 编辑
在57介绍了单图标的animation属性。
这对于含有100多个图标的svg文件,岂不是一种浪费!
这次我们展示多个图标动画特效!
从套路方面讲,没什么本质变化。
★通过@font-face加载字体文件。
★通过@keyframes设置动画效果。
★最后用animation展示
套路是一样,但玩法姿势却很新颖呦~
上次有鱼油问我,为什么不写font-family,就调用不了图标。
很简单,你在@font-face中,指定font-family名字为'FishC-icon';
- @font-face {
- font-family:'FishC-icon';
- src: url('font/icons.ttf'), url('font/icons.eot'), url('font/icons.woff'), url('font/icons.svg');
- }
复制代码
那么在伪元素中就要告诉脚本,劳资就用'FishC-icon'里的图标!
这次因为有多个动画对象,所以用延迟参数形成动画序列,先写5个div吧
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>图标元素2</title>
- <style type="text/css">
- @font-face {
- font-family:'FishC-icon';
- src: url('font/icons.ttf'), url('font/icons.eot'), url('font/icons.woff'), url('font/icons.svg');
- }
- .icon{
- display: inline-block;
- margin-right: 33px;
- }
- .android::before{
- content: "\e65f";
- font-size: 66px;
- font-family: 'FishC-icon';
- }
- .app::before{
- content: "\e660";
- font-size: 66px;
- font-family: 'FishC-icon';
- }
- .page::before{
- content: "\e64d";
- font-size: 66px;
- font-family: 'FishC-icon';
- }
- .show::before{
- content: "\e647";
- font-size: 66px;
- font-family: 'FishC-icon';
- }
- .victor::before{
- content: "\e648";
- font-size: 66px;
- font-family: 'FishC-icon';
- }
- </style>
- </head>
- <body>
- <div class="android icon">Android</div>
- <div class="app icon">Apple</div>
- <div class="page icon">Page</div>
- <div class="show icon">Show</div>
- <div class="victor icon">Victor</div>
- </body>
- </html>
复制代码
效果图:
此时由于没有隐藏文字,这是上一讲的点睛之笔,有兴趣自己去找。
但不同之处在于此处的图标都设置为“inline-block”,使之能够横向排列。
现在修改样式
- .icon{
- display: inline-block;
- cursor: help;
- width: 111px;
- height: 111px;
- font-size: 0px;
- line-height: 100px;
- border-radius: 50%;/*圆框*/
- background:#7FE;
- color: #000;
- text-align: center;
- animation:move 1s
- }
复制代码
效果图:
其他功能见57,重点为图标添加“animation”动画,方便后续添加动作。
例如,使图标位置向下偏移-100%。
然后在向上移动回到初始位置,此过程中让图标从完全透明化变为完全不透明。
- @keyframes move{
- from{
- opacity: 0;
- transform: translateY(100%);
- }
- to{
- opacity: 1;
- transform: translateY(0%);
- }
- }
复制代码
效果图:
利用transform属性的translateY方法来实现图标的向下偏移。
然后使用opacity属性设置图标的透明度,0.0 (完全透明)到 1.0(完全不透明)。
由于未设置单个图标的延迟,所以一下子5个同时出现。
既然提到了延迟,那就设置一下咯~
使用animation-delay属性设置延迟:
- .android{
- animation-delay: 0s;
- }
- .app{
- animation-delay: .3s;
- }
- .page{
- animation-delay: .6s;
- }
- .show{
- animation-delay: 1.2s;
- }
- .victor{
- animation-delay: 1.5s;
- }
复制代码
效果图:
光这么直棱棱也不好玩。
推荐一个在线可视化函数的网站,传送门
然后我们自己设置贝塞尔(cubic-bezier)速度曲线,达到不同速率节奏效果 ~
假设你穿越成功,会看到:
拖动粉点(起始点),蓝点(终点)即可以生成坐标。
生成的结果为cubic-bezier(.86,.15,.18,.9)。
- .icon{
- animation-fill-mode: both;
- animation: move 2s cubic-bezier(.86,.15,.18,.9);
- }
复制代码
效果图:
其中animation-fill-mode属性用来属性规定动画在播放之前或之后,其动画效果是否可见。。
设置完成后,防止图标闪现。
这位鱼油,如果喜欢本帖子,请订阅 专辑-->( 传送门)( 不喜欢更要订阅 )
官方 Web 课程:
|
评分
-
查看全部评分
|