Hướng dẫn border animation css codepen - biên giới hoạt hình css codepen

Question

Giới thiệu:

Nội dung chính Show

1. Dodecahedron
2.Flat Design Camera
3.Day and Night Transition
3.Day and Night Transition
3.Day and Night Transition
3.Day and Night Transition
4. Star Wars: The Force Awakens

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


  
  
  
  
  
  
  
  


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

Demo:

3.Day and Night Transition

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

    }
});

Demo:

3.Day and Night Transition

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

HTML


    
    
    The Force Awakens

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

Demo:

3.Day and Night Transition

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

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

Demo:

JS

3.Day and Night Transition

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

Demo:

3.Day and Night Transition

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

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

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

$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

Demo:

CSS

JS

https://docs.microsoft.com/en-us/dotnet/framework/wpf/graphics-multimedia/animation-overview

https://www.codeproject.com/Articles/140623/WPF-Tutorial-Styles-Triggers-Animation

3.Day and Night Transition

https://webdesign.tutsplus.com/tutorials

programming css Border-bottom animation CSS Animation CSS CodePen Border-color animation CSS

Hướng dẫn border animation css codepen - biên giới hoạt hình css codepen

1. Dodecahedron

2.Flat Design Camera

3.Day and Night Transition

day night simulation

by Szymon Stypa, inspired by pens on Codepen

3.Day and Night Transition

The Force Awakens

3.Day and Night Transition

JS

3.Day and Night Transition

4. Star Wars: The Force Awakens

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