旋转立方体加载动画

下载代码

html

css

分享到微信朋友圈

html

css

body {
  background-color: #000000;
}

.center {
  text-align: center;
  padding: 50px;
}

@keyframes bigcubemotion {
    0%   {transform: rotate(0turn)}
    5%   {transform: rotate(0turn)}  
    40%   {transform: rotate(0.5turn)}
    100%   {transform: rotate(0.5turn)}
}

#BigCube { 
  transform-origin: 50% 50%;
  animation-timing-function: ease-in-out; 
  animation-name: bigcubemotion;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes littlecubemotion {
    0%   {transform: rotate(0turn)}
    5%   {transform: rotate(0turn)}
    40%   {transform: rotate(0.5turn)} 
    66%   {transform: rotate(0.5turn) scale(2.07)}  
    97%   {transform: rotate(0.5turn) scale(2)}
    100%   {transform: rotate(0.5turn) scale(2)}
}

#LittleCube { 
  transform-origin: 50% 50%;
  animation-timing-function: ease-in-out; 
  animation-name: littlecubemotion;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes secretcubemotion {
    0%   {transform: scale(0)}
    5%   {transform: scale(0)}
    40%   {transform: scale(0)} 
    67%   {transform: scale(1.13)}
    95%   {transform: scale(1)} 
    100%   {transform: scale(1)}
}

#SecretCube { 
  transform-origin: 50% 50%;
  animation-timing-function: cubic;   
  animation-name: secretcubemotion;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg