鱼C论坛

 找回密码
 立即注册
查看: 2045|回复: 19

[系列教程] 0 0 5 7 - 为图标元素增加动画特效 0.0

[复制链接]
最佳答案
466 
发表于 2017-2-25 15:17:56 | 显示全部楼层 |阅读模式
购买主题 已有 9 人购买  本主题需向作者支付 2 鱼币 才能浏览

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2017-5-8 11:35:42 | 显示全部楼层
交作业
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>图标元素</title>
  6.         <style type="text/css">
  7.                 @font-face {
  8.                         font-family: 'flat-ui-pro-icons';
  9.                         src: url('fonts/icons.ttf'), url('fonts/icons.eot'), url('fonts/icons.woff'), url('fonts/icons.svg');
  10.                 }
  11.                 .icon::before{
  12.                         content: "\e65f";
  13.                         font-family: 'flat-ui-pro-icons';
  14.                         font-size: 66px;
  15.                         display: block;
  16.                 }
  17.                 .icon{
  18.                         font-size: 0;                /*通过font-size为0px,隐藏文字,这是一个很实用的小技巧。*/
  19.                         cursor: pointer;        /*cursor 属性规定要显示的光标的类型(形状)。
  20.                                                                         该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状;
  21.                                                                          pointer        光标呈现为指示链接的指针(一只手)*/
  22.                         display: block;
  23.                         width: 111px;
  24.                         height: 111px;
  25.                         line-height: 111px;
  26.                         border-radius: 50%;
  27.                         background-color: #000;
  28.                         color:#00DD00;
  29.                         text-align: center;
  30.                 }
  31.                 /*.icon:hover::before{
  32.                         transform: rotate(360deg);
  33.                         transition: transform 1s linear;
  34.                 }*/

  35.                 @keyframes Animation{
  36.                         from{
  37.                                 transform: rotate(0deg);
  38.                         }
  39.                         to{
  40.                                 transform: rotate(360deg);
  41.                         }
  42.                 }
  43.                 .icon:hover::before{
  44.                         animation:Animation 1s linear 0.8s  4 alternate;       
  45.                         /*animation 属性是一个简写属性,用于设置六个动画属性:
  46.                                 animation-name                                规定需要绑定到选择器的 keyframe 名称。。
  47.                                 animation-duration                        规定完成动画所花费的时间,以秒或毫秒计。
  48.                                 animation-timing-function        规定动画的速度曲线。
  49.                                 animation-delay                                规定在动画开始之前的延迟。
  50.                                 animation-iteration-count        规定动画应该播放的次数。
  51.                                 animation-direction                        规定是否应该轮流反向播放动画。
  52.                                 请始终规定 animation-duration 属性,否则时长为 0,就不会播放动画了。
  53.                         */
  54.                 }
  55.         </style>
  56. </head>
  57. <body>
  58.         <div class="icon">icon</div>
  59. </body>
  60. </html>
复制代码
0045图标元素.png

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2017-5-8 13:46
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2017-7-28 01:36:00 | 显示全部楼层
交作业!

057.jpg

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2017-7-28 08:24

评分

参与人数 1鱼币 +6 收起 理由
不二如是 + 6 支持楼主!

查看全部评分

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2017-4-11 16:48:30 | 显示全部楼层
外部字体库后缀未.ICON 可以用么,与.svg有啥不同么
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2017-5-4 16:04:24 | 显示全部楼层
把字体也贡献出来吧
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
466 
 楼主| 发表于 2017-5-4 21:37:41 | 显示全部楼层
shishunfu 发表于 2017-5-4 16:04
把字体也贡献出来吧


字体咋献
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2017-5-5 08:55:23 | 显示全部楼层

