一款从左边快速滑出的的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>
评论列表 :共有5人吐槽, 5111人围观