CSSアニメーションの簡単な制作
22026 ワード
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
*{margin: 0;height: 0;}
body,html{height: 100%;}
body{background: url(img/img3/2.jpg)no-repeat;background-size:100% 100% ;overflow: hidden;}
.box1{background: url(img/img3/bracket.png)no-repeat center bottom;
position: fixed;right: 0px;left: 0px;bottom: -130px;margin: auto;width: 358px;height: 530px;}
.box1 img:nth-child(1){width: 768px;height: 768px;position: absolute;top: -351px;left:-202px;animation: zd1 15s infinite linear;}
.box2{width: 770px;height: 770px;/*background: aquamarine;*/position: absolute;top: 0px;left: 0px; bottom:0px;right:0px;margin: auto;/*background: rgba(0,100,200,0.5);*/animation: zd2 15s infinite linear;}
.box2 img{width: 130px;height: 170px;position: absolute;animation: zd3 15s infinite linear;transform-origin: top center;}
.box2 img:nth-child(1){left: 332px;top: 49px;}
.box2 img:nth-child(2){left: 582px;top: 134px;}
.box2 img:nth-child(3){left: 683px;top: 391px;}
.box2 img:nth-child(4){left: 575px;top: 632px;}
.box2 img:nth-child(5){left: 339px;top: 736px;}
.box2 img:nth-child(6){left: -38px;top: 398px;}
.box2 img:nth-child(7){left: 78px;top: 635px;}
.box2 img:nth-child(8){left: 68px;top: 127px;}
@keyframes zd1{
0%{transform: rotate(0deg);}
50%{transform: rotate(180deg);}
100%{transform: rotate(360deg);}
}
@keyframes zd2{
0%{transform: rotate(0deg);}
50%{transform: rotate(180deg);}
100%{transform: rotate(360deg);}
}
@keyframes zd3{
0%{transform: rotate(0deg);}
50%{transform: rotate(-180deg);}
100%{transform: rotate(-360deg);}
}
.box1 p{font-size: 50px;color: #5F9EA0;font-weight: bold;z-index: 1;top: 0px;left: 0px;width: 200px;height: 150px;}
.box1 img:nth-child(3){width: 577px;height: 257px;position: absolute;top: -85px;left: -106px;}
style>
head>
<body>
<div class="box1">
<img src="img/img3/fsw.png"/>
<img src="img/img3/big-title.png"/>
<img src="img/img3/big-title.png"/>
div>
<div class="box2">
<img src="img/img3/boy.png"/>
<img src="img/img3/dog.png"/>
<img src="img/img3/girl.png"/>
<img src="img/img3/girls.png"/>
<img src="img/img3/hairboy.png"/>
<img src="img/img3/mimi.png"/>
<img src="img/img3/mudog.png"/>
<img src="img/img3/shamegirl.png"/>
div>
body>
html>