transition和animation动画
1.transition动画
<style>
#box{
width: 475px;
height: 308px;
border: 5px solid red;
margin: 100px auto 0;
overflow: hidden;
}
#box>img{
width: 100%;
height: 100%;
transition: transform .5s;
}
#box>img:hover{
transform: scale(1.2);
}
</style>
</head>
<body>
<div id="box">
<img src="http://cms-bucket.ws.126.net/2021/1109/7b1dda4ej00r2aacp003oc000d7008sc.jpg" alt="">
</div>
</body>
思路：给放图片的大盒子加transition:transform .5s;
给图片加transform:scale(放大倍数);
结果：当鼠标悬浮在照片上的时候，照片会放大为原来的1.2倍
2.animation动画
<style>
#box{
width: 200px;
height: 200px;
background-color: lightgreen;
margin: 100px auto;
}
@keyframes xuanzhuan {
0%{transform: rotateY(90deg)}
50%{transform:rotateY(180deg)}
100%{transform: rotateY(360deg)}
}
#box:hover{
animation: xuanzhuan 1s linear infinite;
}
</style>
<body>
<div id="box">
hhh
</div>
</body>
结果：当鼠标悬浮在盒子的上面的时候，盒子会发生相应的旋转
