<!DOCTYPE html>
<html>
<head lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>放大缩小</title>
<style>
.muted{width: 100%;height: 100%;}
.muted .muted_m{display:block;width: 100px; height: 100px; margin: 100px auto 0 auto; background: url("../../prompt-icon.png") no-repeat; }
.muted .muted_m{
animation: muted-zoom 2s;
-webkit-animation: muted-zoom 2s;
animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
}
@keyframes muted-zoom {
from {
transform: scale(0);
opacity:0;
}
to {
transform: scale(1);
opacity:1;
}
}
</style>
</head>
<body>
<div class="muted">
<div class="muted_m"> </div>
</div>
</body>
</html>
css3 scale实现放大缩小
最新推荐文章于 2024-07-24 21:48:20 发布