首页 > 代码库 > CSS3动画闪跳

CSS3动画闪跳

效果预览

技术分享

 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{
			width: 100%;
			height: 200px;
			background-color: #1BBBC3;
			position: relative;
		}
		.box .line{
			cursor: pointer;
		    position: absolute;
		    left: -100%;
		    top: 0;
		    width: 100%;
		    height: 100%;
		    background-image: -webkit-linear-gradient(0deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.5),hsla(0,0%,100%,0));
		    transform: skewx(-25deg);
		    -o-transform: skewx(-25deg);
		    -moz-transform: skewx(-25deg);
		    -webkit-transform: skewx(-25deg)
		}
		.box:hover .line{
			-webkit-transition: all .5s ease;
		    transition: all .5s ease;
		    left: 100%
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="line"></div>
	</div>
</body>
</html>

  

CSS3动画闪跳