CSS đồng hồ treo lắc lư

  Bài viết hay nhất1
HTML:


<div id="watch">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/pocketwatch-no-second-hand.png" alt="Pocketwatch on chain" class="watch">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/second-hand.png" alt="Pocketwatch second hand" class="seconds">
</div>
<h1>VĨnh Lạc</h1>
<hr>
<h2>HYPNOTHERAPY SERVICES</h2>



CSS:

@import url(https://fonts.googleapis.com/css?family=Hammersmith+One);

@keyframes sway {
to { transform: rotate(30deg); }
}
@keyframes fade {
to { opacity: 1; }
}
@keyframes widen {
to { width: 40%; }
}
@keyframes secondcount {
to { transform: rotate(355deg); }
}
* { box-sizing: border-box; }
body {
margin: 0;
background: #111;
color: #fff;
text-align: center;
font-family: 'Hammersmith One', sans-serif;
}
body > * { position: relative; }
#watch {
width: 12vw; height: auto;
margin: 0 auto;
transform-origin: center top;
transform: rotate(-30deg);
top: -10px;
animation: sway 2.2s infinite alternate ease-in-out;
}
#watch img.watch { width: 100%; height: auto; }
img.seconds {
position: absolute;
width: 8%; height:auto;
bottom: 11.75%; left: 45%;
transform-origin: center 72.4%;
animation: secondcount 60s infinite linear;
}
h1 {
font-size: 10vw;
top: -35vw; text-shadow: 0 0 3px 4px rgba(0,0,0,0.3);
opacity: 0;
animation: fade 4s 2s forwards;
}
h2 {
font-weight: 100;
font-size: 3vw;
top: -20vw;
letter-spacing: .2vw;
opacity: 0;
animation: fade 2s 7s forwards;
}
hr {
border: none;
width: 0%; color: #777;
height: 1px;
background-color: #777;
top: -20vw;
animation: widen 2s 5s forwards;
}




JS:


window.addEventListener('resize', function() {
/* fixes for Webkit not altering vw font sizes in response to viewport changes */
var demento = document.querySelector('h1');
var services = document.querySelector('h2');
demento.style.fontSize="10vw";
services.style.fontSize="3vw";

})
Bạn không có quyền trả lời bài viết