0 0 5 7 - 为图标元素增加动画特效 0.0

不二如是 · 发表于 2017-2-25 15:17:56

购买主题 已有 15 人购买 本主题需向作者支付 2 鱼币 才能浏览

shishunfu · 发表于 2017-5-8 11:35:42

交作业

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>图标元素</title>
        <style type="text/css">
                @font-face {
                        font-family: 'flat-ui-pro-icons';
                        src: url('fonts/icons.ttf'), url('fonts/icons.eot'), url('fonts/icons.woff'), url('fonts/icons.svg');
                }
                .icon::before{
                        content: "\e65f";
                        font-family: 'flat-ui-pro-icons';
                        font-size: 66px;
                        display: block;
                }
                .icon{
                        font-size: 0;                /*通过font-size为0px，隐藏文字，这是一个很实用的小技巧。*/
                        cursor: pointer;        /*cursor 属性规定要显示的光标的类型（形状）。
                                                                        该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状;
                                                                         pointer        光标呈现为指示链接的指针（一只手）*/
                        display: block;
                        width: 111px;
                        height: 111px;
                        line-height: 111px;
                        border-radius: 50%;
                        background-color: #000;
                        color:#00DD00;
                        text-align: center;
                }
                /*.icon:hover::before{
                        transform: rotate(360deg);
                        transition: transform 1s linear;
                }*/

                @keyframes Animation{
                        from{
                                transform: rotate(0deg);
                        }
                        to{
                                transform: rotate(360deg);
                        }
                }
                .icon:hover::before{
                        animation:Animation 1s linear 0.8s  4 alternate;        
                        /*animation 属性是一个简写属性，用于设置六个动画属性：
                                animation-name                                规定需要绑定到选择器的 keyframe 名称。。
                                animation-duration                        规定完成动画所花费的时间，以秒或毫秒计。
                                animation-timing-function        规定动画的速度曲线。
                                animation-delay                                规定在动画开始之前的延迟。
                                animation-iteration-count        规定动画应该播放的次数。
                                animation-direction                        规定是否应该轮流反向播放动画。
                                请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。
                        */
                }
        </style>
</head>
<body>
        <div class="icon">icon</div>
</body>
</html>

aswyamato1989 · 发表于 2017-7-28 01:36:00

交作业！

dreamdnj · 发表于 2017-4-11 16:48:30

外部字体库后缀未.ICON 可以用么，与.svg有啥不同么

shishunfu · 发表于 2017-5-4 16:04:24

把字体也贡献出来吧

不二如是 · 发表于 2017-5-4 21:37:41

shishunfu 发表于 2017-5-4 16:04
把字体也贡献出来吧

字体咋献

shishunfu · 发表于 2017-5-5 08:55:23

不二如是发表于 2017-5-4 21:37
字体咋献

你不是放到font文件夹了吗？打包发过来吧，没有字体特效看着难受

q8807582 · 发表于 2017-5-5 15:14:24

alltolove · 发表于 2017-5-5 15:19:32

有好几种动作方式呢应该

sunbocheng · 发表于 2017-5-25 23:17:09

aswyamato1989 · 发表于 2017-7-27 08:08:03

回复看帖

隨鈊乄鎍慾 · 发表于 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>

601900987 · 发表于 2018-7-6 23:43:48

为图标元素增加动画特效

floride · 发表于 2018-8-8 19:01:56

莫希 · 发表于 2019-1-12 20:54:02

RE: 0 0 5 7 - 为图标元素增加动画特效 0.0 [修改]

你在意在便在 · 发表于 2019-11-4 22:25:36

只是太好玩了，不二大神可不要打我

朝您为目标努力

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我要旋转不二如是</title>
<style type="text/css">
        .no-2 {
                width: 249px;
                height: 217px;
                background: url('no-2.png');
                font-size: 0px;  /* 隐藏文字方法之一 */
                position: absolute;
                top: 20%;
                left: 20%;
                cursor: pointer;
        }
         /* 自定义关键帧 */
        @keyframes no-2{
                from {
                        transform: rotate(0deg);
                         /* deg 旋转度数 */
                }
                to {
                        transform: rotate(360deg);
                }
         }
         .no-2:hover{
                 animation:no-2 2s linear infinite;
        /*         Animation 动画
                1.name 选择器名称
                2.Duration  完成动画时间 （s）
                3.Function 动画速度 （s）
                4.Delay 动画延迟时间 （s）
                5.Count 播放次数     (n)    infinite 一直重复播放
                6.Direction 是否反向播放    alternate 反向播放 normal默认值  */
         }
</style> 

</head>
<body>
    <p></p>
    <div class="no-2">不二大神</div>
</body>
</html>

suweixuan1998 · 发表于 2020-1-10 23:49:40

<!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: 111px;
            cursor: pointer;
            display: block;
            width: 111px;
            height: 111px;
            line-height: 111px;
            border-radius: 50%;
            background: #000000;
            color: #6FF;
            text-align: center;
        }
        .icon::before{
            content: "\e65f";
            font-family: 'FishC-icon';
            font-size: 66px;
            display: block;

        }
        @keyframes fun{
            from{
                transform: rotate(0deg);
            }
            to{
                transform: rotate(360deg);
            }
        }
        .icon:hover::before{
            animation:fun 1s linear infinite;
        }

    </style>
</head>
<body>
    <div class="icon"></div>
</body>
</html>

weiter · 发表于 2020-2-26 22:16:42

谢谢大佬

小白撞大牛 · 发表于 2020-4-12 12:50:53

看看

tianyuan · 发表于 2020-5-30 23:54:56

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

不二如是不二如是当前离线 UID 378930 日志相册贡献荣誉积分 58337 狗仔卡	发表于 2017-2-25 15:17:56 \| 显示全部楼层 \|阅读模式购买主题已有 15 人购买本主题需向作者支付 2 鱼币才能浏览本帖被以下淘专辑推荐: · HTML5 & CSS3 - 庖丁解牛\|主题: 205, 订阅: 37
	想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
	回复使用道具举报置顶卡千斤顶显身卡

[庖丁解牛] 0 0 5 7 - 为图标元素增加动画特效 0.0

本帖被以下淘专辑推荐:

点评

点评

评分