|
|
| (2 גרסאות ביניים של אותו משתמש אינן מוצגות) |
| שורה 1: |
שורה 1: |
| − | <html>
| |
| − | <style>
| |
| − | div#cloud {
| |
| − | position: absolute;
| |
| − | top: -79px;
| |
| − | 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);
| |
| − | z-index:-1;
| |
| − | }
| |
| − | div#cloud::before,
| |
| − | div#cloud::after {
| |
| − | position: relative;
| |
| − | width: 150px;
| |
| − | height: 100px;
| |
| − | content: " ";
| |
| − | display: block;
| |
| − | left: -80px;
| |
| − | top: 0px;
| |
| − | 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: 30px;
| |
| − | }
| |
| − | 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: 10px;
| |
| − | }
| |
| − | 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: -10px;
| |
| − | }
| |
| − | 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>
| |
| − | </html>
| |
| | <div id="cloud"></div> | | <div id="cloud"></div> |
| | <div id="cloud"></div> | | <div id="cloud"></div> |