图片放大缩小闪烁效果

最新推荐文章于 2022-08-06 18:50:58 发布

詹小布

最新推荐文章于 2022-08-06 18:50:58 发布

阅读量352

点赞数

原文链接：http://www.cnblogs.com/pikachuworld/p/5754229.html

版权

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3 图片放大缩小闪烁效果</title>
<style></style>

}
@-webkit-keyframes flicker{
0%,100%{
-webkit-transform:scale(0.6);
-moz-transform:scale(0.6);
-o-transform:scale(0.6);
-ms-transform:scale(0.6);
transform:scale(0.6);
opacity:0.5
}
50%{
-webkit-transform:scale(1.0);
-moz-transform:scale(1.0);
-o-transform:scale(1.0);
-ms-transform:scale(1.0);
transform:scale(1.0);
opacity:1
}

}
@-moz-keyframes flicker{
0%,100%{
-moz-transform:scale(0.6);
-o-transform:scale(0.6);
-webkit-transform:scale(0.6);
-ms-transform:scale(0.6);
transform:scale(0.6);
opacity:0.5
}
50%{
-moz-transform:scale(1.0);
-o-transform:scale(1.0);
-webkit-transform:scale(1.0);
-ms-transform:scale(1.0);
transform:scale(1.0);
opacity:1
}

}
@-o-keyframes flicker{
0%,100%{
-o-transform:scale(0.6);
-moz-transform:scale(0.6);
-webkit-transform:scale(0.6);
-ms-transform:scale(0.6);
transform:scale(0.6);
opacity:0.5
}
50%{
-o-transform:scale(1.0);
-moz-transform:scale(1.0);
-webkit-transform:scale(1.0);
-ms-transform:scale(1.0);
transform:scale(1.0);
opacity:1
}

}
.flicker_down.trans{
-webkit-animation:flicker 2.0s infinite ease-in-out;
-moz-animation:flicker 2.0s infinite ease-in-out;
-o-animation:flicker 2.0s infinite ease-in-out;
animation:flicker 2.0s infinite ease-in-out
}
.flicker_down.arrow{
animation-delay:-2.0s;
-webkit-animation-delay:-2.0s;
-moz-animation-delay:-2.0s;
-o-animation-delay:-2.0s
}

.title{
position: fixed;
bottom: 40px;
color: #FFF;
left: 50%;
margin-left: -14px;

}
.test{
display:block;
width:100px;height:100px;
background:url("images/last.png");
}
</style>
</head>
<body>
<div>
<a href="" class="test"></a>
<a class="flicker_down arrow trans" href="" οnclick="return false;" hidefocus=""></a>

</div>
</body>
</html>

转载于:https://www.cnblogs.com/pikachuworld/p/5754229.html