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 rgba(255, 255, 255, 0), 6px -5px rgba(10, 0, 0, 0);
  width: 132px;
  height: 22px;
  right: 220px;
  bottom: 220px;
  -webkit-filter: blur(15.3333333333px);
  -moz-filter: blur(15.3333333333px);
  -o-filter: blur(15.3333333333px);
  -ms-filter: blur(15.3333333333px);
  transform-origin: 88px 44px;
  -webkit-animation: spin 3s 2.2s linear infinite;
          animation: spin 3s 2.2s linear infinite;
  background: rgba(156, 55, 205, 0.725);
}
.h .c:nth-of-type(23) {
  box-shadow: 3px 0px rgba(255, 255, 255, 0), 6px -5px rgba(10, 0, 0, 0);
  width: 138px;
  height: 23px;
  right: 230px;
  bottom: 230px;
  -webkit-filter: blur(15.6666666667px);
  -moz-filter: blur(15.6666666667px);
  -o-filter: blur(15.6666666667px);
  -ms-filter: blur(15.6666666667px);
  transform-origin: 92px 46px;
  -webkit-animation: spin 3s 2.3s linear infinite;
          animation: spin 3s 2.3s linear infinite;
  background: rgba(159, 56, 205, 0.7125);
}
.h .c:nth-of-type(24) {
  box-shadow: 3px 0px rgba(255, 255, 255, 0), 6px -5px rgba(10, 0, 0, 0);
  width: 144px;
  height: 24px;
  right: 240px;
  bottom: 240px;
  -webkit-filter: blur(16px);
  -moz-filter: blur(16px);
  -o-filter: blur(16px);
  -ms-filter: blur(16px);
  transform-origin: 96px 48px;
  -webkit-animation: spin 3s 2.4s linear infinite;
          animation: spin 3s 2.4s linear infinite;
  background: rgba(162, 57, 205, 0.7);
}
.h .c:nth-of-type(25) {
  box-shadow: 3px 0px rgba(255, 255, 255, 0), 6px -5px rgba(10, 0, 0, 0);
  width: 150px;
  height: 25px;
  right: 250px;
  bottom: 250px;
  -webkit-filter: blur(16.3333333333px);
  -moz-filter: blur(16.3333333333px);
  -o-filter: blur(16.3333333333px);
  -ms-filter: blur(16.3333333333px);
  transform-origin: 100px 50px;
  -webkit-animation: spin 3s 2.5s linear infinite;
          animation: spin 3s 2.5s linear infinite;
  background: rgba(165, 58, 205, 0.6875);
}
.h .c:nth-of-type(26) {
  box-shadow: 3px 0px rgba(255, 255, 255, 0), 6px -5px rgba(10, 0, 0, 0);
  width: 156px;
  height: 26px;
  right: 260px;
  bottom: 260px;
  -webkit-filter: blur(16.6666666667px);
  -moz-filter: blur(16.6666666667px);
  -o-filter: blur(16.6666666667px);
  -ms-filter: blur(16.6666666667px);
  transform-origin: 104px 52px;
  -webkit-animation: spin 3s 2.6s linear infinite;
          animation: spin 3s 2.6s linear infinite;
  background: rgba(168, 59, 205, 0.675);
}
.h .c:nth-of-type(27) {
  box-shadow: 3px 0px rgba(255, 255, 255, 0), 6px -5px rgba(10, 0, 0, 0);
  width: 162px;
  height: 27px;
  right: 270px;
  bottom: 270px;
  -webkit-filter: blur(17px);
  -moz-filter: blur(17px);
  -o-filter: blur(17px);
  -ms-filter: blur(17px);
  transform-origin: 108px 54px;
  -webkit-animation: spin 3s 2.7s linear infinite;
          animation: spin 3s 2.7s linear infinite;
  background: rgba(171, 60, 205, 0.6625);
}
.h .c:nth-of-type(28) {
  box-shadow: 3px 0px rgba(255, 255, 255, 0), 6px -5px rgba(10, 0, 0, 0);
  width: 168px;
  height: 28px;
  right: 280px;
  bottom: 280px;
  -webkit-filter: blur(17.3333333333px);
  -moz-filter: blur(17.3333333333px);
  -o-filter: blur(17.3333333333px);
  -ms-filter: blur(17.3333333333px);
  transform-origin: 112px 56px;
  -webkit-animation: spin 3s 2.8s linear infinite;
          animation: spin 3s 2.8s linear infinite;
  background: rgba(174, 61, 205, 0.65);
}
.h .c:nth-of-type(29) {
  box-shadow: 3px 0px rgba(255, 255, 255, 0), 6px -5px rgba(10, 0, 0, 0);
  width: 174px;
  height: 29px;
  right: 290px;
  bottom: 290px;
  -webkit-filter: blur(17.6666666667px);
  -moz-filter: blur(17.6666666667px);
  -o-filter: blur(17.6666666667px);
  -ms-filter: blur(17.6666666667px);
  transform-origin: 116px 58px;
  -webkit-animation: spin 3s 2.9s linear infinite;
          animation: spin 3s 2.9s linear infinite;
  background: rgba(177, 62, 205, 0.6375);
}
.h .c:nth-of-type(30) {
  box-shadow: 3px 0px rgba(255, 255, 255, 0), 6px -5px rgba(10, 0, 0, 0);
  width: 180px;
  height: 30px;
  right: 300px;
  bottom: 300px;
  -webkit-filter: blur(18px);
  -moz-filter: blur(18px);
  -o-filter: blur(18px);
  -ms-filter: blur(18px);
  transform-origin: 120px 60px;
  -webkit-animation: spin 3s 3s linear infinite;
          animation: spin 3s 3s linear infinite;
  background: rgba(180, 63, 205, 0.625);
}
.h .c:nth-of-type(31) {
  box-shadow: 3px 0px rgba(255, 255, 255, 0), 6px -5px rgba(10, 0, 0, 0);
  width: 186px;
  height: 31px;
  right: 310px;
  bottom: 310px;
  -webkit-filter: blur(18.3333333333px);
  -moz-filter: blur(18.3333333333px);
  -o-filter: blur(18.3333333333px);
  -ms-filter: blur(18.3333333333px);
  transform-origin: 124px 62px;
  -webkit-animation: spin 3s 3.1s linear infinite;
          animation: spin 3s 3.1s linear infinite;
  background: rgba(183, 64, 205, 0.6125);
}
.h .c:nth-of-type(32) {
  box-shadow: 3px 0px rgba(255, 255, 255, 0), 6px -5px rgba(10, 0, 0, 0);
  width: 192px;
  height: 32px;
  right: 320px;
  bottom: 320px;
  -webkit-filter: blur(18.6666666667px);
  -moz-filter: blur(18.6666666667px);
  -o-filter: blur(18.6666666667px);
  -ms-filter: blur(18.6666666667px);
  transform-origin: 128px 64px;
  -webkit-animation: spin 3s 3.2s linear infinite;
          animation: spin 3s 3.2s linear infinite;
  background: rgba(186, 65, 205, 0.6);
}
.h .c:nth-of-type(33) {
  box-shadow: 3px 0px rgba(255, 255, 255, 0), 6px -5px rgba(10, 0, 0, 0);
  width: 198px;
  height: 33px;
  right: 330px;
  bottom: 330px;
  -webkit-filter: blur(19px);
  -moz-filter: blur(19px);
  -o-filter: blur(19px);
  -ms-filter: blur(19px);
  tra.........完整代码请登录后点击上方下载按钮下载查看