/ 01 /

概述

效果：鼠标hover在图片上出现图片弹动效果

关键代码：

<style>
	@keyframes jello {
		from,11.1%,to {
			-webkit-transform: none;
			transform: none;
		}

		22.2% {
			-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
			transform: skewX(-12.5deg) skewY(-12.5deg);
		}

		33.3% {
			-webkit-transform: skewX(6.25deg) skewY(6.25deg);
			transform: skewX(6.25deg) skewY(6.25deg);
		}

		44.4% {
			-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
			transform: skewX(-3.125deg) skewY(-3.125deg);
		}

		55.5% {
			-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
			transform: skewX(1.5625deg) skewY(1.5625deg);
		}

		66.6% {
			-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
			transform: skewX(-0.78125deg) skewY(-0.78125deg);
		}

		77.7% {
			-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
			transform: skewX(0.390625deg) skewY(0.390625deg);
		}

		88.8% {
			-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
			transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
		}
	}

	.huyouduang {
		-webkit-transition: all 0.5s;
		-moz-transition: all 0.5s;
		-o-transition: all 0.5s;
		transition: all 0.5s;
		position: relative;
	}

	.huyouduang:hover {
		-webkit-animation-name: jello;
		animation-name: jello;
		-webkit-animation-duration: 1s;
		animation-duration: 1s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
	}
	
	.huyoulogo{float:left;width:314px;margin-top:3px;}
</style>

/ 02 /

图摘

/ 03 /

下载

获取下载地址请关注 youtiyblog 微信公众号，回复 弹弹弹 即可获得百度云下载地址

/ 04 /

推荐

《dw个人网页模板作业成品》

《个人主页模板》

《个人网站模板》

《个人博客模板下载》