<!DOCTYPE html>
<link rel="stylesheet">
<style>
? ? .box{
? width: 400px;
? height: 400px;
? border: solid 1px red;
? /* background: #f30; */
? margin-left: auto;
? margin-right: auto;
? margin-top: 100px;
}
.img-box{
? /* border: solid blue 1px; */
? width: 300px ;
? height: 300px;
}
.img-box:hover{
? /* border: solid blue 1px; */
? width: 300px ;
? height: 300px;
? animation: myfirst linear 1s forwards;
? cursor: pointer;
? /* animation-play-state: paused */
? /* transform: translateY(-30px); */
}
@keyframes myfirst {
? ? ? 0% {
? ? ? ? ? transform: translate(0px, 0px);
? ? ? }
? ? ? 100% {
? ? ? ? transform: rotateZ(-10deg) scale3d(1.2,1.2,1);
? ? ? }
? ? }
</style>
<!-- <div>jdlfjdfldjfld</div> -->
<div class="box">我來自中國
? <img class="img-box" src="./dao.png" alt="">
</div>
</html>
