תבנית:ענן
קפיצה לניווט
קפיצה לחיפוש
<style> div#cloud {
position: absolute; top: 0px; width: 250px; height: 200px; background: -webkit-linear-gradient(#ffffff, #808080); background: -o-linear-gradient(#ffffff, #808080); background: -moz-linear-gradient(#ffffff, #808080); background: linear-gradient(#ffffff, #808080); border-radius: 100%; opacity: 0; filter: blur(20px); -webkit-filter: blur(20px);
} div#cloud::before, div#cloud::after {
position: relative; width: 150px; height: 100px; content: " "; display: block; left: -80px; top: 100px; border-radius: 100%; background: -webkit-linear-gradient(#ffffff, #808080); background: -o-linear-gradient(#ffffff, #808080); background: -moz-linear-gradient(#ffffff, #808080); background: linear-gradient(#ffffff, #808080);
} div#cloud::after {
left: 200px; height: 80px; top: -50px;
} div#cloud:nth-child(1) {
animation: moving 31s; animation-iteration-coint: infinite; animation-timing-function: linear; -webkit-animation: moving 31s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; left: 175px; top: 20px;
} div#cloud:nth-child(2) {
animation: moving 25s; animation-iteration-coint: infinite; animation-timing-function: linear; -webkit-animation: moving 25s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; left: 100px; top: 20px;
} div#cloud:nth-child(3) {
animation: moving 28s; animation-iteration-coint: infinite; animation-timing-function: linear; -webkit-animation: moving 28s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; left: 150px; top: 130px;
} div#cloud:nth-child(4) {
animation: moving 20s; animation-iteration-coint: infinite; animation-timing-function: linear; -webkit-animation: moving 20s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; left: 200px; top: 100px;
} div#cloud:nth-child(5) {
animation: moving 27s; animation-iteration-coint: infinite; animation-timing-function: linear; -webkit-animation: moving 27s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; left: 125px; top: 50px;
} div#cloud:nth-child(6) {
animation: moving 22s; animation-iteration-coint: infinite; animation-timing-function: linear; -webkit-animation: moving 22s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; left: 150px; top: 50px;
} div#cloud:nth-child(7) {
animation: moving 28s; animation-iteration-coint: infinite; animation-timing-function: linear; -webkit-animation: moving 28s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; left: 225px; top: 75px;
} div#cloud:nth-child(8) {
animation: moving 30s; animation-iteration-coint: infinite; animation-timing-function: linear; -webkit-animation: moving 30s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; left: 505px; top: 60px;
} div#cloud:nth-child(9) {
animation: moving 25s; animation-iteration-coint: infinite; animation-timing-function: linear; -webkit-animation: moving 25s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; left: 375px; top: 140px;
} div#cloud:nth-child(10) {
animation: moving 23s; animation-iteration-coint: infinite; animation-timing-function: linear; -webkit-animation: moving 23s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; left: 525px; top: 70px;
} div#cloud:nth-child(11) {
animation: moving 22s; animation-iteration-coint: infinite; animation-timing-function: linear; -webkit-animation: moving 22s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; left: 375px; top: 50px;
} div#cloud:nth-child(12) {
animation: moving 25s; animation-iteration-coint: infinite; animation-timing-function: linear; -webkit-animation: moving 25s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; left: 275px; top: 60px;
} @-webkit-keyframes moving {
0% { margin-left: 0%; opacity: 0; } 10% { opacity: 1; } 100% { margin-left: 100%; }
} @keyframes moving {
0% { margin-left: 0%; opacity: 0; } 10% { opacity: 1; } 100% { margin-left: 100%; }
} </style>