动画HTML5
2018-02-10 本文已影响0人
Gxiner
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<title>欢乐春节</title>
<style type="text/css">
body { padding: 0;margin: 0;height: 100vh;background:linear-gradient(#ff0061,#ff2b2b,#ff4700,#e23232);background-color: #e23234;}
.div{ width: 100%;height: 100%;}
.div2{ position: relative;text-align: center;}
@keyframes bus_drive { 0%{ left: 100%;} 17%{ left: 50%;transform: skew(0deg);} 24%{ left: 40%;transform: skew(8deg);} 28%{ left: 35%;transform: skew(20deg);} 35%{ left: 35%;transform: skew(0deg);} 100%{left:-260px;} }
#text{ width: 70%;padding: 36px;}
#title { float: right;width: 70%;padding-right: 20px;padding-bottom: 60px;}
#bus { position: absolute;animation: bus_drive 6s ease-in infinite;right: -260px;top: 120px;}
#gas { position: absolute;right: -30px;top: 180px;animation: animation-gas 6s ease-in infinite;}
@keyframes animation-gas {
0% {left: 130%;}
17% {left: 93%;transform: skew(0deg);}
24% {left: 85%;transform: skew(8deg);}
28% {left: 80%;transform: skew(20deg);}
35% {left: 80%;transform: skew(0deg);}
100% {left: -85px;}
}
</style>
</head>
<body>
<div class="div">
<img id="text" src="text.png" width="100%" height="35%">
<img id="title" src="title.png" width="100%" height="auto">
<div class="div2">
<img id="bus" src="bus.png" width="160px" height="auto">
<img id="gas" src="gas.png" width="30px" height="auto">
</div>
</div>
</body>
</html>
汽车
[图片上传中...(gas.png-bcfef5-1518261725261-0)]
尾气
gas.png
内容
text.png
标题
title.png
效果
过年h5.jpg
