0 0 5 7 - 为图标元素增加动画特效 0.0,Web密训营,Web开发,鱼C论坛

不二如是 发表于 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.8s4 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有啥不同么{:10_257:}

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

把字体也贡献出来吧{:10_266:}

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

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

字体咋献{:10_266:}

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

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

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

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

{:10_257:}

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

有好几种动作方式呢应该

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

{:10_279:}

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

{:7_146:}

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

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

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

只是太好玩了，不二大神可不要打我 {:10_266:} 朝您为目标努力
<!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

{:10_277:}

页: [1] 2

鱼C论坛's Archiver