七彩工具箱源码(转载至现实君)

玩机笔技 · 发表于 2018-12-26 12:05:57

本帖最后由李敬恩于 2018-12-26 12:49 编辑

效果图如下

点我查看效果
源码如下

<!doctype html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>scale动画demo</title>
<style>
*{
margin:0;
padding:0;
}
body{
padding:0 10px 0 10px;
overflow-x:hidden;
}
.items li {
position:relative;
float:left;
width:100%;
text-align: center;
margin-top:10px;
border-radius:3px;
list-style-type:none; /*去除li项目符号*/
-webkit-transform:scale(0); /*缩放动画*/
-webkit-animation-name:janim; /*动画名称*/
-webkit-animation-duration:.3s; /*定义动画完成一个周期所需要的时间*/
-webkit-animation-timing-function:linear; /* 规定动画的速度曲线*/
-webkit-animation-iteration-count:1; /*定义动画的播放次数*/
-webkit-animation-direction:normal; /*定义是否应该轮流反向播放动画*/
-webkit-animation-fill-mode:forwards; /*规定动画在播放之前或之后，其动画效果是否可见*/
}
@-webkit-keyframes janim {
0%{
-webkit-transform:scale(0.2) /* X.Y 轴*/
}
50%{
-webkit-transform:scale(1.2)
}
100%{
-webkit-transform:scale(1)}
}
.items li a{
display:block;
width:100%;
line-height:80px; /*可以利用上下边距调整方块高度*/
color:#FFF;
font-size:30px;
text-decoration:none; /*去下划线*/
}
.items li a:hover{
background-color:rgba(0,0,0,.1);
z-index:1;
color:#FFF;
}
/*定义一个方块样式*/
.items li.one{
background-color:#EE4A4A; /*这个方块的颜色*/
-webkit-animation-delay: 0.55s; /*定义动画何时开始*/
}
.items li.two{
background-color:#FBA554; /*这个方块的颜色*/
-webkit-animation-delay: 0.25s; /*定义动画何时开始*/
}
.items li.three{
background-color:#6FE530; /*这个方块的颜色*/
-webkit-animation-delay: 0.75s; /*定义动画何时开始*/
}
.items li.four{
background-color:#49D8B3; /*这个方块的颜色*/
-webkit-animation-delay: 0.95s; /*定义动画何时开始*/
}
.items li.five{
background-color:#5199E5; /*这个方块的颜色*/
-webkit-animation-delay: 0.45s; /*定义动画何时开始*/
}
</style>
</head>
<body>
<ul class="items">
<li class="one"><a href="#">文字1</a></li>
<li class="two"><a href="#">文字2</a></li>
<li class="three"><a href="#">文字3</a></li>
<li class="four"><a href="#">文字4</a></li>
<li class="five"><a href="#">文字5</a></li>
</ul>
</body>

复制代码

冬至 · 发表于 2018-12-26 12:10:01

这是html吗

爱上会飞的鱼 · 发表于 2018-12-26 12:10:10

论坛里的一股清流

玩机笔技 · 发表于 2018-12-26 12:27:05

唯爱年华666 发表于 2018-12-26 12:10
这是html吗

是的，HTML

玩机笔技 · 发表于 2018-12-26 12:31:16

爱上会飞的鱼发表于 2018-12-26 12:10
论坛里的一股清流

哈哈。。。

wzqdaren · 发表于 2018-12-26 12:45:31

现实君作者？？？

玩机笔技 · 发表于 2018-12-26 12:50:15

wzqdaren 发表于 2018-12-26 12:45
现实君作者？？？

对的，挺厉害的一个了人

userr · 发表于 2018-12-26 12:55:11

学习学习

喵喵猫 · 发表于 2018-12-26 13:25:43

厉害厉害

luxiaole · 发表于 2018-12-26 16:29:36

感谢分享

jinghexi · 发表于 2020-1-29 08:16:26

挺厉害的

绿袍童生 · 发表于 2020-10-26 21:14:41

看看看看

qclqcl1234 · 发表于 2020-12-21 18:11:44

厉害厉害

mrl2008 · 发表于 2021-3-19 09:38:51

感谢分享

eflys666 · 发表于 2021-3-19 15:05:05

感谢论坛，感谢LZ热心分享！先下载看看好不好用！

七彩工具箱源码(转载至现实君)

本帖子中包含更多资源

发表回复

浏览过的版块

MT论坛帅哥

MT论坛最佳新人

2019-5.1节快乐

考神

MT论坛灌水老大

MT论坛活跃会员

MT论坛新人

MT论坛侠客

挂机大佬