本案例下载地址>>>点击打开链接
有兴趣的话,可以看看进阶de动画教程>>>海贼船大动画
Effect:
除了飞机是图片,其他都是代码;
Demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>飞机坠毁,无人遇难</title>
<style>
*{
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
}
body {
/* 径向渐变--太阳 */
background: radial-gradient(250px at right top ,red, orange, yellow , skyblue);
overflow: hidden;
}
grass {
height: 100px;
width: 100%;
/* 线性渐变--草地 */
background: linear-gradient(to bottom, #0f0,#080,#050);
border-radius: 50% 50% 0 0;
position: absolute;
bottom:0;
}
img {
width: 100px;
height: 100px;
position: absolute;
top: -100px;
}
/* 鼠标移入执行飞机坠落效果 */
body:hover img{
transition: all 4s ease-in;
transform: translate(1300px,500px) scale(10) rotate(270deg);
}
</style>
</head>
<body>
<!-- 这里用到和HTML5的新标签 -->
<grass></grass>
<img src="./imgs/airplane.png">
</body>
</html>
<!-- 因为用到了HTML5的新标签,所以对IE浏览器进行兼容,其中lte的意思是less than equal(少于等于) -->
<!-- [if lte IE8]>
<script>
var grass = document.createElement('grass');
grass.style.display = "block";
document.body.appendChild(grass);
</script>
<![endif]-->
这里用到的transition是过渡,不是css3的动画效果animate需知晓;