index.html
· 164 B · HTML
原始文件
<h1 class="alpha ">
Echo'system'
</h1>
<img class="mars" src="https://www.nasa.gov/sites/default/files/thumbnails/image/christmas2015fullmoon.jpg" alt="" />
| 1 | <h1 class="alpha "> |
| 2 | Echo'system' |
| 3 | </h1> |
| 4 | <img class="mars" src="https://www.nasa.gov/sites/default/files/thumbnails/image/christmas2015fullmoon.jpg" alt="" /> |
moon.markdown
· 198 B · markdown
原始文件
Moon
-----
A [Pen](https://codepen.io/Erreur32/pen/xjXBVR) by [Erreur32](https://codepen.io/Erreur32) on [CodePen](https://codepen.io).
[License](https://codepen.io/Erreur32/pen/xjXBVR/license).
| 1 | Moon |
| 2 | ----- |
| 3 | |
| 4 | |
| 5 | A [Pen](https://codepen.io/Erreur32/pen/xjXBVR) by [Erreur32](https://codepen.io/Erreur32) on [CodePen](https://codepen.io). |
| 6 | |
| 7 | [License](https://codepen.io/Erreur32/pen/xjXBVR/license). |
| 1 | $(document).ready(function() { |
| 2 | setTimeout(function() { |
| 3 | $('.alpha').addClass('in'); |
| 4 | },1000) |
| 5 | }) |
| 1 | <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
| 2 |
style.scss
· 1.7 KiB · SCSS
原始文件
@font-face {
font-family: 'agency';
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/agency_fb-2.eot'); /* IE9 Compat Modes */
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/agency_fb-2.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/agency_fb-2.woff') format('woff'), /* Modern Browsers */
url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/agency_fb-2.ttf') format('truetype'), /* Safari, Android, iOS */
url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/agency_fb-2.svg#7adfd2e465e5a5494cfebbc2416928d9') format('svg'); /* Legacy iOS */
font-style: normal;
font-weight: 400;
}
html {
font-size: 20px
}
body {
height: 100vh;
overflow: hidden;
background-color: #000;
}
.alpha {
position: absolute;
top: 50%;
left: 50%;
font-family: 'agency';
text-transform: uppercase;
color: #fff;
font-weight: 100;
font-size: 5em;
transform-origin: center center;
transform: translate3d(-50%,-50%,0)scale(1.4);
opacity: 0;
transition: opacity 4s ease-out, transform 4s ease-out, letter-spacing 4s ease-out, -webkit-filter 3s ease-out, filter 3s ease-out;
filter: blur(20px);
-webkit-filter: blur(20px);
white-space: nowrap;
&.in {
transform: translate3d(-50%,-50%,0)scale(1);
letter-spacing: 0.1em;
opacity: 1;
filter: blur(0px);
-webkit-filter: blur(0px);
}
}
.mars {
width: 75%;
display: block;
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
transform: translate(-50%, 0);
animation: mars 360s infinite linear;
}
@keyframes mars {
0% {
transform: translate(-50%, 0)rotate(0deg);
}
100% {
transform: translate(-50%, 0)rotate(360deg);
}
}
| 1 | @font-face { |
| 2 | font-family: 'agency'; |
| 3 | src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/agency_fb-2.eot'); /* IE9 Compat Modes */ |
| 4 | src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/agency_fb-2.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ |
| 5 | url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/agency_fb-2.woff') format('woff'), /* Modern Browsers */ |
| 6 | url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/agency_fb-2.ttf') format('truetype'), /* Safari, Android, iOS */ |
| 7 | url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/agency_fb-2.svg#7adfd2e465e5a5494cfebbc2416928d9') format('svg'); /* Legacy iOS */ |
| 8 | |
| 9 | font-style: normal; |
| 10 | font-weight: 400; |
| 11 | } |
| 12 | |
| 13 | |
| 14 | html { |
| 15 | font-size: 20px |
| 16 | } |
| 17 | body { |
| 18 | height: 100vh; |
| 19 | overflow: hidden; |
| 20 | background-color: #000; |
| 21 | } |
| 22 | .alpha { |
| 23 | position: absolute; |
| 24 | top: 50%; |
| 25 | left: 50%; |
| 26 | font-family: 'agency'; |
| 27 | text-transform: uppercase; |
| 28 | color: #fff; |
| 29 | font-weight: 100; |
| 30 | font-size: 5em; |
| 31 | transform-origin: center center; |
| 32 | transform: translate3d(-50%,-50%,0)scale(1.4); |
| 33 | opacity: 0; |
| 34 | transition: opacity 4s ease-out, transform 4s ease-out, letter-spacing 4s ease-out, -webkit-filter 3s ease-out, filter 3s ease-out; |
| 35 | filter: blur(20px); |
| 36 | -webkit-filter: blur(20px); |
| 37 | white-space: nowrap; |
| 38 | &.in { |
| 39 | transform: translate3d(-50%,-50%,0)scale(1); |
| 40 | letter-spacing: 0.1em; |
| 41 | opacity: 1; |
| 42 | filter: blur(0px); |
| 43 | -webkit-filter: blur(0px); |
| 44 | } |
| 45 | } |
| 46 | |
| 47 | .mars { |
| 48 | width: 75%; |
| 49 | display: block; |
| 50 | position: absolute; |
| 51 | z-index: -1; |
| 52 | top: 50%; |
| 53 | left: 50%; |
| 54 | transform: translate(-50%, 0); |
| 55 | animation: mars 360s infinite linear; |
| 56 | } |
| 57 | @keyframes mars { |
| 58 | 0% { |
| 59 | transform: translate(-50%, 0)rotate(0deg); |
| 60 | } |
| 61 | 100% { |
| 62 | transform: translate(-50%, 0)rotate(360deg); |
| 63 | } |
| 64 | } |