css实现一个烟雾升起动画背景效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：css实现一个烟雾升起动画背景效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    @import url(https://fonts.googleapis.com/css?family=Lato:400,300);
body {
  background: #332B33;
}

.h {
  text-align: center;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/overlay.png");
  width: 500px;
  height: 500px;
  overflow: hidden;
  position: absolute;
  border: 4px solid white;
  left: 0;
  right: 0;
  margin: auto;
  top: 50%;
  transform: translateY(-50%);
}
.h h2, .h h1 {
  position: absolute;
  z-index: 3;
  text-transform: uppercase;
  text-shadow: 0px 10px rgba(0, 0, 0, 0.15);
  left: 0;
  right: 0;
  margin: auto;
  transform: translateY(-50%);
  font-family: lato;
  font-weight: 300;
  color: white;
}
.h h1 {
  letter-spacing: 28px;
  font-size: 14px;
  top: 50%;
}
.h h2 {
  letter-spacing: 10px;
  font-size: 10px;
  top: 60%;
}
.h .c {
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 400px;
  position: absolute;
  margin: auto;
}
.h .c:nth-of-type(1) {
  box-shadow: 3px 0px rgba(255, 255, 255, 0), 6px -5px rgba(10, 0, 0, 0);
  width: 6px;
  height: 1px;
  right: 10px;
  bottom: 10px;
  -webkit-filter: blur(8.3333333333px);
  -moz-filter: blur(8.3333333333px);
  -o-filter: blur(8.3333333333px);
  -ms-filter: blur(8.3333333333px);
  transform-origin: 4px 2px;
  -webkit-animation: spin 3s 0.1s linear infinite;
          animation: spin 3s 0.1s linear infinite;
  background: rgba(93, 34, 205, 0.9875);
}
.h .c:nth-of-type(2) {
  box-shadow: 3px 0px rgba(255, 255, 255, 0), 6px -5px rgba(10, 0, 0, 0);
  width: 12px;
  height: 2px;
  right: 20px;
  bottom: 20px;
  -webkit-filter: blur(8.6666666667px);
  -moz-filter: blur(8.6666666667px);
  -o-filter: blur(8.6666666667px);
  -ms-filter: blur(8.6666666667px);
  transform-origin: 8px 4px;
  -webkit-animation: spin 3s 0.2s linear infinite;
          animation: spin 3s 0.2s linear infinite;
  background: rgba(96, 35, 205, 0.975);
}
.h .c:nth-of-type(3) {
  box-shadow: 3px 0px rgba(255, 255, 255, 0), 6px -5px rgba(10, 0, 0, 0);
  width: 18px;
  height: 3px;
  right: 30px;
  bottom: 30px;
  -webkit-filter: blur(9px);
  -moz-filter: blur(9px);
  -o-filter: blur(9px);
  -ms-filter: blur(9px);
  transform-origin: 12px 6px;
  -webkit-animation: spin 3s 0.3s linear infinite;
          animation: spin 3s 0.3s linear infinite;
  background: rgba(99, 36, 205, 0.9625);
}
.h .c:nth-of-type(4) {
  box-shadow: 3px 0px rgba(255, 255, 255, 0), 6px -5px rgba(10, 0, 0, 0);
  width: 24px;
  height: 4px;
  right: 40px;
  bottom: 40px;
  -webkit-filter: blur(9.3333333333px);
  -moz-filter: blur(9.3333333333px);
  -o-filter: blur(9.3333333333px);
  -ms-filter: blur(9.3333333333px);
  transform-origin: 16px 8px;
  -webkit-animation: spin 3s 0.4s linear infinite;
          animation: spin 3s 0.4s linear infinite;
  background: rgba(102, 37, 205, 0.95);
}
.h .c:nth-of-type(5) {
  box-shadow: 3px 0px rgba(255, 255, 255, 0), 6px -5px rgba(10, 0, 0, 0);
  width: 30px;
  height: 5px;
  right: 50px;
  bottom: 50px;
  -webkit-filter: blur(9.6666666667px);
  -moz-filter: blur(9.6666666667px);
  -o-filter: blur(9.6666666667px);
  -ms-filter: blur(9.6666666667px);
  transform-origin: 20px 10px;
  -webkit-animation: spin 3s 0.5s linear infinite;
          animation: spin 3s 0.5s linear infinite;
  background: rgba(105, 38, 205, 0.9375);
}
.h .c:nth-of-type(6) {
  box-shadow: 3px 0px rgba(255, 255, 255, 0), 6px -5px rgba(10, 0, 0, 0);
  width: 36px;
  height: 6px;
  right: 60px;
  bottom: 60px;
  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  transform-origin: 24px 12px;
  -webkit-animation: spin 3s 0.6s linear infinite;
          animation: spin 3s 0.6s linear infinite;
  background: rgba(108, 39, 205, 0.925);
}
.h .c:nth-of-type(7) {
  box-shadow: 3px 0px rgba(255, 255, 255, 0), 6px -5px rgba(10, 0, 0, 0);
  width: 42px;
  height: 7px;
  right: 70px;
  bottom: 70px;
  -webkit-filter: blur(10.3333333333px);
  -moz-filter: blur(10.3333333333px);
  -o-filter: blur(10.3333333333px);
  -ms-filter: blur(10.3333333333px);
  transform-origin: 28px 14px;
  -webkit-animation: spin 3s 0.7s linear infinite;
          animation: spin 3s 0.7s linear infinite;
  background: rgba(111, 40, 205, 0.9125);
}
.h .c:nth-of-type(8) {
  box-shadow: 3px 0px rgba(255, 255, 255, 0), 6px -5px rgba(10, 0, 0, 0);
  width: 48px;
  height: 8px;
  right: 80px;
  bottom: 80px;
  -webkit-filter: blur(10.6666666667px);
  -moz-filter: blur(10.6666666667px);
  -o-filter: blur(10.6666666667px);
  -ms-filter: blur(10.6666666667px);
  transform-origin: 32px 16px;
  -webkit-animation: spin 3s 0.8s linear infinite;
          animation: spin 3s 0.8s linear infinite;
  background: rgba(114, 41, 205, 0.9);
}
.h .c:nth-of-type(9) {
  box-shadow: 3px 0px rgba(255, 255, 255, 0), 6px -5px rgba(10, 0, 0, 0);
  width: 54px;
  height: 9px;
  right: 90px;
  bottom: 90px;
  -webkit-filter: blur(11px);
  -moz-filter: blur(11px);
  -o-filter: blur(11px);
  -ms-filter: blur(11px);
  transform-origin: 36px 18px;
  -webkit-animation: spin 3s 0.9s linear infinite;
          animation: spin 3s 0.9s linear infinite;
  background: rgba(117, 42, 205, 0.8875);
}
.h .c:nth-of-type(10) {
  box-shadow: 3px 0px rgba(255, 255, 255, 0), 6px -5px rgba(10, 0, 0, 0);
  width: 60px;
  height: 10px;
  right: 100px;
  bottom: 100px;
  -webkit-filter: blur(11.3333333333px);
  -moz-filter: blur(11.3333333333px);
  -o-filter: blur(11.3333333333px);
  -ms-filter: blur(11.3333333333px);
  transform-origin: 40px 20px;
  -webkit-animation: spin 3s 1s linear infinite;
          animation: spin 3s 1s linear infinite;
  background: rgba(120, 43, 205, 0.875);
}
.h .c:nth-of-type(11) {
  box-shadow: 3px 0px rgba(255, 255, 255, 0), 6px -5px rgba(10, 0, 0, 0);
  width: 66px;
  height: 11px;
  right: 110px;
  bottom: 110px;
  -webkit-filter: blur(11.6666666667px);
  -moz-filter: blur(11.6666666667px);
  -o-filter: blur(11.6666666667px);
  -ms-filter: blur(11.6666666667px);
  transform-origin: 44px 22px;
  -webkit-animation: spin 3s 1.1s linear infinite;
          animation: spin 3s 1.1s linear infinite;
  background: rgba(123, 44, 205, 0.8625);
}
.h .c:nth-of-type(12) {
  box-shadow: 3px 0px rgba(255, 255, 255, 0), 6px -5px rgba(10, 0, 0, 0);
  width: 72px;
  height: 12px;
  right: 120px;
  bottom: 120px;
  -webkit-filter: blur(12px);
  -moz-filter: blur(12px);
  -o-filter: blur(12px);
  -ms-filter: blur(12px);
  transform-origin: 48px 24px;
  -webkit-animation: spin 3s 1.2s linear infinite;
          animation: spin 3s 1.2s linear infinite;
  background: rgba(126, 45, 205, 0.85);
}
.h .c:nth-of-type(13) {
  box-shadow: 3px 0px rgba(255, 255, 255, 0), 6px -5px rgba(10, 0, 0, 0);
  width: 78px;
  height: 13px;
  right: 130px;
  bottom: 130px;
  -webkit-filter: blur(12.3333333333px);
  -moz-filter: blur(12.3333333333px);
  -o-filter: blur(12.3333333333px);
  -ms-filter: blur(12.3333333333px);
  transform-origin: 52px 26px;
  -webkit-animation: spin 3s 1.3s linear infinite;
          animation: spin 3s 1.3s linear infinite;
  background: rgba(129, 46, 205, 0.8375);
}
.h .c:nth-of-type(14) {
  box-shadow: 3px 0px rgba(255, 255, 255, 0), 6px -5px rgba(10, 0, 0, 0);
  width: 84px;
  height: 14px;
  right: 140px;
  bottom: 140px;
  -webkit-filter: blur(12.6666666667px);
  -moz-filter: blur(12.6666666667px);
  -o-filter: blur(12.6666666667px);
  -ms-filter: blur(12.6666666667px);
  transform-origin: 56px 28px;
  -webkit-animation: spin 3s 1.4s linear infinite;
          animation: spin 3s 1.4s linear infinite;
  background: rgba(132, 47, 205, 0.825);
}
.h .c:nth-of-type(15) {
  box-shadow: 3px 0px rgba(255, 255, 255, 0), 6px -5px rgba(10, 0, 0, 0);
  width: 90px;
  height: 15px;
  right: 150px;
  bottom: 150px;
  -webkit-filter: blur(13px);
  -moz-filter: blur(13px);
  -o-filter: blur(13px);
  -ms-filter: blur(13px);
  transform-origin: 60px 30px;
  -webkit-animation: spin 3s 1.5s linear infinite;
          animation: spin 3s 1.5s linear infinite;
  background: rgba(135, 48, 205, 0.8125);
}
.h .c:nth-of-type(16) {
  box-shadow: 3px 0px rgba(255, 255, 255, 0), 6px -5px rgba(10, 0, 0, 0);
  width: 96px;
  height: 16px;
  right: 160px;
  bottom: 160px;
  -webkit-filter: blur(13.3333333333px);
  -moz-filter: blur(13.3333333333px);
  -o-filter: blur(13.3333333333px);
  -ms-filter: blur(13.3333333333px);
  transform-origin: 64px 32px;
  -webkit-animation: spin 3s 1.6s linear infinite;
          animation: spin 3s 1.6s linear infinite;
  background: rgba(138, 49, 205, 0.8);
}
.h .c:nth-of-type(17) {
  box-shadow: 3px 0px rgba(255, 255, 255, 0), 6px -5px rgba(10, 0, 0, 0);
  width: 102px;
  height: 17px;
  right: 170px;
  bottom: 170px;
  -webkit-filter: blur(13.6666666667px);
  -moz-filter: blur(13.6666666667px);
  -o-filter: blur(13.6666666667px);
  -ms-filter: blur(13.6666666667px);
  transform-origin: 68px 34px;
  -webkit-animation: spin 3s 1.7s linear infinite;
          animation: spin 3s 1.7s linear infinite;
  background: rgba(141, 50, 205, 0.7875);
}
.h .c:nth-of-type(18) {
  box-shadow: 3px 0px rgba(255, 255, 255, 0), 6px -5px rgba(10, 0, 0, 0);
  width: 108px;
  height: 18px;
  right: 180px;
  bottom: 180px;
  -webkit-filter: blur(14px);
  -moz-filter: blur(14px);
  -o-filter: blur(14px);
  -ms-filter: blur(14px);
  transform-origin: 72px 36px;
  -webkit-animation: spin 3s 1.8s linear infinite;
          animation: spin 3s 1.8s linear infinite;
  background: rgba(144, 51, 205, 0.775);
}
.h .c:nth-of-type(19) {
  box-shadow: 3px 0px rgba(255, 255, 255, 0), 6px -5px rgba(10, 0, 0, 0);
  width: 114px;
  height: 19px;
  right: 190px;
  bottom: 190px;
  -webkit-filter: blur(14.3333333333px);
  -moz-filter: blur(14.3333333333px);
  -o-filter: blur(14.3333333333px);
  -ms-filter: blur(14.3333333333px);
  transform-origin: 76px 38px;
  -webkit-animation: spin 3s 1.9s linear infinite;
          animation: spin 3s 1.9s linear infinite;
  background: rgba(147, 52, 205, 0.7625);
}
.h .c:nth-of-type(20) {
  box-shadow: 3px 0px rgba(255, 255, 255, 0), 6px -5px rgba(10, 0, 0, 0);
  width: 120px;
  height: 20px;
  right: 200px;
  bottom: 200px;
  -webkit-filter: blur(14.6666666667px);
  -moz-filter: blur(14.6666666667px);
  -o-filter: blur(14.6666666667px);
  -ms-filter: blur(14.6666666667px);
  transform-origin: 80px 40px;
  -webkit-animation: spin 3s 2s linear infinite;
          animation: spin 3s 2s linear infinite;
  background: rgba(150, 53, 205, 0.75);
}
.h .c:nth-of-type(21) {
  box-shadow: 3px 0px rgba(255, 255, 255, 0), 6px -5px rgba(10, 0, 0, 0);
  width: 126px;
  height: 21px;
  right: 210px;
  bottom: 210px;
  -webkit-filter: blur(15px);
  -moz-filter: blur(15px);
  -o-filter: blur(15px);
  -ms-filter: blur(15px);
  transform-origin: 84px 42px;
  -webkit-animation: spin 3s 2.1s linear infinite;
          animation: spin 3s 2.1s linear infinite;
  background: rgba(153, 54, 205, 0.7375);
}
.h .c:nth-of-type(22) {
  box-shadow: 3px 0px.........完整代码请登录后点击上方下载按钮下载查看