css动效

css3下拉动效
今儿，接到了一个项目是关于动效这块儿，当时还在纠结需要什么方法来写更快更兼容简便,后在网上找了很多资料,都是基于css+js或者jq引库。后来想了想有更简便的方法就是css3过渡动画及变形动画,这需要对动画有一定的了解.

方法如下

	采用transition：transform方法更完善一点的话配合@keyframs来进行相互配合

html骨架

	<div>
		<input type="checkbox" id="checkbox">
		<label for="checkbox">
			<div class="head"></div>
			<ul>
				<li>java</li>
				<li>c++</li>
				<li>javscript</li>
				<li>孤儿亚索</li>
			</ul>
		<labei>
	</div>

接下来便是这次的重点

css样式

	*{
		margin:0;
		padding:0;
	}
	
	div{
		animation-name:tranY;//名字，方便运动轨迹时使用
		animation-duration:2s;//延迟时间为两秒	
	}

	div>ul>li{
		list-style:none;//去掉所有li的样式
		color:white;
		padding: 20px;//这是内盒顶出
		line-height:40px;
		transition:box-shadow 0.4s,text-indent:0.2s;//让li标签有微小的左右运动；
		
	}
	div>input{
		display:none;
	}
	
	div>label{
		float:left;//往左边浮动
		height:40px;//这是它的高度
	}

	div>label>head{//这是css箭头
		width:5px;
		height:5px;
		border-top:2px solid white;
		border-right:2px solid white;
		top:6px;
		right:2px;
		transform:rotate(45deg);//转角45度进行对齐
		position:relative;//相对定位
		float:right;//向右浮动
	}

	@keyframes tranY{//导航有一丝从上掉下来的效果
		0%{
			transfrom:tranlateY(-2%);
		},
		100%{
			transfrom:tranlateY(0);
		},
		to{}
	

	还望指出有什么不对的地方,这是一部分,更深层的炫酷特效正在研究中

该方法,参考网上一些资料再结合所需项目进行的一些改进。还望海涵,希望能一一指出不足之处。

希望能帮助大家,文章有不足的地方还请各位童靴(大佬)指导指导

记录美好
记录成长的每一天,有什么不对的地方还请指出来,坚信做自己喜欢的事情,人生短短不过百年为自己喜欢的事情一直做下去无论前方的路多么艰辛,相信自己,上帝关了一扇门,开启一扇窗,愿童靴们一直发光下去！！！

很喜欢的一句话
不要让未来的你,讨厌现在的自己！共勉