小猫加载动画

下载代码

html

css

分享到微信朋友圈

html

css

body {
  height: 100vh;
  font-family: 'Delius Swash Caps', cursive;
  text-align: center;
  color: #004466;
  background: #E4E5E6;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.wrapper-no7 {
  display: flex;
  justify-content: center;
}
.wrapper-no7 .animation-wrapper {
  display: flex;
}
.wrapper-no7 .animation-wrapper.notvisible {
  display: none;
}
.wrapper-no7 .cat {
  width: 80%;
  overflow: visible;
}
.wrapper-no7 .cat-wrapper {
  width: 300px;
}
.wrapper-no7 .eyes circle {
  fill: #fff;
}
.wrapper-no7 .frontlegs,
.wrapper-no7 .backlegs {
  opacity: 1;
}
.wrapper-no7 .logoani {
  align-self: flex-end;
  margin-left: -25px;
  font-size: 45px;
}
.wrapper-no7 .logo {
  font-size: 55px;
  opacity: 0;
  position: absolute;
  top: -40px;
}
.wrapper-no7 .logo.visible {
  opacity: 1;
  top: 40px;
  transition: all 1s;
}
.wrapper-no7 .restart {
  display: none;
  font-size: 20px;
  position: absolute;
  top: 50%;
  background-color: white;
  border: #bbbbbb 1px solid;
  box-shadow: none;
  padding: 20px;
  border-radius: 10px;
}
.wrapper-no7 .restart:hover {
  background-color: #ddd;
}
.wrapper-no7 .restart.visible {
  display: block;
}
.wrapper-no7 .layout {
  display: block;
  opacity: 1;
  width: 80%;
  position: absolute;
  top: 40px;
  transition: opacity 1s;
}
.wrapper-no7 .layout.notvisible {
  display: none;
  opacity: 0;
}
.wrapper-no7 .layout li {
  height: 15px;
  background-color: #bbbbbb;
}
.wrapper-no7 .layout ul {
  display: flex;
  margin: 0;
  padding: 0;
}
.wrapper-no7 .layout li {
  width: 50px;
  margin-left: 20px;
  list-style: none;
  background-color: #bbbbbb;
}
.wrapper-no7 .layout .layout__nav {
  display: flex;
  justify-content: space-between;
}
.wrapper-no7 .layout .layout__nav-left,
.wrapper-no7 .layout .layout__nav-right {
  width: 40%;
}
.wrapper-no7 .layout .layout__nav-left li:first-child {
  margin-left: 0;
}
.wrapper-no7 .layout .layout__nav-right {
  flex-direction: row-reverse;
}
.wrapper-no7 .layout .layout__title {
  width: 80%;
  height: 40px;
  background-color: #bbbbbb;
  margin-top: 150px;
  margin-left: auto;
  margin-right: auto;
}
.wrapper-no7 .layout .layout__content {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.wrapper-no7 .layout .layout__content div {
  width: 80%;
  height: 20px;
  background-color: #bbbbbb;
  margin-top: 20px;
}
.wrapper-no7 .layout .layout__content div:first-child {
  margin-top: 100px;
}
@media screen and (max-width: 500px) {
  .wrapper-no7 .layout {
    width: 100%;
  }
  .wrapper-no7 .layout .layout__nav,
  .wrapper-no7 .layout .layout__nav-left,
  .wrapper-no7 .layout .layout__nav-right {
    display: none;
  }
  .wrapper-no7 .layout .layout__title {
    margin-top: 100px;
  }
  .wrapper-no7 .layout .layout__content div:first-child {
    margin-top: 40px;
  }
}
@media screen and (max-width: 768px) {
  .wrapper-no7 .layout {
    width: 100%;
  }
  .wrapper-no7 .layout .layout__title {
    margin-top: 100px;
  }
  .wrapper-no7 .layout .layout__content div:first-child {
    margin-top: 40px;
  }
  .wrapper-no7 .layout .layout__title {
    margin-top: 70px;
  }
  .wrapper-no7 .layout .layout__nav {
    margin-top: 20px;
  }
  .wrapper-no7 .layout .layout__nav-left,
  .wrapper-no7 .layout .layout__nav-right {
    width: 35%;
  }
  .wrapper-no7 .logo {
    font-size: 45px;
  }
}

JavaScript

document.addEventListener("DOMContentLoaded", function(){
	const cat = document.querySelector('.cat');
	const body = document.querySelector('.body');
	const head = document.querySelector('.head');
	const eyes = document.querySelectorAll('.eyes circle');
	const eyel = document.querySelectorAll('.eyes-l');
	const eyer = document.querySelectorAll('.eyes-r');
	const ears = document.querySelectorAll('.ears');
	const earsl = document.querySelector('.ears-l');
	const earsr = document.querySelector('.ears-r');
	const tail = document.querySelector('.tail'); 
	const backlegs = document.querySelector('.backlegs');
	const frontlegs = document.querySelector('.frontlegs');
	const frontlegs1 = document.querySelector('.frontlegs1');
	const backcircle = document.querySelector('.body-backcircle');
	const frontcircle = document.querySelector('.body-frontcircle');
	const bodybetween = document.querySelector('.body-between');
	const logo = document.querySelector('.logoani');
	const logofix = document.querySelector('.logo');
	const resetbutton = document.querySelector('.restart');
	const ani = document.querySelector('.animation-wrapper');
	const layout = document.querySelector('.layout');

//start-animation
	function initAni(){
		const tl = new TimelineMax({delay:0.5, onComplete:logoVisible});
		const tl_eye = new TimelineMax({delay:1.5, repeat:3, repeatDelay: 1});
		resetit();
		logonotVisible();
		tl.to([head, eyes, ears], 0.2, {y:45, x:30})
		  .addLabel("twink")
		  .to(eyel, 0.1, {scaleY:1, y:45}, "twink-=0.1")
		  .to(eyel, 0.1, {scaleY:0.1, y:55}, "twink")
		  .to(eyel, 0.1, {scaleY:1, y:45}, "twink +=0.1")
		  .to(eyer, 0.1, {scaleY:0.1, y:55}, "twink")
		  .to(eyer, 0.1, {scaleY:1, y:45}, "twink +=0.1")
		  .to(earsl, 0.1, {y:8, x:-5, rotation:-20}, "twink +=0.1")
		  .to(earsr, 0.1, {y:16, x:-15, rotation:-60}, "twink +=0.1")
		  .set(frontlegs, {opacity: 1},"+=0.5")
		  .to(frontlegs1, 0.1, {y:35, x:15, rotation:-60})
		  .to(logo, 0.1, {x:5})
		  .to(frontlegs1, 0.1, {y:35, x:5, rotation:-60})
		  .to(frontlegs1, 0.1, {y:35, x:15, rotation:-60})
		  .to(logo, 0.3, {x:10})
		  .to(frontlegs1, 0.1, {y:35, x:-5, rotation:-60})
		  .to(frontlegs1, 0.1, {y:35, x:25, rotation:-60},"+=0.5")
		  .to(logo, 0.1, {x:12})
		  .to(frontlegs1, 0.1, {y:35, x:5, rotation:-60})
		  .to(frontlegs1, 0.1, {y:35, x:25, rotation:-60})
		  .to(logo, 0.3, {x:17})
		  .to(frontlegs1, 0.1, {y:35, x:-5, rotation:-60})
		  .to(frontlegs1, 0.1, {y:35, x:35, rotation:-60})
		  .to(logo, 0.1, {x:20})
		  .to(frontlegs1, 0.1, {y:35, x:-5, rotation:-60})
		  .to(frontlegs1, 0.1, {y:30, x:30, rotation:-60, scaleY: 1.2})
		  .to(logo, 0.5, {x:30})
		  .to(logo, 0.1, {rotation:10})
		  .to(frontlegs1, 0.1, {y:35, x:-15, rotation:-60, scaleY: 1})
		  .addLabel("wiggle")
		  .to([head, eyes, ears], 0.1, {y:48}, "wiggle")
		  .to(earsl, 0.1, {y:10, x:-5, rotation:-20}, "wiggle")
		  .to(earsr, 0.1, {y:18, x:-15, rotation:-60}, "wiggle")
		  .to(backcircle, 0.1, {y:30, x:40}, "wiggle =-0.2")
		  .to(backcircle, 0.1, {y:30, x:37}, "wiggle =-0.1")
		  .to(backcircle, 0.1, {y:35, x:40}, "wiggle")
		  .to(backcircle, 0.1, {y:30, x:40})
		  .to(backcircle, 0.1, {y:30, x:37})
		  .to(backcircle, 0.1, {y:35, x:40})
		  .to(backcircle, 0.1, {y:30, x:40})
		  .to(backcircle, 0.1, {y:30, x:37})
		  .to(backcircle, 0.1, {y:35, x:40})
		  .addLabel("logowiggle")
		  .to(frontlegs1, 0.1, {y:35, x:30, rotation:-60, scaleY: 1.25}, "logowiggle-=0.1")
		  .to(logo, 0.1, {rotation:60, x:70}, "logowiggle")
		  .to(logo, 0.5, {y:50}, "logowiggle+=0.1")
		  .to(logo, 0.1, {rotation:120}, "logowiggle+=0.1")
		  .to(logo, 0.1, {rotation:270}, "logowiggle+=0.2")
		  .to(logo, 0.5, {y:550, x:90}, "logowiggle+=0.2")
		  .to(logo, 0.5, {opacity: 0}, "logowiggle")
		  .to(frontlegs1, 0.1, {y:35, x:-15, rotation:-60, scaleY: 1})
		  .addLabel("jump")
		  .to([head, eyes, ears], 0.1, {y:5}, "jump")
		  .to(frontcircle, 0.1, {y:15, x:5}, "jump")
		  .to(bodybetween, 0.1, {rotation:-25, x:25, y:38}, "jump")
		  .to(frontlegs1, 0.1, {y:0, x:0, rotation:0}, "jump")
		  .to(tail, 0.1, {y:115, x:20, rotation:-10}, "jump")
		  .to(frontlegs, 0.1, {y:-20}, "jump+=0.1")

.to([head, eyes, ears, frontcircle], 0.1, {x:75, y:5}, "jump+=0.2")
		  .to(frontcircle, 0.1, {x:55, y:5}, "jump+=0.2")
		  .to(bodybetween, 0.1, {scaleX: 1, x:45, y:25, rotation:-15}, "jump+=0.2")
		  .to(backcircle, 0.1, {x:50, y:25}, "jump+=0.2")
		  .to(backlegs, 0.1, {x:70}, "jump+=0.2")

.to(frontlegs, 0.1, {x:250, y:5, rotation:-45}, "jump+=0.3")
		  .to(frontcircle, 0.1, {x:250}, "jump+=0.3")
		  .to(backcircle, 0.1, {y:0, x:250}, "jump+=0.3")
		  .to(bodybetween, 0.1, {y:0, x:255, scaleX: 1, rotation:4}, "jump+=0.3")
		  .to([head, eyes, ears], 0.1, {x:275}, "jump+=0.3")
		  .to(tail, 0.1, {y:25, x:230, rotation:15}, "jump+=0.3")
		  .to(backlegs, 0.1, {rotation:45, x:250, y:-25}, "jump+=0.3")

.to(frontlegs, 0.1, {x:340, y:105, rotation:-15}, "jump+=0.4")
		  .to(frontcircle, 0.1, {x:340, y:105}, "jump+=0.4")
		  .to(backcircle, 0.1, {y:60, x:350}, "jump+=0.4")
		  .to(bodybetween, 0.1, {y:70, x:380, scaleX: 1, rotation:35}, "jump+=0.4")
		  .to([head, eyes, ears], 0.1, {x:385, y:125}, "jump+=0.4")
		  .to(tail, 0.1, {y:50, x:370, rotation:35}, "jump+=0.4")
		  .to(backlegs, 0.1, {rotation:95, x:350, y:5}, "jump+=0.4")

.to(frontlegs, 0.1, {x:420, y:205, rotation:-15}, "jump+=0.5")
		  .to(frontcircle, 0.1, {x:420, y:205}, "jump+=0.5")
		  .to(backcircle, 0.1, {y:160, x:430}, "jump+=0.5")
		  .to(bodybetween, 0.1, {y:170, x:460, scaleX: 1, rotation:35}, "jump+=0.5")
		  .to([head, eyes, ears], 0.1, {x:465, y:225}, "jump+=0.5")
		  .to(tail, 0.1, {y:150, x:450, rotation:35}, "jump+=0.5")
		  .to(backlegs, 0.1, {rotation:95, x:430, y:95}, "jump+=0.5")

.to(cat, 0.5, {opacity: 0}, "jump+=0.3");
		//cat blinking
		tl_eye.addLabel("twinkall")
			.to(eyel, 0.1, {scaleY:0.1, y:55}, "twinkall")
			.to(eyel, 0.1, {scaleY:1, y:45}, "twinkall +=0.1")
		    .to(eyer, 0.1, {scaleY:0.1, y:55}, "twinkall")
		    .to(eyer, 0.1, {scaleY:1, y:45}, "twinkall +=0.1");
	}
	function logoVisible() {
  		logofix.classList.add("visible");
  		resetbutton.classList.add('visible');
  		ani.classList.add("notvisible");
  		layout.classList.remove("notvisible");
	}
	function logonotVisible(){
		logofix.classList.remove("visible");
		resetbutton.classList.remove('visible');
		ani.classList.remove("notvisible");
		layout.classList.add("notvisible");
	}
	function resetit(){
	  TweenMax.set([head, eyes, ears], {y:20, x:30});
	  TweenMax.set(backcircle, {y:35, x:40});
	  TweenMax.set(cat, {opacity: 1});
	  TweenMax.set(bodybetween, {scaleX: 0.5, y:35, x:45, rotation: 0});
	  TweenMax.set(frontcircle, {y:35, x:10});
	  TweenMax.set(head, {y:20});
	  TweenMax.set(eyel, {scaleY:1});
	  TweenMax.set(eyer, {scaleY:1});
	  TweenMax.set(ears, {y:20});
	  TweenMax.set(tail, {y:110, x:30, rotation:0});
	  TweenMax.set(backlegs, {rotation:-100, y:55, x:50});
	  TweenMax.set(frontlegs, {y:0, x:0, rotation:0});
	  TweenMax.set(logo, {opacity: 1, x:0, y:0, rotation: 0});
	  TweenMax.set(earsl, {x:0, y:0, rotation: 0});
	  TweenMax.set(earsr, {x:0, y:0, rotation: 0});
	}
	initAni();
	resetbutton.addEventListener("click", initAni);
});

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