登录

一款从左边快速滑出的的css动画

一款从左边快速滑出的的css动画,代码炒鸡简单,牛逼网站的不二之选哈,请用谷歌,火狐等主流浏览器浏览,拒绝使用ie9以下版本的ie浏览器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>从左边快速滑出-柏平</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<style>
.main{ overflow: hidden;}
.slideleftfast{
	text-align: center;
	width: 300px;
	height: 300px;
	line-height: 300px;
	margin:0 auto;
	background: red;
	border-radius:10px;
	animation-name: slideleftfast;
	-webkit-animation-name: slideleftfast;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;		

	visibility: visible !important;	

}

@keyframes slideleftfast {
	0% {
		transform: translateX(150%);
	}
	50%{
		transform: translateX(-8%);
	}
	65%{
		transform: translateX(4%);
	}
	80%{
		transform: translateX(-4%);
	}
	95%{
		transform: translateX(2%);
	}			
	100% {
		transform: translateX(0%);
	}
}

@-webkit-keyframes slideleftfast {
	0% {
		-webkit-transform: translateX(150%);
	}
	50%{
		-webkit-transform: translateX(-8%);
	}
	65%{
		-webkit-transform: translateX(4%);
	}
	80%{
		-webkit-transform: translateX(-4%);
	}
	95%{
		-webkit-transform: translateX(2%);
	}			
	100% {
		-webkit-transform: translateX(0%);
	}
}
</style>
<body>
<div class="main">
<div id="obj" class="slideleftfast"><span style="font-size: 32px"><a href="https://www.zbpnice.cn">柏平博客</a></span></div>
</div>
</body>
</html>


选择赏赐方式:

×

多少都是心意,感谢大家

选择分享方式:

×

扫一扫分享到微信朋友圈

本文标题:一款从左边快速滑出的的css动画

本文地址:https://www.zbpnice.cn/post/128.html

温馨提示:文章内容系作者个人观点,不代表柏平博客对观点赞同或支持。

版权声明: 本文为原创文章,创建于2年前 (2017-08-21),版权归 柏平 所有,欢迎分享本文,转载请保留出处!

评论列表 :共有4人吐槽, 987人围观

mr博客
mr博客  2年前 (2017-08-23)  板凳回复
Mr博客来访
柏平
柏平  2年前 (2017-08-23) 1层回复
@mr博客 欢迎欢迎[F]redface[/F]
像素狸猫
像素狸猫  2年前 (2017-08-22)  沙发回复
网站好棒^_^
柏平
柏平  2年前 (2017-08-23) 1层回复
@像素狸猫 谢谢[F]redface[/F]

发表评论: