css通知钟图标动画

下载代码

html

css

分享到微信朋友圈

html

css

body {
  background-color:#ffdd40;
}

.wrapper {
  position:relative;
  display: flex;
  width: 100%;
  height: 90vh;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

.bell .material-icons { 
  /* font-size:12rem !important; */
  /* font-size:36px !important; */
  font-size:16rem !important;
}

.bell {
  position:relative;
  display:inline-block;  
  /* border:dashed 1px rgba(0,0,0,.25); */
  margin:0;
  padding:0;  
}

.bell .anchor {
  transform-origin:center top;
  display:inline-block;
  margin:0;
  padding:0;       
}

.bell .layer-1 {
  color:#1d1e22;
  z-index:9;
  animation: animation-layer-1 5000ms infinite;      
  opacity:0;  
}

.bell .layer-2 {
  color:#1d1e22;
  z-index:8;
  position:absolute;top:0;left:0;   
  animation: animation-layer-2 5000ms infinite;    
}

.bell .layer-3 {
  color:#333642;
  z-index:7;
  position:absolute;top:0;left:0; 
  animation: animation-layer-3 5000ms infinite;    
}

@keyframes animation-layer-1 {
  0% { transform: rotate(0deg);opacity:0; }
  8.0% { transform: rotate(0deg);opacity:0; }
  12.0% { transform: rotate(42deg);opacity:.5; }
  16.0% { transform: rotate(-35deg);opacity:.4; }
  20.0% { transform: rotate(0deg);opacity:.1; }
  23.0% { transform: rotate(28deg);opacity:.3; }
  26.0% { transform: rotate(-20deg);opacity:.2; }
  29.0% { transform: rotate(0deg);opacity:.1; }
  31.0% { transform: rotate(16deg);opacity:0; }
  33.0% { transform: rotate(-12deg);opacity:0; }
  35.0% { transform: rotate(0deg);opacity:0; }	
  37.0% { transform: rotate(-6deg);opacity:0; }
  39.0% { transform: rotate(0deg);opacity:0; }
}

@keyframes animation-layer-2 {
  0% { transform: rotate(0deg); }
  8.0% { transform: rotate(0deg); }
  12.0% { transform: rotate(42deg); }
  16.0% { transform: rotate(-35deg); }
  20.0% { transform: rotate(0deg); }
  23.0% { transform: rotate(28deg); }
  26.0% { transform: rotate(-20deg); }
  29.0% { transform: rotate(0deg); }
  31.0% { transform: rotate(16deg); }
  33.0% { transform: rotate(-12deg); }
  35.0% { transform: rotate(0deg); }	
  37.0% { transform: rotate(-6deg); }
  39.0% { transform: rotate(0deg); }
  40.0% { transform: rotate(6deg); }
  44.0% { transform: rotate(-3deg); }
  49.0% { transform: rotate(2deg);}
  55.0% { transform: rotate(0deg); }
  62.0% { transform: rotate(1deg); }
  70.0% { transform: rotate(0deg); }  
}

@keyframes animation-layer-3 {
  0% { transform: rotate(0deg);opacity:1; }
  8.0% { transform: rotate(0deg);opacity:1; }
  12.0% { transform: rotate(52deg);opacity:.5; }
  16.0% { transform: rotate(-48deg);opacity:.4; }
  20.0% { transform: rotate(0deg);opacity:1; }
  23.0% { transform: rotate(42deg);opacity:.3; }
  26.0% { transform: rotate(-30deg);opacity:.2; }
  29.0% { transform: rotate(0deg);opacity:1; }
  31.0% { transform: rotate(26deg);opacity:.15; }
  33.0% { transform: rotate(-18deg);opacity:.1; }
  35.0% { transform: rotate(0deg);opacity:1; }	
  37.0% { transform: rotate(-12deg);opacity:.8; }
  40.0% { transform: rotate(6deg);opacity:1; }
  44.0% { transform: rotate(-3deg);opacity:.8; }
  49.0% { transform: rotate(2deg);opacity:1; }
  55.0% { transform: rotate(0deg);opacity:1; }
  62.0% { transform: rotate(1deg);opacity:1; }
  70.0% { transform: rotate(0deg);opacity:1; }
}

JavaScript

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