你不是放到font文件夹了吗? 打包发过来吧,没有字体特效看着难受
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2017-5-5 15:14:24 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
65 
发表于 2017-5-5 15:19:32 From FishC Mobile | 显示全部楼层
有好几种动作方式呢应该
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2017-5-25 23:17:09 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2017-7-27 08:08:03 | 显示全部楼层
回复看帖
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
3 
发表于 2018-6-27 19:18:37 | 显示全部楼层
交作业:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图标元素</title>
    <style type="text/css">
        @font-face {
            font-family: 'FishC-icon';
            src: url('fonts/icons.ttf'), url('fonts/icons.eot'), url('fonts/icons.woff'), url('fonts/icons.svg');
        }

        .icon{
            font-size: 0px;
            cursor: pointer;
            display: block;
            width: 111px;
            height: 111px;
            line-height: 111px;
            border-radius: 50%;
            background: #000;
            color:#6FF;
            text-align: center;

        }
        .icon::before{
            content: "\e65f";
            font-family: 'FishC-icon';
            font-size: 66px;
            display: block;
        }
        /*只旋转一次的写法
        .icon:hover::before{
            transform:rotate(360deg);
            transition:transform 1s linear;
        }*/
        /*下面是旋转多次的写法*/
        @keyframes fun{
            from{
                transform:rotate(0deg);
            }
            to{
                transform:rotate(360deg);
            }
        }
        .icon:hover::before{
            /*animation:fun 3s linear 0s 3 alternate;旋转次数、延迟时间、方向旋转。*/
            animation:fun 1s linear infinite;/*第一个参数是动画名称,第二个参数是动画时长,第三个参数是速度曲线。*/
        }
    </style>
</head>
<body>
<div class="icon">icon</div>
</body>
</html>

  1. 57.gif
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2018-7-6 23:43:48 From FishC Mobile | 显示全部楼层
为图标元素增加动画特效
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
1 
发表于 2018-8-8 19:01:56 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
2 
发表于 2019-1-12 20:54:02 | 显示全部楼层
RE: 0 0 5 7 - 为图标元素增加动画特效 0.0 [修改]
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2019-11-4 22:25:36 | 显示全部楼层
只是太好玩了,不二大神可不要打我 朝您为目标努力
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>我要旋转不二如是</title>
  6. <style type="text/css">
  7.         .no-2 {
  8.                 width: 249px;
  9.                 height: 217px;
  10.                 background: url('no-2.png');
  11.                 font-size: 0px;  /* 隐藏文字方法之一 */
  12.                 position: absolute;
  13.                 top: 20%;
  14.                 left: 20%;
  15.                 cursor: pointer;
  16.         }
  17.          /* 自定义关键帧 */
  18.         @keyframes no-2{
  19.                 from {
  20.                         transform: rotate(0deg);
  21.                          /* deg 旋转度数 */
  22.                 }
  23.                 to {
  24.                         transform: rotate(360deg);
  25.                 }
  26.          }
  27.          .no-2:hover{
  28.                  animation:no-2 2s linear infinite;
  29.         /*         Animation 动画
  30.                 1.name 选择器名称
  31.                 2.Duration  完成动画时间 (s)
  32.                 3.Function 动画速度 (s)
  33.                 4.Delay 动画延迟时间 (s)
  34.                 5.Count 播放次数     (n)    infinite 一直重复播放
  35.                 6.Direction 是否反向播放    alternate 反向播放 normal默认值  */
  36.          }
  37. </style>

  38. </head>
  39. <body>
  40.     <p></p>
  41.     <div class="no-2">不二大神</div>
  42. </body>
  43. </html>
复制代码
不二.png
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
1 
发表于 2020-1-10 23:49:40 | 显示全部楼层
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>图标元素</title>
  6.     <style type="text/css">
  7.         @font-face {
  8.             font-family: 'FishC-icon';
  9.             src: url('fonts/icons.ttf'), url('fonts/icons.eot'), url('fonts/icons.woff'), url('fonts/icons.svg');
  10.         }
  11.         .icon{
  12.             font-size: 111px;
  13.             cursor: pointer;
  14.             display: block;
  15.             width: 111px;
  16.             height: 111px;
  17.             line-height: 111px;
  18.             border-radius: 50%;
  19.             background: #000000;
  20.             color: #6FF;
  21.             text-align: center;
  22.         }
  23.         .icon::before{
  24.             content: "\e65f";
  25.             font-family: 'FishC-icon';
  26.             font-size: 66px;
  27.             display: block;

  28.         }
  29.         @keyframes fun{
  30.             from{
  31.                 transform: rotate(0deg);
  32.             }
  33.             to{
  34.                 transform: rotate(360deg);
  35.             }
  36.         }
  37.         .icon:hover::before{
  38.             animation:fun 1s linear infinite;
  39.         }

  40.     </style>
  41. </head>
  42. <body>
  43.     <div class="icon"></div>
  44. </body>
  45. </html>
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
2 
发表于 昨天 22:16 | 显示全部楼层
谢谢大佬
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

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

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

GMT+8, 2020-2-27 13:33

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

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