Màu nền hoạt hình css codepen

Question

Hoạt ảnh CSS3 cho phép bạn thực hiện các hiệu ứng động với hầu hết các đối tượng HTML trên trang web

Nội dung chính Show

1. khối mười hai mặt
2. Máy ảnh thiết kế phẳng
3. Chuyển đổi ngày và đêm
4. Chiến tranh giữa các vì sao. Thần lực thức tỉnh
5. Hệ mặt trời 3D
6. ASCII AT-AT
7. Hoạt hình viền CSS thuần túy
8. Trình tải SVG/CSS

Một hoạt ảnh cho phép chuyển đổi đối tượng từ kiểu này sang kiểu khác. Trong một hoạt ảnh, bạn có thể thay đổi kiểu nhiều lần với nhiều thuộc tính CSS khác nhau

Dưới đây là 1 số CSS hoạt hình hay và đẹp mắt

1. khối mười hai mặt

Một hình chữ nhật tinh tế, đẹp, tạo ra một hình ảnh động hoàn toàn bằng 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)

Thử nghiệm

2. Máy ảnh thiết kế phẳng

Nhấn nút màn trập trên máy ảnh phẳng để xem nó tạo ra một bức ảnh bằng cách sử dụng CSS hình ảnh động

HTML


  
  
  
  
  
  
  
  


  
    
  
  
    My Portfolio

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')
  })
})

Thử nghiệm

3. Chuyển đổi ngày và đêm

Nhấn nút để xem chuyển đổi từ ban ngày sang đêm

HTML

  
  
    Scroll down...
                
                              
                              
                                    
                                    
                                    
                              
                              
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                              
                              
                        
                
                      day night simulation
                      by Szymon Stypa, inspired by pens on Codepen

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");

    }
});

Thử nghiệm

4. Chiến tranh giữa các vì sao. Thần lực thức tỉnh

Tiêu đề từ bộ phim Chiến tranh giữa các vì sao sắp được tạo bằng CSS, HTML và một ít JavaScript

HTML

________số 8

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

$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)

0

Thử nghiệm

5. Hệ mặt trời 3D

Một hệ mặt trời khác, lần này là 3D. Sử dụng đổ bóng tuyệt đẹp

HTML

$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)

1

CSS

$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)

2

Thử nghiệm

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. Funky funky

HTML

$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)

3

CSS

$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)

4

JS

$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)

5

Thử nghiệm

7. Hoạt hình viền CSS thuần túy

Đơn giản nhưng rất hiệu quả, sử dụng CSS viền để tạo ảnh động tải theo phong cách

HTML(Pug)

$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)

6

CSS(Scss)

$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)

7

Thử nghiệm

8. Trình tải SVG/CSS

Bộ tải này sử dụng màu sắc thay đổi để tạo ấn tượng quay

HTML

$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)

8

CSS(Scss)

$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)

9

Thử nghiệm

Kết luận

Để hiểu rõ hơn về Animation, cách tốt nhất là bạn hãy thực hiện 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 liên kết mà tôi khuyên bạn nên đọc là

programming css

Màu nền hoạt hình css codepen

1. khối mười hai mặt

2. Máy ảnh thiết kế phẳng

3. Chuyển đổi ngày và đêm

day night simulation

by Szymon Stypa, inspired by pens on Codepen

4. Chiến tranh giữa các vì sao. Thần lực thức tỉnh

5. Hệ mặt trời 3D

6. ASCII AT-AT

7. Hoạt hình viền CSS thuần túy

8. Trình tải SVG/CSS

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội