<!DOCTYPE html>
<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css" 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>
