CSS3动画闪跳

Alloy Team首页的元素Hover效果

效果预览

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


		.box2{
			margin-top: 20px;
			width: 265px;
			height: 200px;
			border-radius: 5px;
			background-color: #89d04f!important;
			position: relative;
		    padding: 20px 10px;
		    color: #fff;
		    -webkit-transition: all .3s ease;
		    transition: all .3s ease;
		    overflow: hidden;
		}
		.box2:hover{
		    transform: translateY(-6px);
		    -webkit-transform: translateY(-6px);
		    -moz-transform: translateY(-6px);
		    box-shadow: 0 26px 40px -24px rgba(0,36,100,.5);
		    -webkit-box-shadow: 0 26px 40px -24px rgba(0,36,100,.5);
		    -moz-box-shadow: 0 26px 40px -24px rgba(0,36,100,.5);
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="line"></div>
	</div>

	<div class="box box2">
		<div class="line"></div>
	</div>
</body>
</html>

　

CSS3七彩文字

效果预览

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		body{
			background-color: #333;
		}

		@media (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
		    .text{
		        background-image: -webkit-linear-gradient(left,#cddc39,#ff9800 25%,#cddc39 50%,#ff9800 75%,#cddc39)!important;
		        -webkit-text-fill-color: transparent!important;
		        -webkit-background-clip: text!important;
		        -webkit-background-size: 200% 100%!important;
		        -webkit-animation: masked-animation 2s infinite linear!important;
		    }

		    .text:hover {
		        color: #f2b535;
    			background: none;
		    }
		}
		.text:hover{
			-webkit-animation: masked-animation 1s infinite linear!important;
		}
		@-webkit-keyframes masked-animation {
		    0% {
		        background-position: 0 0
		    }

		    to {
		        background-position: -100% 0
		    }
		}
	</style>
</head>
<body>
	<div><a href="" class="text">勇士是冠军</a></div>
	<div><span class="text">勇士是冠军</span></div>
	<div><span class="text">勇士是冠军</span></div>

</body>
</html>

　　

posted @ 2017-05-30 13:49  停不下的风  阅读(445)  评论(0)    收藏  举报