css3实现红旗动漫制图
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>ceshi7</title>
<style>
* {
margin: 0;
padding: 0;
}
.head {
background: #de2810;
}
.xing1 {
position: absolute;
top: 10%;
width: 20%;
height: 25%;
left: 10%;
}
.xing2 {
position: absolute;
top: 40%;
width: 10%;
height: 10%;
left: 30%;
}
.xing3 {
position: absolute;
top: 28%;
width: 10%;
height: 10%;
left: 37%;
}
.xing4 {
position: absolute;
top: 15%;
width: 10%;
height: 10%;
left: 37%;
}
.xing5 {
position: absolute;
top: 5%;
width: 10%;
height: 10%;
left: 30%;
}
.xing1 img {
animation: move 3s ;
}
@@keyframes move {
0% {
transform: rotate(0);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
.xing2 img{
animation:moves 5s ;
position:relative;
}
@@keyframes moves{
0%{
left:-300px;
top:0;
}
25%{
left:-300px;
top:-280px;
}
50%{
top:-280px;
left:50px;
}
75% {
top: 50px;
left: 50px;
}
100% {
top: 0;
left: 0;
transform: rotate(360deg);
}
}
.xing3 img{
animation:move3 5s ;
position:relative;
}
@@keyframes move3{
0%{
left:300px;
top:0;
}
25%{
left:300px;
top:200px;
}
50%{
top:200px;
left:-100px;
}
75% {
top: 0;
left:0;
}
100% {
transform: rotate(360deg);
}
}
.xing4 img{
animation:move4 5s ;
position:relative;
}
@@keyframes move4{
0%{
left:50px;
top:-50px;
}
25%{
top:-100px;
left:500px;
}
40%{
top:200px;
left:550px;
}
50%{
top:400px;
left:100px;
}
75% {
top: 0px;
left:0px;
}
100% {
transform: rotate(360deg);
}
}
.xing5 img{
animation:move5 5s ;
position:relative;
}
@@keyframes move5{
0%{
left:0;
top:0;
}
25%{
top:100px;
left:500px;
}
40%{
top:400px;
left:550px;
}
50%{
top:450px;
left:100px;
}
75% {
top: 100px;
left:0px;
}
100% {
top: 0;
left:0;
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="head"id="head">
<div class="xing1">
<img src="~/images/q.png"width="100%"height="100%"/>
</div>
<div class="xing2">
<img src="~/images/w.png" width="100%" height="100%" />
</div>
<div class="xing3">
<img src="~/images/e.png" width="100%" height="100%" />
</div>
<div class="xing4">
<img src="~/images/r.png" width="100%" height="100%" />
</div>
<div class="xing5">
<img src="~/images/t.png" width="100%" height="100%" />
</div>
</div>
<script>
window.onload = function () {
headKG()
}
function headKG() {
var head = document.getElementById('head');
var width = window.innerWidth;
var height = window.innerHeight;
head.style.width = width + 'px';
head.style.height = height + 'px';
}
window.onresize = headKG;
</script>
</body>
</html>
效果图：
