დაყენების ინსტრუქცია: ქვემოთ მოყვანილი სკრიპტი ჩასვით საიტის ბლოკში
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" /> <meta name="apple-mobile-web-app-title" content="CodePen"> <link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" /> <link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg" color="#111" /> <title>CSS Flying Santa</title> <link rel="canonical" href="https://codepen.io/mark_sottek/pen/emdYrG"> <style> @import url(https://fonts.googleapis.com/css?family=Mountains + of + Christmas:700); html, body { width: 100%; height: 100%; margin: 0; } body { background: #111; overflow: hidden; } /*************************** BEGIN OF FLYING SANTA ***************************/ .santa { width:20vw; min-width:175px; z-index: 600; cursor: pointer; -webkit-animation: FlyingSanta 38s infinite linear; -moz-animation: FlyingSanta 38s infinite linear; -ms-animation: FlyingSanta 38s infinite linear; -o-animation: FlyingSanta 38s infinite linear; animation: FlyingSanta 38s infinite linear; bottom: 0%; left: 0%; position: absolute; } @keyframes FlyingSanta { 25% { bottom: 80%; left: 85%; transform: rotateY(0deg); } 26% { transform: rotateY(180deg); } 50% { bottom: 60%; left: 0%; transform: rotateY(180deg); } 51% { transform: rotateY(0deg); } 75% { bottom: 40%; left: 85%; transform: rotateY(0deg); } 76% { bottom: 40%; left: 85%; transform: rotateY(180deg); } 99% { transform: rotateY(180deg); } } /*************************** //// END OF FLYING SANTA /// ***************************/ .NorthPole { z-index: 500; width: 10vw; min-width:180px; } .floating { -webkit-animation-name: Floating; -webkit-animation-duration: 5s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; } @-webkit-keyframes Floating { from { transform: translate(0, 0px); } 50% { transform: translate(0, 30px); } to { transform: translate(0, -0px); } } /*************************** Clip Text for Festive Sparkles ***************************/ h1 { font-size: 6.5vw; padding-top: 60px;; font-family: "Mountains of Christmas", cursive; background: -o-linear-gradient(transparent, transparent) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; margin: 0; padding: 0; position: absolute; font-weight: 900; width: 100%; text-align: center; letter-spacing: 1px; z-index: 200; -webkit-background-clip: text; } .Absolute-Center { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } /*************************** **************************** Text Glitter Styles **************************** ***************************/ .Gold-Glitter { color: gold; background: -webkit-linear-gradient(transparent, transparent), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/191814/gold_glitter.gif) repeat; } .Blue-Glitter { color: blue; background: -webkit-linear-gradient(transparent, transparent), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/191814/sparklesskyblue.gif) repeat; } .HotPink-Glitter { color: blue; background: -webkit-linear-gradient(transparent, transparent), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/191814/sparkleshotpink.gif) repeat; } .Pink-Glitter { color: pink; background: -webkit-linear-gradient(transparent, transparent), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/191814/pink_glitter.gif) repeat; } .Green-Glitter { color: green; background: -webkit-linear-gradient(transparent, transparent), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/191814/green_glitter.gif) repeat; } #snow { background: none; z-index: 200; background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/191814/flake1.png"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/191814/flake2.png"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/191814/flake3.png"); height: 100%; left: 0; position: absolute; top: 0; width: 100%; -webkit-animation: snow 10s linear infinite; -moz-animation: snow 10s linear infinite; -ms-animation: snow 10s linear infinite; animation: snow 10s linear infinite; } @keyframes snow { 0% { background-position: 0px 0px, 0px 0px, 0px 0px; } 50% { background-position: 500px 500px, 100px 200px, -100px 150px; } 100% { background-position: 500px 1000px, 200px 400px, -100px 300px; } } @-moz-keyframes snow { 0% { background-position: 0px 0px, 0px 0px, 0px 0px; } 50% { background-position: 500px 500px, 100px 200px, -100px 150px; } 100% { background-position: 400px 1000px, 200px 400px, 100px 300px; } } @-webkit-keyframes snow { 0% { background-position: 0px 0px, 0px 0px, 0px 0px; } 50% { background-position: 500px 500px, 100px 200px, -100px 150px; } 100% { background-position: 500px 1000px, 200px 400px, -100px 300px; } } @-ms-keyframes snow { 0% { background-position: 0px 0px, 0px 0px, 0px 0px; } 50% { background-position: 500px 500px, 100px 200px, -100px 150px; } 100% { background-position: 500px 1000px, 200px 400px, -100px 300px; } } </style> <script> window.console = window.console || function(t) {}; </script> </head> <body translate="no"> <div id="snow"></div> <h1 class="Blue-Glitter" >Santa on his Way!</h1> <img class="santa" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/191814/santas.gif" alt="Santa Be Watchin" /> <img class="NorthPole floating Absolute-Center" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/191814/North_Pole_Sign.png" alt="North Pole" /> <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src='//cdnjs.cloudflare.com/ajax/libs/buzz/1.1.0/buzz.min.js'></script> <script src='//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script> </body> </html>
დააკოპირეთ
