现实君工具箱(源码)

见过七彩的彩虹..红、橙、黄、绿、蓝、靛、紫..色彩艳丽…
七彩的工具箱..红、橙、黄、绿、蓝、靛、紫..亮瞎双眼…

 

…我编不下去了…

 

最近有挺多朋友进到我的工具箱..都被它的七彩吸引… 😆

又觉得进入动画还行…

 

所以…

分享出来了…

 


先看效果

主页(似不似很卡通…)

 

分页面(以一个为例..)

 

动画效果

 

 

具体效果前往工具箱look…

 

里面的弹动效果主要是scale缩放动画实现的..

这是其中实现动画的例子..

应该都能看懂..

<!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>

点我查看效果

 


工具箱演示:

tool.uixsj.cn


 

 

这只是个工具箱导航页面..

里面的一些程序..因为没有经过作者同意..所以不好分享..

有兴趣的可以F12学习…

 

下载信息

  • 名称:tools
  • 格式:zip/html
  • 版本:1.0
  • 大小:24kb

点击下载

10 条评论

发表评论

*