<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>长颈鹿动画视频</title>
<style type="text/css">
.div{
text-align: center;
}
.img{
margin-top: 100px;
width: 300px;
height: 300px;
}
html:hover .img{
animation-name: img;
animation-delay: 600ms;
animation-duration: 1s;
animation-fill-mode: forwards;
}
@keyframes img {
to{
width: 122px;
height: 122px;
margin-top: 0px;
}
}
p{
font-family: 微软雅黑;
font-size: 60px;
text-shadow: 1px 1px 2px deepskyblue;
opacity: 1;
}
html:hover p{
transition-delay: 600ms;
transition-duration: 1s;
font-family: 微软雅黑;
font-size: 60px;
text-shadow: 1px 1px 2px deepskyblue;
opacity: 0;
}
</style>
</head>
<body>
<div class="div">
<img src="giraffe.jpg" class="img">
<p>长颈鹿</p>
</div>
</body>
</html>