响应式邮件发送动画

拖动改变窗口大小查看效果

响应式，邮件

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1983
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

$(document).ready(function(){
		var width=$(window).width();
		var mail=$(".mail");
		if(width>=925){
			mail.removeClass("send seal stamp box");
			mail.addClass("write");
		}
		else if(width<925 && width>800){
			mail.removeClass("write send stamp box");
			mail.addClass("seal");
		}
		else if(width<800 && width>650){
			mail.removeClass("write send seal box");
			mail.addClass("stamp");
		}
		else if(width<650 && width>500){
			mail.removeClass("write send seal stamp");
			mail.addClass("box");
		}
		else{
			mail.removeClass("write seal stamp box");
			mail.addClass("send");
		}
	
	$(window).on("resize",function(){
		var width=$(window).width();
		var mail=$(".mail");
		if(width>=925){
			mail.removeClass("send seal stamp box");
			mail.addClass("write");
		}
		else if(width<925 && width>800){
			mail.removeClass("write send stamp box");
			mail.addClass("seal");
		}
		else if(width<800 && width>650){
			mail.removeClass("write send seal box");
			mail.addClass("stamp");
		}
		else if(width<650 && width>500){
			mail.removeClass("write send seal stamp");
			mail.addClass("box");
		}
		else{
			mail.removeClass("write seal stamp box");
			mail.addClass("send");
		}
	});
	
})

编译

CSS

html {
  background: #33CCCC;
}

.mail {
  position: absolute;
  left: 50%;
  top: 50%;
}

