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);
  -.........完整代码请登录后点击上方下载按钮下载查看