Giới thiệu 1 số Animation CSS hay trên CodePen
Bài đăng này đã không được cập nhật trong 6 năm
Giới thiệu:
CSS3 animations cho phép bạn thực hiện những hiệu ứng động với hầu hết các đối tượng HTML trên trang web.
Một animation cho phép một đối tượng chuyển đổi từ style này sang một style khác. Trong một animation, bạn có thể thay đổi style nhiều lần với nhiều thuộc tính CSS khác nhau.
Dưới đây là 1 số những animation CSS hay và đẹp mắt.
1. Dodecahedron
Một hình chữ nhật tinh tế, đẹp, tạo ra một hình ảnh động hoàn toàn với CSS.
HTML(Pug)
.view
.plane.main
- for (var x = 0; x < 6; x++)
.circle
CSS(Sass)
$side: 120px
$l: 90px
$num: 10
$dur: 10s
@mixin plane($w, $h)
width: $w
height: $h
transform-style: preserve-3d
@mixin view($p)
position: absolute
top: 0
left: 0
right: 0
bottom: 0
perspective: $p
@mixin center
position: absolute
top: 0
left: 0
right: 0
bottom: 0
margin: auto
html, body
background: #222
overflow: hidden
width: 100%
height: 100%
.view
@include view(400)
.plane
@include plane($side, $side)
&.main
@include center
transform: rotateX(60deg) rotateZ(-30deg)
animation: rotate 20s infinite linear
.circle
width: $side
height: $side
position: absolute
transform-style: preserve-3d
border-radius: 100%
//border: 2px solid white
box-sizing: border-box
box-shadow: 0 0 60px rgba(crimson, 1), inset 0 0 60px rgba(crimson, 1)
&::before, &::after
content: ''
display: block
@include center
width: 10%
height: 10%
border-radius: 100%
background: rgba(crimson, 1)
//border: 4px solid black
box-sizing: border-box
box-shadow: 0 0 60px 2px rgba(crimson, 1)
&::before
transform: translateZ(-$l)
&::after
transform: translateZ($l)
@for $i from 1 through 5
&:nth-child(#{$i})
transform: rotateZ($i / 5 * 360deg) rotateX(63.435deg)
@keyframes rotate
0%
transform: rotateX(0) rotateY(0) rotateZ(0)
100%
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg)
Demo
2.Flat Design Camera
Nhấn nút shutter trên camera flat để xem nó tạo ra một bức ảnh bằng cách sử dụng hình ảnh động CSS.
HTML
<div id="camera">
<div class="strip">
</div>
<div class="lens">
</div>
<div class="led">
</div>
<div class="btn">
</div>
</div>
<div id="panel">
<div class="pic">
<img src="http://lorempixel.com/150/150/people"/>
</div>
<center>
<a href="#" class="lnk">My Portfolio</a>
</center>
</div>
<div class="shadow">
</div>
CSS
@import url(https://fonts.googleapis.com/css?family=News+Cycle:400);
body {
margin:0;
padding:0;
background-color:#333;
}
#camera, #panel {
position:absolute;
left:50%; top:50%;
width:300px; height:300px;
margin:-150px;
background:#eaeaea;
border:1px solid rgba(0,0,0,.2); border-radius:50px;
overflow:hidden;
transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
}
#panel {
box-shadow: inset 0px -3px 0px rgba(0,0,0,.2);
-webkit-transform:rotate(-90deg) scale(0);
-moz-transform:rotate(-90deg) scale(0);
-ms-transform:rotate(-90deg) scale(0);
-o-transform:rotate(-90deg) scale(0);
transform:rotate(-90deg) scale(0);
}
#camera {
z-index:2;
}
.btn {
position: absolute;
top: 22px; right: 35px;
width: 40px; height: 30px;
background-color: #2e3e4f;
border-radius: 15px;
box-shadow: 0px 3px 0px rgba(0,0,0,.4);
transition:all .2 ease-in-out;
-webkit-transition:all .2 ease-in-out;
-moz-transition:all .2 ease-in-out;
-ms-transition:all .2 ease-in-out;
-o-transition:all .2 ease-in-out;
animation: .5s btn;
-webkit-animation: .5s btn;
-moz-animation: .5s btn;
-ms-animation: .5s btn;
-o-animation: .5s btn;
animation-iteration-count:5;
-webkit-animation-iteration-count:5;
-moz-animation-iteration-count:5;
-ms-animation-iteration-count:5;
-o-animation-iteration-count:5;
}
.btn:hover {
cursor:pointer;
margin-top:2px;
box-shadow: 0px 1px 0px rgba(0,0,0,.4);
}
.shadow {
position: absolute;
left: 50%;
top: 50%;
width: 240px; height: 20px;
margin: 170px -120px 0px;
border-radius: 50%;
background-color: rgba(0,0,0,.3);
transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
}
.strip {
height: 110px;
background-color: #54b59a;
border-top: 10px solid #479a83;
border-bottom: 10px solid #479a83;
margin: 80px 0px;
box-shadow: 0px 2px 0px rgba(0,0,0,.4);
}
.lens {
position:absolute;
top:50%; left:50%;
width:144px; height:144px;
margin:-90px;
border:18px solid #b44b37;
border-radius:50%;
background-color:#111;
box-shadow: 0px 5px 0px rgba(0,0,0,.4);
}
.lens:before {
content: '';
position: absolute;
width: 50px; height: 50px;
margin: 27px;
border: 20px solid rgb(60, 60, 60);
border-radius: 50%;
background: rgb(34, 34, 34);
}
.lens:after {
content: '';
position: absolute;
width: 8px; height: 8px;
margin: 57px;
border: 11px solid rgb(22, 22, 22);
border-radius: 50%;
background: rgb(131, 131, 131);
}
.led {
position: absolute;
left: 35px; top: 30px;
width: 15px; height: 15px;
border-radius: 50%;
background-color: rgb(255, 136, 115);
box-shadow: inset 0px 1px 0px rgba(0,0,0,.1);
-webkit-animation: led .8s infinite;
-moz-animation: led .8s infinite;
-ms-animation: led .8s infinite;
-o-animation: led .8s infinite;
animation: led .8s infinite;
}
.pic {
position: absolute;
top: 50%; left: 50%;
width: 150px; height: 150px;
margin: -120px -75px;
border: 5px solid #ccc;
border-radius: 50%;
overflow: hidden;
box-shadow: 0px 2px 0px rgba(0,0,0,.2);
}
.lnk {
position: relative;
top: 220px;
font: 22px 'News Cycle', sans-serif;
color: #777;
text-align: center;
text-decoration:none;
cursor:pointer;
text-transform:uppercase;
transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
}
.lnk:hover {
text-shadow: 0px 1px 0px rgba(0,0,0,.2);
}
/* slide */
body.open > #panel {
-webkit-transform-origin: 0% 100%;
-webkit-transform:rotate(0deg) scale(1);
-moz-transform-origin: 0% 100%;
-moz-transform:rotate(0deg) scale(1);
-ms-transform-origin: 0% 100%;
-ms-transform:rotate(0deg) scale(1);
-o-transform-origin: 0% 100%;
-o-transform:rotate(0deg) scale(1);
transform-origin: 0% 100%;
transform:rotate(0deg) scale(1);
margin-left:0;
}
body.open > #camera {
margin-left:-300px;
}
body.open > .shadow {
margin: 170px -260px 0px;
width:520px;
}
/* keyframes */
@-webkit-keyframes led {
from {
opacity:.2;
}
to {
opacity:1;
}
}
@-moz-keyframes led {
from {
opacity:.2;
}
to {
opacity:1;
}
}
@-ms-keyframes led {
from {
opacity:.2;
}
to {
opacity:1;
}
}
@-o-keyframes led {
from {
opacity:.2;
}
to {
opacity:1;
}
}
@keyframes led {
from {
opacity:.2;
}
to {
opacity:1;
}
}
@-webkit-keyframes btn {
from {
margin-top:0px;
top: 22px;
}
to {
margin-top:2px;
box-shadow: 0px 1px 0px rgba(0,0,0,.4);
}
}
@-moz-keyframes btn {
from {
margin-top:0px;
top: 22px;
}
to {
margin-top:2px;
box-shadow: 0px 1px 0px rgba(0,0,0,.4);
}
}
@-ms-keyframes btn {
from {
margin-top:0px;
top: 22px;
}
to {
margin-top:2px;
box-shadow: 0px 1px 0px rgba(0,0,0,.4);
}
}
@-o-keyframes btn {
from {
margin-top:0px;
top: 22px;
}
to {
margin-top:2px;
box-shadow: 0px 1px 0px rgba(0,0,0,.4);
}
}
@keyframes btn {
from {
margin-top:0px;
top: 22px;
}
to {
margin-top:2px;
box-shadow: 0px 1px 0px rgba(0,0,0,.4);
}
}
JS
$(function(){
$('.btn').click(function(){
$('body').hasClass('open') ? $('body').removeClass('open'):$('body').addClass('open')
})
})
Demo:
3.Day and Night Transition
Nhấn nút để xem chuyển đổi từ ban ngày sang đêm.
HTML
<div id="fullpage">
<div class="section">
<p id="info">Scroll down...</p>
<div class="time-circle">
<div class="sun"></div>
<div class="moon">
<div></div>
<div></div>
<div></div>
</div>
<div class="stars">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="water"></div>
</div>
<div id="intro-text">
<h1 href="#">day night simulation</h1>
<h4>by Szymon Stypa, inspired by pens on Codepen</h4>
</div>
<div id="switch">
<div id="circle"></div>
</div>
</div>
</div>
CSS
@import url(https://fonts.googleapis.com/css?family=Lato);
#info {
position: absolute;
left: 5%;
}
body {
padding: 0;
margin: 0;
font-family: 'Lato';
text-align: center;
}
.section {
padding-top: 40px;
font-size: 1em;
text-align: center;
background: #f1ede3;
width: 100%;
height: 800px;
color: #555;
-webkit-transition: background 0.5s ease-in-out;
transition: background 0.5s ease-in-out;
}
.night .section {
background: #080d17;
color: #e9e5d5;
}
.night #intro-text {
color: #e9e5d5;
}
.time-circle {
position: relative;
background: linear-gradient(to bottom, #BE4405, #F6C60C);
width: 400px;
height: 400px;
border-radius: 50%;
border: 4.5px solid #555;
overflow: hidden;
padding: 0px;
margin: 0 auto;
margin-bottom: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
text-align: center;
-webkit-transition: all 1.1s ease-in-out;
transition: all 1.1s ease-in-out;
}
.night .time-circle{
background: linear-gradient(to bottom, #111936, #285A7B);
border-color: #e9e5d5;
}
.sun {
margin-top: 20px;
background: #F2EF88;
box-shadow: 0 0 20px rgba(242, 239, 136, 0.4);
width: 30%;
height: 30%;
border-radius: 50%;
position: relative;
left: 35%;
top: 48%;
-webkit-animation: pulse 5s ease infinite alternate;
animation: pulse 5s ease infinite alternate;
-webkit-transition: all 1.1s 0.4s ease;
transition: all 1.1s 0.4s ease;
}
@keyframes pulse {
0% {box-shadow: 0 0 20px rgba(242, 239, 136, 0.4);}
50% {box-shadow: 0 0 40px rgba(242, 239, 136, 1);}
100% {box-shadow: 0 0 20px rgba(242, 239, 136, 0.4);}
}
@-webkit-keyframes pulse {
0% {box-shadow: 0 0 20px rgba(242, 239, 136, 0.4);}
50% {box-shadow: 0 0 40px rgba(242, 239, 136, 1);}
100% {box-shadow: 0 0 20px rgba(242, 239, 136, 0.4);}
}
.night .sun {
top: 70%;
left: 20%;
-webkit-transition: all 1.1s 0s ease;
transition: all 1.1s 0s ease;
}
.moon {
position: absolute;
margin-top: 20px;
background: #d9d8d0;
box-shadow: inset -10px 2px 0 0px #899098;
width: 22.5%;
height: 22.5%;
border-radius: 100%;
position: relative;
left: 120%;
margin-left: -50px;
top: -50%;
overflow: hidden;
-webkit-transition: all 1.1s 0s ease;
transition: all 1.1s 0s ease;
}
.night .moon {
left: 65%;
top: -10%;
-webkit-transition: all 1.1s 0.4s ease;
transition: all 1.1s 0.4s ease;
}
.moon div:nth-child(n) {
position: relative;
background: #b9b8b0;
border-radius: 50%;
box-shadow: inset 4px -2px 0 0px #535457;
}
.moon div:nth-child(1) {
top: 25%;
left: 12%;
width: 27%;
height: 27%;
}
.moon div:nth-child(2) {
top: -11%;
left: 60%;
width: 16%;
height: 16%;
}
.moon div:nth-child(3) {
top: 25%;
left: 44%;
width: 16%;
height: 16%;
}
.stars {
opacity: 0;
margin-left: 100px;
top: 0;
left: 0;
-webkit-transition: all 0.8s 0s ease;
transition: all 0.8s 0s ease;
z-index: 1000;
}
.night .stars {
opacity: 1;
-webkit-transition: all 3s 0.4s ease;
transition: all 3s 0.4s ease;
}
.stars div:nth-child(n) {
position: absolute;
background: radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
border-radius: 50%;
box-shadow: 0 0 10px rgba(255, 255, 255, 1);
overflow: hidden;
width: 0.4%;
height: 0.4%;
margin-left: 20%;
margin-top: -20%;
-webkit-transition: all 1s 0s ease;
transition: all 1s 0s ease;
}
.night .stars div:nth-child(n) {
margin-left: 0;
margin-top: 0;
-webkit-transition: all 1s 0.4s ease-out;
transition: all 1s 0.4s ease-out;
}
.stars div:nth-child(1) {
left: 25%;
top: 30%;
}
.stars div:nth-child(2) {
left: 55%;
top: 20%;
}
.stars div:nth-child(3) {
left: 60%;
top: 60%;
}
.stars div:nth-child(4) {
left: 40%;
top: 45%;
}
.stars div:nth-child(5) {
left: 15%;
top: 55%;
}
.stars div:nth-child(6) {
left: 40%;
top: 10%;
}
.stars div:nth-child(7) {
left: 80%;
top: 55%;
}
.water {
position: absolute;
background: repeating-radial-gradient(ellipse farthest-corner at center -400%, #f5c30e 30%, #518eac 90%) repeat scroll 0 0 #518eac;
width: 100%;
height: 200px;
top: 68%;
-webkit-transition: all 1.1s ease;
transition: all 1.1s ease;
}
.night .water{
background: repeating-radial-gradient(ellipse farthest-corner at center -400%, #7fa1bb 30%, #1d425a 90%) repeat scroll 0 0 #1d425a;
}
#switch,
#circle {
height: 30px;
-webkit-transition: all 0.4s cubic-bezier(0.54, 1.6, 0.5, 1);
transition: all 0.4s cubic-bezier(0.54, 1.6, 0.5, 1);
}
#switch {
width: 60px;
margin: 0 auto;
border: 2px solid #DA8508;
border-radius: 27px;
background: #DA8508;
position: relative;
}
#circle {
margin-top: 5%;
margin-left: 5%;
width: 40%;
height: 80%;
border-radius: 50%;
box-shadow: 0 4px 4px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07);
background: #e9e5d5;
}
.switched {
border-color: #1C3958 !important;
background: #1C3958 !important;
}
.switched #circle {
margin-left: 55%;
background: #e9e5d5;
}
JS
$("#switch").click(function () {
if ($("#fullpage").hasClass("night")) {
$("#fullpage").removeClass("night");
$("#switch").removeClass("switched");
}
else {
$("#fullpage").addClass("night");
$("#switch").addClass("switched");
}
});
Demo:
4. Star Wars: The Force Awakens
Tiêu đề từ bộ phim Star Wars sắp tới được tạo bằng CSS, HTML và một ít JavaScript.
HTML
<div class="starwars-demo">
<img src="//cssanimation.rocks/demo/starwars/images/star.svg" alt="Star" class="star">
<img src="//cssanimation.rocks/demo/starwars/images/wars.svg" alt="Wars" class="wars">
<h2 class="byline" id="byline">The Force Awakens</h2>
</div>
CSS
/* Animation properties */
.star {
animation: star 10s ease-out infinite;
}
.wars {
animation: wars 10s ease-out infinite;
}
.byline span {
animation: spin-letters 10s linear infinite;
}
.byline {
animation: move-byline 10s linear infinite;
}
/* Keyframes */
@keyframes star {
0% {
opacity: 0;
transform: scale(1.5) translateY(-0.75em);
}
20% {
opacity: 1;
}
89% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: translateZ(-1000em);
}
}
@keyframes wars {
0% {
opacity: 0;
transform: scale(1.5) translateY(0.5em);
}
20% {
opacity: 1;
}
90% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: translateZ(-1000em);
}
}
@keyframes spin-letters {
0%, 10% {
opacity: 0;
transform: rotateY(90deg);
}
30% {
opacity: 1;
}
70%, 86% {
transform: rotateY(0);
opacity: 1;
}
95%, 100% {
opacity: 0;
}
}
@keyframes move-byline {
0% {
transform: translateZ(5em);
}
100% {
transform: translateZ(0);
}
}
/* Make the 3D work on the container */
.starwars-demo {
perspective: 800px;
transform-style: preserve3d;
}
/* General styles and layout */
body {
background: #000 url(//cssanimation.rocks/demo/starwars/images/bg.jpg);
}
.starwars-demo {
height: 17em;
left: 50%;
position: absolute;
top: 53%;
transform: translate(-50%, -50%);
width: 34em;
}
.byline span {
display: inline-block;
}
img {
width: 100%;
}
.star, .wars, .byline {
position: absolute;
}
.star {
top: -0.75em;
}
.wars {
bottom: -0.5em;
}
.byline {
color: #fff;
font-family: "ITC Serif Gothic", Lato;
font-size: 2.25em;
left: -2em;
letter-spacing: 0.4em;
right: -2em;
text-align: center;
text-transform: uppercase;
top: 29%;
}
/*** Media queries for adjusting to different screen sizes ***/
@media only screen and (max-width: 600px) {
.starwars-demo {
font-size: 10px;
}
}
@media only screen and (max-width: 480px) {
.starwars-demo {
font-size: 7px;
}
}
JS
/* Learn how to create this and much more with this email course:
https://cssanimation.rocks/courses/animation-101/
MANY THANKS TO @tadywankenobi for the following JS to handle the text in the byline:
The following JS takes in the byline and splits it into letters, each one wrapped in a span. We need to create the spans as nodes, we can't just add them to the HTML using innerHTML, as to do so would mean the CSS won't affect the span because it doesn't recognise the tag as existing. It's an old problem we run into time and again.
*/
var byline = document.getElementById('byline'); // Find the H2
bylineText = byline.innerHTML; // Get the content of the H2
bylineArr = bylineText.split(''); // Split content into array
byline.innerHTML = ''; // Empty current content
var span; // Create variables to create elements
var letter;
for(i=0;i<bylineArr.length;i++){ // Loop for every letter
span = document.createElement("span"); // Create a <span> element
letter = document.createTextNode(bylineArr[i]); // Create the letter
if(bylineArr[i] == ' ') { // If the letter is a space...
byline.appendChild(letter); // ...Add the space without a span
} else {
span.appendChild(letter); // Add the letter to the span
byline.appendChild(span); // Add the span to the h2
}
}
Demo:
5. 3D Solar System
Một hệ mặt trời khác, lần này là 3D. Sử dụng shading tuyệt đẹp.
HTML
<ul class="wrapper">
<div class="sun">
<div class="star"></div>
</div>
<div class="mercury">
<div class="planet">
<div class="shadow"></div>
</div>
</div>
<div class="venus">
<div class="planet">
<div class="shadow"></div>
</div>
</div>
<div class="earth">
<div class="planet"><div class="shadow"></div></div>
</div>
<div class="mars">
<div class="planet"><div class="shadow"></div></div>
</div>
<div class="jupiter">
<div class="planet"><div class="shadow"></div></div>
</div>
</ul>
CSS
html {
background-color: #000;
}
body{
height: 100%;
top: 0px;
bottom: 0px;
}
@keyframes spinsun {
0% { transform: rotate(0); }
100% { transform: rotate(-360deg); }
}
@keyframes shadow {
0% { background-position: 130% 0%; }
33%{ background-position: 50% 0%; }
55% { background-position: 0% 0%; }
80%{ background-position: -50% 0%; }
100%{ background-position: -50% 0%; }
}
@keyframes orbitmercury {
0% { z-index:2; transform: rotateY(0); }
49% { z-index:2; }
50% { z-index:-2; }
99% { z-index:-2; }
100% { z-index:2; transform: rotateY(360deg); }
}
@keyframes orbitvenus {
0% { z-index:3; transform: rotateY(0); }
49% { z-index:3; }
50% { z-index:-3; }
99% { z-index:-3; }
100% { z-index:3; transform: rotateY(360deg); }
}
@keyframes orbitearth {
0% { z-index:4; transform: rotateY(0); }
49% {z-index:4;}
50% {z-index:-4;}
99% {z-index:-4;}
100% { z-index:4; transform: rotateY(360deg);}
}
@keyframes orbitmars {
0% { z-index:5; transform: rotateY(0); }
49% { z-index:5; }
50% { z-index:-5; }
99% { z-index:-5; }
100% { z-index:5; transform: rotateY(360deg); }
}
@keyframes orbitjupiter {
0% { z-index:6; transform: rotateY(270); }
49% { z-index:6; }
50% { z-index:-6; }
99% { z-index:-6; }
100% { z-index:6; transform: rotateY(360deg); }
}
@keyframes orbitsaturn {
0% { z-index:7; transform: rotateY(270); }
49% { z-index:7; }
50% { z-index:-7; }
99% { z-index:-7; }
100% { z-index:7; transform: rotateY(360deg); }
}
/* Keep planet image flat */
@keyframes anti-spin {
from { transform: rotateY(0); }
to { transform: rotateY(-360deg); }
}
@keyframes anti-spin-rings {
from { transform: rotateY(0) rotateX(73deg); }
to { transform: rotateY(-360deg) rotateX(73deg); }
}
/* scene wrapper */
.wrapper{
position:relative;
margin: 0 auto;
display:block;
margin-top: 200px;
perspective: 1000px;
perspective-origin: 60% 50%;
transform: rotate(-10deg);
}
.wrapper > div {
position: relative;
margin: 0 auto;
transform-style: preserve-3d;
height: 0px;
}
.sun {
width: 250px;
position: absolute;
top: 0px;
z-index: 1;
height: 125px !important;
}
.sun .star {
width: 250px;
height: 250px;
background: url(http://www.waynedunkley.com/img/solar_system/sun.png) no-repeat;
background-size: cover;
border-radius: 250px;
margin: 0 auto;
animation: spinsun 40s infinite linear;
}
.planet {
background-size: cover;
background-repeat: no-repeat;
background-color: transparent;
animation-iteration-count: infinite;
overflow:hidden;
}
.shadow {
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background: transparent url(http://www.waynedunkley.com/img/solar_system/shadow.png) 0% 0% no-repeat;
background-size: cover;
border-radius: 100%;
}
.mercury {
position: absolute;
width: 400px;
z-index:2;
animation: orbitmercury 12s infinite linear;
top: -7.5px; /*half of planets height to keep orbits in line*/
}
.mercury .planet {
width:15px;
height:15px;
background-image: url(http://www.waynedunkley.com/img/solar_system/mercury.png);
animation: anti-spin 12s infinite linear;
}
.mercury .shadow {
animation: shadow 12s infinite linear;
}
.venus {
position: absolute;
width: 506px;
z-index:3;
animation: orbitvenus 15s infinite linear;
top: -19px;
}
.venus .planet {
width:38px;
height:38px;
background-image: url(http://www.waynedunkley.com/img/solar_system/venus.png);
animation: anti-spin 15s infinite linear;
}
.venus .shadow {
animation: shadow 15s infinite linear;
}
.earth {
position: absolute;
width: 610px;
z-index:4;
animation: orbitearth 20s infinite linear;
top: -20px;
}
.earth .planet {
width:40px;
height:40px;
background-image: url(http://www.waynedunkley.com/img/solar_system/earth.png?v=2);
animation: anti-spin 20s infinite linear;
}
.earth .shadow {
animation: shadow 20s infinite linear;
}
.mars {
position: absolute;
width: 706px;
z-index:5;
animation: orbitmars 30s infinite linear;
top: -11px;
}
.mars .planet {
width:22px;
height:22px;
background-image: url(http://www.waynedunkley.com/img/solar_system/mars.png);
animation: anti-spin 30s infinite linear;
}
.mars .shadow {
animation: shadow 30s infinite linear;
}
.jupiter {
position: absolute;
width: 1100px;
z-index:6;
animation: orbitjupiter 50s infinite linear;
top: -64px;
}
.jupiter .planet {
width:128px;
height:128px;
background-image: url(http://www.waynedunkley.com/img/solar_system/jupiter.png);
animation: anti-spin 50s infinite linear;
}
.jupiter .shadow {
animation: shadow 50s infinite linear;
}
Demo:
6. ASCII AT-AT
Chiến tranh giữa các vì sao đã truyền cảm hứng cho nhân viên AT-AT, được vẽ bằng cách sử dụng văn bản với màu sắc được tô điểm trong CSS. Một hiệu ứng funky.
HTML
<article>
<pre class="candybox2"> ________
_,.-Y | | Y-._
.-~" || | | | "-.
I" ""=="|" !""! "|"[]""| _____
L__ [] |..------|: _[----I" .-{"-.
I___| ..| l______|l_ [__L]_[I_/r(=}=-P
[L______L_[________]______j~ '-=c_]/=-^
\_I_j.--.\==I|I==_/.--L_]
[_((==)[`-----"](==)j
I--I"~~"""~~"I--I
|[]| |[]|
l__j l__j
|!!| |!!|
|..| |..|
([]) ([])
]--[ ]--[
[_L] [_L]
/|..|\ /|..|\
`=}--{=' `=}--{='
.-^--r-^-. .-^--r-^-.
</pre>
</article>
CSS
@import "compass/css3";
$color-alpha: #000;
$list-alpha:
rgba(#fff, .5),
#2ecc71,
#27ae60,
#f1c40f,
#f39c12,
#3498db,
#2980b9,
#e74c3c,
#c0392b,
#9b59b6,
#8e44ad,
#1abc9c,
#16a085
;
$unit-alpha: length($list-alpha);
$unit-beta: .5s;
$unit-gamma: 100% / ($unit-alpha);
article {
@extend %center;
}
.candybox2 {
font-weight: bold;
span {
@for $i from 1 through $unit-alpha {
&:nth-child(#{$unit-alpha}n+#{$i}) {
@include animation(candy linear $unit-beta infinite forwards (-$unit-beta / $unit-alpha * $i));
}
}
}
}
@include keyframes(candy) {
@for $i from 1 through ($unit-alpha + 1) {
#{$unit-gamma * ($i - 1)} {
color: darken(nth($list-alpha, ($i % $unit-alpha) + 1), 15%);
text-shadow:
.1em 0 .1em nth($list-alpha, ($i % $unit-alpha) + 1),
.15em 0 .1em nth($list-alpha, ($i % $unit-alpha) + 1)
;
}
}
}
JS
/**
*
* AT-AT
*
* You should play with $unit-beta.
*
* "nth-letter"-something is provided by lettering.js
* -> every letter is wrapped into a span!
* http://letteringjs.com
*
*
* 2013 by Tim Pietrusky
* timpietrusky.com
*/
/* Lettering.JS 0.6.1 by Dave Rupert - http://daverupert.com */
(function($){function injector(t,splitter,klass,after){var a=t.text().split(splitter),inject='';if(a.length){$(a).each(function(i,item){inject+='<span class="'+klass+(i+1)+'">'+item+'</span>'+after});t.empty().append(inject)}}var methods={init:function(){return this.each(function(){injector($(this),'','char','')})},words:function(){return this.each(function(){injector($(this),' ','word',' ')})},lines:function(){return this.each(function(){var r="eefec303079ad17405c889e092e105b0";injector($(this).children("br").replaceWith(r).end(),r,'line','')})}};$.fn.lettering=function(method){if(method&&methods[method]){return methods[method].apply(this,[].slice.call(arguments,1))}else if(method==='letters'||!method){return methods.init.apply(this,[].slice.call(arguments,0))}$.error('Method '+method+' does not exist on jQuery.lettering');return this}})(jQuery);
$(".candybox2").lettering();
Demo:
7. Pure CSS border animation
Đơn giản nhưng rất hiệu quả sử dụng border CSS để tạo ra một hình ảnh động load theo phong cách.
HTML(Pug)
.bb
CSS(Scss)
$anime-time: 8s;
$box-size: 200px;
$clip-distance: .05;
$clip-size: $box-size * (1 + $clip-distance * 2);
$path-width: 2px;
$main-color: #69ca62;
$codepen-logo-path: url('//blog.codepen.io/wp-content/uploads/2012/06/Button-White-Large.png');
%full-fill {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.bb {
@extend %full-fill;
width: $box-size;
height: $box-size;
margin: auto;
background: $codepen-logo-path no-repeat 50% / 70% rgba(#000, .1);
color: $main-color;
box-shadow: inset 0 0 0 1px rgba($main-color, .5);
&::before,
&::after {
@extend %full-fill;
content: '';
z-index: -1;
margin: -1 * $clip-distance * 100%;
box-shadow: inset 0 0 0 $path-width;
animation: clipMe $anime-time linear infinite;
}
&::before {
animation-delay: $anime-time * -.5;
}
// for debug
&:hover {
&::after,
&::before {
background-color: rgba(#f00, .3);
}
}
}
@keyframes clipMe {
0%, 100% {clip: rect(0px, $clip-size, $path-width, 0px); }
25% {clip: rect(0px, $path-width, $clip-size, 0px); }
50% {clip: rect($clip-size - $path-width, $clip-size, $clip-size, 0px); }
75% {clip: rect(0px, $clip-size, $clip-size, $clip-size - $path-width); }
}
/////
html,
body {
height: 100%;
}
body {
position: relative;
background-color: #0f222b;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
Demo:
8. SVG/CSS Loader
Bộ loader này sử dụng màu sắc thay đổi để tạo ấn tượng quay.
HTML
<div class="svg">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="svg" x="0px" y="0px" width="150px" height="150px" viewBox="0 0 213.235 241.176" enable-background="new 0 0 213.235 241.176" xml:space="preserve" fill="#0057B8">
<path d="M108.581,64.968V14.124l44.007,25.422L108.581,64.968"/>
<path fill-opacity="0.9" d="M153.591,92.101V41.258L109.582,66.68L153.591,92.101"/><path d="M155.586,92.062V41.221l44.009,25.42L155.586,92.062"/><path fill-opacity="0.7" d="M200.299,119.14V68.297l-44.004,25.421L200.299,119.14"/><path fill-opacity="0.85" d="M155.586,146.255V95.412l44.009,25.422L155.586,146.255"/><path fill-opacity="0.7" d="M200.299,173.35v-50.844l-44.004,25.422L200.299,173.35"/><path fill-opacity="0.6" d="M155.586,200.482v-50.84l44.009,25.417L155.586,200.482"/><path fill-opacity="0.5" d="M153.591,200.521v-50.84l-44.009,25.418L153.591,200.521"/><path fill-opacity="0.6" d="M108.581,227.696v-50.844l44.007,25.421L108.581,227.696"/><path fill-opacity="0.5" d="M106.62,227.696v-50.844l-44.005,25.421L106.62,227.696"/><path fill-opacity="0.7" d="M61.562,200.553V149.71l44.007,25.423L61.562,200.553"/><path fill-opacity="0.7" d="M59.709,200.56v-50.843l-44.008,25.422L59.709,200.56"/><path fill-opacity="0.7" d="M14.699,173.467v-50.843l44.01,25.42L14.699,173.467"/><path fill-opacity="0.5" d="M59.709,146.235V95.392l-44.008,25.42L59.709,146.235"/><path fill-opacity="0.7" d="M14.699,119.141V68.297l44.01,25.421L14.699,119.141"/><path fill-opacity="0.6" d="M59.709,92.101V41.258L15.701,66.68L59.709,92.101"/><path fill-opacity="0.85" d="M61.562,92.092V41.249l44.007,25.419L61.562,92.092"/>
<path fill-opacity="0.9" d="M106.62,64.968V14.124L62.614,39.546L106.62,64.968"/>
</svg>
</div>
CSS(Scss)
$pathNumber: 18;
// The color that will be at the beginning and the end of the loop.
$firstColor: #0057B8;
// The list of all the used colors. You can add or remove colors, the animation stays fluid. The $first-color must remain at the end of the list though.
$listColors: #F11E4A, #F8A527, #266D7F, #82A, $firstColor;
$delayCoeff: 0.1s;
body {
background-color: #0057B8;
text-align: center;
line-height: 100vh;
}
.svg {
display: inline-block;
height: 200px;
width: 200px;
line-height: 200px;
text-align: center;
background-color: #FFF;
border-radius: 50%;
}
#svg {
display: inline-block;
vertical-align: middle;
fill: $firstColor;
@for $i from 1 through 18 {
path:nth-child(#{$i}) {
animation: pweek $delayCoeff*$pathNumber linear infinite;
animation-delay: $i*$delayCoeff;
&:hover {
animation-play-state: paused;
}
}
}
}
@keyframes pweek {
0% {
fill: $firstColor;
}
@for $i from 1 through length($listColors) {
#{$i*(100/length($listColors))}% {
fill: nth($listColors, $i);
}
}
}
Demo:
Kết luận:
Để hiểu rõ hơn về Animation, cách tốt nhất là bạn hãy thực hành các ví dụ đơn giản. Có rất nhiều tài liệu hướng dẫn cũng như ví dụ mà bạn có thể dễ dàng tìm thấy trên mạng. Hai link mà tôi khuyên bạn nên đọc là:
https://docs.microsoft.com/en-us/dotnet/framework/wpf/graphics-multimedia/animation-overview
https://www.codeproject.com/Articles/140623/WPF-Tutorial-Styles-Triggers-Animation
Tham khảo:
All rights reserved