.write {
  width: 400px;
  height: 450px;
  border: 1px solid white;
  background: #eaeaea;
  margin-left: -200px;
  margin-top: -225px;
  box-shadow: 5px 5px 0px #30c2c2;
  -moz-transform: rotateY(-360deg);
  -ms-transform: rotateY(-360deg);
  -webkit-transform: rotateY(-360deg);
  transform: rotateY(-360deg);
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.write:before {
  width: 300px;
  height: 5px;
  left: 50px;
  top: 20px;
  background: #eaeaea;
  content: '';
  position: absolute;
  -moz-animation: write 4s linear infinite;
  -webkit-animation: write 4s linear infinite;
  animation: write 4s linear infinite;
}
.write:after {
  content: '';
  position: absolute;
  left: 250px;
  width: 100px;
  height: 100px;
  background: white;
  border-radius: 50%;
  top: 300px;
  box-shadow: 2px 2px 0px lightgray;
  -moz-animation: sign 4s linear infinite;
  -webkit-animation: sign 4s linear infinite;
  animation: sign 4s linear infinite;
}

@-moz-keyframes sign {
  0%,55% {
    opacity: 0;
  }
  60%,100% {
    opacity: 1;
  }
}
@-webkit-keyframes sign {
  0%,55% {
    opacity: 0;
  }
  60%,100% {
    opacity: 1;
  }
}
@keyframes sign {
  0%,55% {
    opacity: 0;
  }
  60%,100% {
    opacity: 1;
  }
}
@-moz-keyframes write {
  0% {
    box-shadow: 0px 3px 0px #eaeaea, 0px 30px 0px #eaeaea, 0px 33px 0px #eaeaea, 0px 60px 0px #eaeaea, 0px 63px 0px #eaeaea, 0px 90px 0px #eaeaea, 0px 93px 0px #eaeaea, 0px 120px 0px #eaeaea, 0px 123px 0px #eaeaea, 0px 150px 0px #eaeaea, 0px 153px 0px #eaeaea;
  }
  5% {
    box-shadow: 0px 3px 0px #333, 0px 30px 0px #eaeaea, 0px 33px 0px #eaeaea, 0px 60px 0px #eaeaea, 0px 63px 0px #eaeaea, 0px 90px 0px #eaeaea, 0px 93px 0px #eaeaea, 0px 120px 0px #eaeaea, 0px 123px 0px #eaeaea, 0px 150px 0px #eaeaea, 0px 153px 0px #eaeaea;
  }
  15% {
    box-shadow: 0px 3px 0px #333, 0px 30px 0px #eaeaea, 0px 33px 0px #333, 0px 60px 0px #eaeaea, 0px 63px 0px #eaeaea, 0px 90px 0px #eaeaea, 0px 93px 0px #eaeaea, 0px 120px 0px #eaeaea, 0px 123px 0px #eaeaea, 0px 150px 0px #eaeaea, 0px 153px 0px #eaeaea;
  }
  25% {
    box-shadow: 0px 3px 0px #333, 0px 30px 0px #eaeaea, 0px 33px 0px #333, 0px 60px 0px #eaeaea, 0px 63px 0px #333, 0px 90px 0px #eaeaea, 0px 93px 0px #eaeaea, 0px 120px 0px #eaeaea, 0px 123px 0px #eaeaea, 0px 150px 0px #eaeaea, 0px 153px 0px #eaeaea;
  }
  35% {
    box-shadow: 0px 3px 0px #333, 0px 30px 0px #eaeaea, 0px 33px 0px #333, 0px 60px 0px #eaeaea, 0px 63px 0px #333, 0px 90px 0px #eaeaea, 0px 93px 0px #333, 0px 120px 0px #eaeaea, 0px 123px 0px #eaeaea, 0px 150px 0px #eaeaea, 0px 153px 0px #eaeaea;
  }
  45% {
    box-shadow: 0px 3px 0px #333, 0px 30px 0px #eaeaea, 0px 33px 0px #333, 0px 60px 0px #eaeaea, 0px 63px 0px #333, 0px 90px 0px #eaeaea, 0px 93px 0px #333, 0px 120px 0px #eaeaea, 0px 123px 0px #333, 0px 150px 0px #eaeaea, 0px 153px 0px #eaeaea;
  }
  55%,100% {
    box-shadow: 0px 3px 0px #333, 0px 30px 0px #eaeaea, 0px 33px 0px #333, 0px 60px 0px #eaeaea, 0px 63px 0px #333, 0px 90px 0px #eaeaea, 0px 93px 0px #333, 0px 120px 0px #eaeaea, 0px 123px 0px #333, 0px 150px 0px #eaeaea, 0px 153px 0px #333;
  }
}
@-webkit-keyframes write {
  0% {
    box-shadow: 0px 3px 0px #eaeaea, 0px 30px 0px #eaeaea, 0px 33px 0px #eaeaea, 0px 60px 0px #eaeaea, 0px 63px 0px #eaeaea, 0px 90px 0px #eaeaea, 0px 93px 0px #eaeaea, 0px 120px 0px #eaeaea, 0px 123px 0px #eaeaea, 0px 150px 0px #eaeaea, 0px 153px 0px #eaeaea;
  }
  5% {
    box-shadow: 0px 3px 0px #333, 0px 30px 0px #eaeaea, 0px 33px 0px #eaeaea, 0px 60px 0px #eaeaea, 0px 63px 0px #eaeaea, 0px 90px 0px #eaeaea, 0px 93px 0px #eaeaea, 0px 120px 0px #eaeaea, 0px 123px 0px #eaeaea, 0px 150px 0px #eaeaea, 0px 153px 0px #eaeaea;
  }
  15% {
    box-shadow: 0px 3px 0px #333, 0px 30px 0px #eaeaea, 0px 33px 0px #333, 0px 60px 0px #eaeaea, 0px 63px 0px #eaeaea, 0px 90px 0px #eaeaea, 0px 93px 0px #eaeaea, 0px 120px 0px #eaeaea, 0px 123px 0px #eaeaea, 0px 150px 0px #eaeaea, 0px 153px 0px #eaeaea;
  }
  25% {
    box-shadow: 0px 3px 0px #333, 0px 30px 0px #eaeaea, 0px 33px 0px #333, 0px 60px 0px #eaeaea, 0px 63px 0px #333, 0px 90px 0px #eaeaea, 0px 93px 0px #eaeaea, 0px 120px 0px #eaeaea, 0px 123px 0px #eaeaea, 0px 150px 0px #eaeaea, 0px 153px 0px #eaeaea;
  }
  35% {
    box-shadow: 0px 3px 0px #333, 0px 30px 0px #eaeaea, 0px 33px 0px #333, 0px 60px 0px #eaeaea, 0px 63px 0px #333, 0px 90px 0px #eaeaea, 0px 93px 0px #333, 0px 120px 0px #eaeaea, 0px 123px 0px #eaeaea, 0px 150px 0px #eaeaea, 0px 153px 0px #eaeaea;
  }
  45% {
    box-shadow: 0px 3px 0px #333, 0px 30px 0px #eaeaea, 0px 33px 0px #333, 0px 60px 0px #eaeaea, 0px 63px 0px #333, 0px 90px 0px #eaeaea, 0px 93px 0px #333, 0px 120px 0px #eaeaea, 0px 123px 0px #333, 0px 150px 0px #eaeaea, 0px 153px 0px #eaeaea;
  }
  55%,100% {
    box-shadow: 0px 3px 0px #333, 0px 30px 0px #eaeaea, 0px 33px 0px #333, 0px 60px 0px #eaeaea, 0px 63px 0px #333, 0px 90px 0px #eaeaea, 0px 93px 0px #333, 0px 120px 0px #eaeaea, 0px 123px 0px #333, 0px 150px 0px #eaeaea, 0px 153px 0px #333;
  }
}
@keyframes write {
  0% {
    box-shadow: 0px 3px 0px #eaeaea, 0px 30px 0px #eaeaea, 0px 33px 0px #eaeaea, 0px 60px 0px #eaeaea, 0px 63px 0px #eaeaea, 0px 90px 0px #eaeaea, 0px 93px 0px #eaeaea, 0px 120px 0px #eaeaea, 0px 123px 0px #eaeaea, 0px 150px 0px #eaeaea, 0px 153px 0px #eaeaea;
  }
  5% {
    box-shadow: 0px 3px 0px #333, 0px 30px 0px #eaeaea, 0px 33px 0px #eaeaea, 0px 60px 0px #eaeaea, 0px 63px 0px #eaeaea, 0px 90px 0px #eaeaea, 0px 93px 0px #eaeaea, 0px 120px 0px #eaeaea, 0px 123px 0px #eaeaea, 0px 150px 0px #eaeaea, 0px 153px 0px #eaeaea;
  }
  15% {
    box-shadow: 0px 3px 0px #333, 0px 30px 0px #eaeaea, 0px 33px 0px #333, 0px 60px 0px #eaeaea, 0px 63px 0px #eaeaea, 0px 90px 0px #eaeaea, 0px 93px 0px #eaeaea, 0px 120px 0px #eaeaea, 0px 123px 0px #eaeaea, 0px 150px 0px #eaeaea, 0px 153px 0px #eaeaea;
  }
  25% {
    box-shadow: 0px 3px 0px #333, 0px 30px 0px #eaeaea, 0px 33px 0px #333, 0px 60px 0px #eaeaea, 0px 63px 0px #333, 0px 90px 0px #eaeaea, 0px 93px 0px #eaeaea, 0px 120px 0px #eaeaea, 0px 123px 0px #eaeaea, 0px 150px 0px #eaeaea, 0px 153px 0px #eaeaea;
  }
  35% {
    box-shadow: 0px 3px 0px #333, 0px 30px 0px #eaeaea, 0px 33px 0px #333, 0px 60px 0px #eaeaea, 0px 63px 0px #333, 0px 90px 0px #eaeaea, 0px 93px 0px #333, 0px 120px 0px #eaeaea, 0px 123px 0px #eaeaea, 0px 150px 0px #eaeaea, 0px 153px 0px #eaeaea;
  }
  45% {
    box-shadow: 0px 3px 0px #333, 0px 30px 0px #eaeaea, 0px 33px 0px #333, 0px 60px 0px #eaeaea, 0px 63px 0px #333, 0px 90px 0px #eaeaea, 0px 93px 0px #333, 0px 120px 0px #eaeaea, 0px 123px 0px #333, 0px 150px 0px #eaeaea, 0px 153px 0px #eaeaea;
  }
  55%,100% {
    box-shadow: 0px 3px 0px #333, 0px 30px 0px #eaeaea, 0px 33px 0px #333, 0px 60px 0px #eaeaea, 0px 63px 0px #333, 0px 90px 0px #eaeaea, 0px 93px 0px #333, 0px 120px 0px #eaeaea, 0px 123px 0px #333, 0px 150px 0px #eaeaea, 0px 153px 0px #333;
  }
}
.seal {
  width: 350px;
  height: 225px;
  background: white;
  margin-left: -175px;
  margin-top: -112px;
  box-shadow: inset 0px 10px 0px #aaa, inset 0px 18px 0px #eee, 5px 5px 0px #2eb8b8;
  -moz-transform: rotateY(360deg);
  -ms-transform: rotateY(360deg);
  -webkit-transform: rotateY(360deg);
  transform: rotateY(360deg);
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.seal:after {
  content: '';
  position: absolute;
  width: 250px;
  height: 100px;
  background: #fbfbfb;
  top: -90px;
  left: 50px;
  -moz-animation: paper 3s linear infinite;
  -webkit-animation: paper 3s linear infinite;
  animation: paper 3s linear infinite;
}
.seal:before {
  position: absolute;
  content: '';
  border-left: 175px solid transparent;
  border-right: 175px solid transparent;
  border-bottom: 100px solid #eaeaea;
  border-top: 0px solid #eaeaea;
  top: -100px;
  -moz-animation: seal 3s linear infinite;
  -webkit-animation: seal 3s linear infinite;
  animation: seal 3s linear infinite;
}

@-moz-keyframes paper {
  20%,100% {
    height: 0;
    -moz-transform: translateY(100px);
    transform: translateY(100px);
  }
}
@-webkit-keyframes paper {
  20%,100% {
    height: 0;
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
  }
}
@keyframes paper {
  20%,100% {
    height: 0;
    -moz-transform: translateY(100px);
    -ms-transform: translateY(100px);
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
  }
}
@-moz-keyframes seal {
  0%, 55% {
    border-top: 0px solid #eaeaea;
  }
  45%, 100% {
    border-bottom: 0px solid #eaeaea;
  }
  45% {
    border-bottom: 0px solid lightgray;
    -moz-transform: translateY(100px);
    transform: translateY(100px);
  }
  50%,100% {
    -moz-transform: translateY(100px);
    transform: translateY(100px);
  }
  60%,100% {
    border-top: 100px solid whitesmoke;
  }
}
@-webkit-keyframes seal {
  0%, 55% {
    border-top: 0px solid #eaeaea;
  }
  45%, 100% {
    border-bottom: 0px solid #eaeaea;
  }
  45% {
    border-bottom: 0px solid lightgray;
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
  }
  50%,100% {
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
  }
  60%,100% {
    border-top: 100px solid whitesmoke;
  }
}
@keyframes seal {
  0%, 55% {
    border-top: 0px solid #eaeaea;
  }
  45%, 100% {
    border-bottom: 0px solid #eaeaea;
  }
  45% {
    border-bottom: 0px solid lightgray;
    -moz-transform: translateY(100px);
    -ms-transform: translateY(100px);
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
  }
  50%,100% {
    -moz-transform: translateY(100px);
    -ms-transform: translateY(100px);
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
  }
  60%,100% {
    border-top: 100px solid whitesmoke;
  }
}
.stamp {
  width: 200px;
  height: 125px;
  background: white;
  margin-left: -100px;
  margin-top: -75px;
  box-shadow: 5px 5px 0px #2eb8b8;
  -moz-transform: rotateY(720deg);
  -ms-transform: rotateY(720deg);
  -webkit-transform: rotateY(720deg);
  transform: rotateY(720deg);
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.stamp:before {
  width: 100px;
  height: 10px;
  background: white;
  left: 50px;
  content: '';
  position: absolute;
  top: 40px;
  -moz-animation: address 3s linear infinite;
  -webkit-animation: address 3s linear infinite;
  animation: address 3s linear infinite;
}
.stamp:after {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  background: red;
  right: 3px;
  top: 3px;
  box-shadow: -1px 1px 0px #aaa, inset 0px 0px 0px 2px red, inset 0px 0px 0px 4px #e60000, inset 0px 0px 0px 7px #ff3333;
}

@-moz-keyframes address {
  0% {
    box-shadow: 0px 0px 0px white, 0px 2px 0px white,0px 12px 0px white,0px 14px 0px white, 0px 24px 0px white, 0px 26px 0px white;
  }
  10% {
    box-shadow: 0px 0px 0px white, 0px 2px 0px black,0px 12px 0px white,0px 14px 0px white, 0px 24px 0px white, 0px 26px 0px white;
  }
  20% {
    box-shadow: 0px 0px 0px white, 0px 2px 0px black,0px 12px 0px white,0px 14px 0px black, 0px 24px 0px white, 0px 26px 0px white;
  }
  30%,100% {
    box-shadow: 0px 0px 0px white, 0px 2px 0px black,0px 12px 0px white,0px 14px 0px black, 0px 24px 0px white, 0px 26px 0px black;
  }
}
@-webkit-keyframes address {
  0% {
    box-shadow: 0px 0px 0px white, 0px 2px 0px white,0px 12px 0px white,0px 14px 0px white, 0px 24px 0px white, 0px 26px 0px white;
  }
  10% {
    box-shadow: 0px 0px 0px white, 0px 2px 0px black,0px 12px 0px white,0px 14px 0px white, 0px 24px 0px white, 0px 26px 0px white;
  }
  20% {
    box-shadow: 0px 0px 0px white, 0px 2px 0px black,0px 12px 0px white,0px 14px 0px black, 0px 24px 0px white, 0px 26px 0px white;
  }
  30%,100% {
    box-shadow: 0px 0px 0px white, 0px 2px 0px black,0px 12px 0px white,0px 14px 0px black, 0px 24px 0px white, 0px 26px 0px black;
  }
}
@keyframes address {
  0% {
    box-shadow: 0px 0px 0px white, 0px 2px 0px white,0px 12px 0px white,0px 14px 0px white, 0px 24px 0px white, 0px 26px 0px white;
  }
  10% {
    box-shadow: 0px 0px 0px white, 0px 2px 0px black,0px 12px 0px white,0px 14px 0px white, 0px 24px 0px white, 0px 26px 0px white;
  }
  20% {
    box-shadow: 0px 0px 0px white, 0px 2px 0px black,0px 12px 0px white,0px 14px 0px black, 0px 24px 0px white, 0px 26px 0px white;
  }
  30%,100% {
    box-shadow: 0px 0px 0px white, 0px 2px 0px black,0px 12px 0px white,0px 14px 0px black, 0px 24px 0px white, 0px 26px 0px black;
  }
}
.box {
  margin-left: -40px;
  margin-top: -75px;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  -moz-transform: rotateY(1080deg);
  -ms-transform: rotateY(1080deg);
  -webkit-transform: rotateY(1080deg);
  transform: rotateY(1080deg);
}
.box:before {
  content: '';
  position: absolute;
  width: 60px;
  height: 80px;
  background: #0061c2;
  box-shadow: 5px 0px 0px #003d7a, inset 0px 10px 0px #003366, inset 0px 13px 0px #0066cc, 5px -45px 0px -9px white;
  -moz-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
  left: 40px;
  top: 30px;
  -moz-animation: close 4s linear infinite;
  -webkit-animation: close 4s linear infinite;
  animation: close 4s linear infinite;
}
.box:after {
  content: '';
  position: absolute;
  width: 80px;
  height: 150px;
  background: #0052a3;
  border-radius: 10px 45px 0 0;
  box-shadow: 0px 3px 0px #2eb8b8, 0px 14px 0px #33CCCC, -4px 12px 0px #0066cc, 4px 12px 0px #0066cc, 2px -5px 0px #00478f, inset -3px 0px #00478f, inset 0px -3px 0px #00478f;
}

@-moz-keyframes close {
  30%,50% {
    -moz-transform: rotate(0deg) translateX(-30px);
    transform: rotate(0deg) translateX(-30px);
    box-shadow: 5px 0px 0px #003d7a, inset 0px 10px 0px #003366, inset 0px 13px 0px #0066cc, 0px 0px 0px -9px white;
  }
}
@-webkit-keyframes close {
  30%,50% {
    -webkit-transform: rotate(0deg) translateX(-30px);
    transform: rotate(0deg) translateX(-30px);
    box-shadow: 5px 0px 0px #003d7a, inset 0px 10px 0px #003366, inset 0px 13px 0px #0066cc, 0px 0px 0px -9px white;
  }
}
@keyframes close {
  30%,50% {
    -moz-transform: rotate(0deg) translateX(-30px);
    -ms-transform: rotate(0deg) translateX(-30px);
    -webkit-transform: rotate(0deg) translateX(-30px);
    transform: rotate(0deg) translateX(-30px);
    box-shadow: 5px 0px 0px #003d7a, inset 0px 10px 0px #003366, inset 0px 13px 0px #0066cc, 0px 0px 0px -9px white;
  }
}
.send {
  width: 60px;
  height: 40px;
  background: white;
  margin-left: -30px;
  margin-top: -20px;
  box-shadow: inset -10px 10px 0px -2px #fafafa, inset 10px 10px 0px white, inset 0px 15px 0px white, inset 0px -10px 0px white, inset -5px 0px 0px white, inset -15px 0px 0px #ededed, 0px -2px 0px #777, -2px 0px 0px #999, -5px 5px 0px #2eb8b8, 2px 0px 0px #ddd, 3px -11px 0px 26px #33CCCC, 3px -10px 0px 25px #2eb8b8, 3px -9px 0px 25px #222;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  -moz-transform: rotateY(1440deg);
  -ms-transform: rotateY(1440deg);
  -webkit-transform: rotateY(1440deg);
  transform: rotateY(1440deg);
}
.send:before {
  width: 15px;
  height: 20px;
  background: #2eb8b8;
  border: 2px solid white;
  content: '';
  position: absolute;
  left: 62px;
  top: 2px;
  box-shadow: 1px 2px 0px #ddd, 2px 10px 0px 2px white, 0px 10px 0px 2px #aaa, 10px 10px 0px -2px #fafafa, 7px 12px 0px -1px red, 0px 20px 0px #2eb8b8;
}
.send:after {
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  background: #ccc;
  border-radius: 50%;
  top: 40px;
  left: 10px;
  box-shadow: 0px 0px 0px 2px #999,0px 0px 0px 6px #333, 0px 0px 0px 8px black, 40px 0px 0px 0px #ccc,40px 0px 0px 2px #999, 40px 0px 0px 6px #333, 40px 0px 0px 8px black;
  -moz-animation: drive 3s linear infinite;
  -webkit-animation: drive 3s linear infinite;
  animation: drive 3s linear infinite;
}

@-moz-keyframes drive {
  10%, 15%,20% {
    top: 40px;
  }
  12%,17% {
    top: 37px;
  }
  30%,35% {
    top: 40px;
  }
  32% {
    top: 37px;
  }
}
@-webkit-keyframes drive {
  10%, 15%,20% {
    top: 40px;
  }
  12%,17% {
    top: 37px;
  }
  30%,35% {
    top: 40px;
  }
  32% {
    top: 37px;
  }
}
@keyframes drive {
  10%, 15%,20% {
    top: 40px;
  }
  12%,17% {
    top: 37px;
  }
  30%,35% {
    top: 40px;
  }
  32% {
    top: 37px;
  }
}

HTML

拖动改变窗口大小查看效果