您的位置：首页 > Web前端 > CSS

css3 实现动画效果

2016-11-28 16:56 447 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width:300px;
height:300px;
border:1px solid #ccc;
padding:20px;
position:relative;
margin:0 auto;
}
div img{
width:200px;
position:absolute;
left:50%;
top:50%;
-webkit-transform:translate3d(-50%,-50%,0);
transform:translate3d(-50%,-50%,0);
transition:all 0.5s ease-out;
}
div:hover img{
-webkit-animation:  re-banner-slide-80 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0s 1;
}
@-webkit-keyframes re-banner-slide-80{ 0%{opacity:0;-webkit-transform: translate3d(-50%, 20px, 0);}100%{ opacity:1;-webkit-transform: translate3d(-50%, -50%, 0);}}
</style>
</head>
<body>
<div >
<img src="https://img.alicdn.com/tps/TB1ARGlNVXXXXX0XXXXXXXXXXXX-1600-880.png" alt="">
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航