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 日志相册贡献荣誉积分 62653 狗仔卡	发表于 2017-2-25 15:17:56 \| 显示全部楼层 \|阅读模式购买主题已有 15 人购买本主题需向作者支付 2 鱼币才能浏览本帖被以下淘专辑推荐: · HTML5 & CSS3 - 庖丁解牛\|主题: 205, 订阅: 38
	小甲鱼最新课程 -> https://ilovefishc.com
	回复使用道具举报置顶卡千斤顶显身卡

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

本帖被以下淘专辑推荐:

点评

点评

评分

浏览过的版块