css实现发光泡泡漂浮动画效果代码
代码语言：html
所属分类：动画
代码描述：css实现发光泡泡漂浮动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
background:#0d1135;
margin:0;
overflow:hidden
}
.bubble {
mix-blend-mode:lighten;
position:absolute;
top:0;
left:0
}
.bubble::before,.bubble::after {
content:"";
position:absolute;
top:0;
right:0;
bottom:0;
left:0
}
.bubble::before {
background:#0d1135
}
.bubble::after {
mix-blend-mode:color-dodge
}
.bubble:nth-child(0) {
-webkit-animation:anim-0 26s infinite alternate .4s ease-in-out;
animation:anim-0 26s infinite alternate .4s ease-in-out;
transform:translate3d(85vw,18vh,0);
width:95px;
height:95px
}
.bubble:nth-child(0)::after {
background:radial-gradient(#ffff82,#ffce72 40%,rgba(250,76,43,0) 70%)
}
@-webkit-keyframes anim-0 {
33% {
transform:translate3d(71vw,94vh,0)
}
66% {
transform:translate3d(51vw,26vh,0)
}
100% {
transform:translate3d(83vw,84vh,0)
}
}@keyframes anim-0 {
33% {
transform:translate3d(71vw,94vh,0)
}
66% {
transform:translate3d(51vw,26vh,0)
}
100% {
transform:translate3d(83vw,84vh,0)
}
}.bubble:nth-child(1) {
-webkit-animation:anim-1 38s infinite alternate .2s ease-in-out;
animation:anim-1 38s infinite alternate .2s ease-in-out;
transform:translate3d(39vw,48vh,0);
width:132px;
height:132px
}
.bubble:nth-child(1)::after {
background:radial-gradient(#fa4c2b,#6aff6e 40%,#010104 70%)
}
@-webkit-keyframes anim-1 {
33% {
transform:translate3d(64vw,13vh,0)
}
66% {
transform:translate3d(53vw,6vh,0)
}
100% {
transform:translate3d(68vw,32vh,0)
}
}@keyframes anim-1 {
33% {
transform:translate3d(64vw,13vh,0)
}
66% {
transform:translate3d(53vw,6vh,0)
}
100% {
transform:translate3d(68vw,32vh,0)
}
}.bubble:nth-child(2) {
-webkit-animation:anim-2 25s infinite alternate .6s ease-in-out;
animation:anim-2 25s infinite alternate .6s ease-in-out;
transform:translate3d(81vw,42vh,0);
width:88px;
height:88px
}
.bubble:nth-child(2)::after {
background:radial-gradient(#fa4c2b,#6aff6e 40%,#010104 70%)
}
@-webkit-keyframes anim-2 {
33% {
transform:translate3d(28vw,88vh,0)
}
66% {
transform:translate3d(7vw,67vh,0)
}
100% {
transform:translate3d(74vw,55vh,0)
}
}@keyframes anim-2 {
33% {
transform:translate3d(28vw,88vh,0)
}
66% {
transform:translate3d(7vw,67vh,0)
}
100% {
transform:translate3d(74vw,55vh,0)
}
}.bubble:nth-child(3) {
-webkit-animation:anim-3 45s infinite alternate .5s ease-in-out;
animation:anim-3 45s infinite alternate .5s ease-in-out;
transform:translate3d(94vw,100vh,0);
width:107px;
height:107px
}
.bubble:nth-child(3)::after {
background:radial-gradient(#ffff82,#ffce72 40%,rgba(250,76,43,0) 70%)
}
@-webkit-keyframes anim-3 {
33% {
transform:translate3d(29vw,26vh,0)
}
66% {
transform:translate3d(38vw,89vh,0)
}
100% {
transform:translate3d(47vw,15vh,0)
}
}@keyframes anim-3 {
33% {
transform:translate3d(29vw,26vh,0)
}
66% {
transform:translate3d(38vw,89vh,0)
}
100% {
transform:translate3d(47vw,15vh,0)
}
}.bubble:nth-child(4) {
-webkit-animation:anim-4 26s infinite alternate .1s ease-in-out;
animation:anim-4 26s infinite alternate .1s ease-in-out;
transform:translate3d(64vw,46vh,0);
width:112px;
height:112px
}
.bubble:nth-child(4)::after {
background:radial-gradient(#fa4c2b,#6aff6e 40%,#010104 70%)
}
@-webkit-keyframes anim-4 {
33% {
transform:translate3d(36vw,57vh,0)
}
66% {
transform:translate3d(36vw,40vh,0)
}
100% {
transform:translate3d(85vw,24vh,0)
}
}@keyframes anim-4 {
33% {
transform:translate3d(36vw,57vh,0)
}
66% {
transform:translate3d(36vw,40vh,0)
}
100% {
transform:translate3d(85vw,24vh,0)
}
}.bubble:nth-child(5) {
-webkit-animation:anim-5 37s infinite alternate .9s ease-in-out;
animation:anim-5 37s infinite alternate .9s ease-in-out;
transform:translate3d(6vw,98vh,0);
width:135px;
height:135px
}
.bubble:nth-child(5)::after {
background:radial-gradient(#ffff82,#ffce72 40%,rgba(250,76,43,0) 70%)
}
@-webkit-keyframes anim-5 {
33% {
transform:translate3d(21vw,53vh,0)
}
66% {
transform:translate3d(29vw,48vh,0)
}
100% {
transform:translate3d(55vw,26vh,0)
}
}@keyframes anim-5 {
33% {
transform:translate3d(21vw,53vh,0)
}
66% {
transform:translate3d(29vw,48vh,0)
}
100% {
transform:translate3d(55vw,26vh,0)
}
}.bubble:nth-child(6) {
-webkit-animation:anim-6 21s infinite alternate .5s ease-in-out;
animation:anim-6 21s infinite alternate .5s ease-in-out;
transform:translate3d(48vw,8vh,0);
width:34px;
height:34px
}
.bubble:nth-child(6)::after {
background:radial-gradient(#fa4c2b,#6aff6e 40%,#010104 70%)
}
@-webkit-keyframes anim-6 {
33% {
transform:translate3d(71vw,87vh,0)
}
66% {
transform:translate3d(12vw,88vh,0)
}
100% {
transform:translate3d(62vw,87vh,0)
}
}@keyframes anim-6 {
33% {
transform:translate3d(71vw,87vh,0)
}
66% {
transform:translate3d(12vw,88vh,0)
}
100% {
transform:translate3d(62vw,87vh,0)
}
}.bubble:nth-child(7) {
-webkit-animation:anim-7 47s infinite alternate .5s ease-in-out;
animation:anim-7 47s infinite alternate .5s ease-in-out;
transform:translate3d(83vw,83vh,0);
width:48px;
height:48px
}
.bubble:nth-child(7)::after {
background:radial-gradient(#ffff82,#ffce72 40%,rgba(250,76,43,0) 70%)
}
@-webkit-keyframes anim-7 {
33% {
transform:translate3d(12vw,78vh,0)
}
66% {
transform:translate3d(53vw,59vh,0)
}
100% {
transform:translate3d(49vw,88vh,0)
}
}@keyframes anim-7 {
33% {
transform:translate3d(12vw,78vh,0)
}
66% {
transform:translate3d(53vw,59vh,0)
}
100% {
transform:translate3d(49vw,88vh,0)
}
}.bubble:nth-child(8) {
-webkit-animation:anim-8 38s infinite alternate .9s ease-in-out;
animation:anim-8 38s infinite alternate .9s ease-in-out;
transform:translate3d(68vw,83vh,0);
width:94px;
height:94px
}
.bubble:nth-child(8)::after {
background:radial-gradient(#fa4c2b,#6aff6e 40%,#010104 70%)
}
@-webkit-keyframes anim-8 {
33% {
transform:translate3d(63vw,72vh,0)
}
66% {
transform:translate3d(96vw,63vh,0)
}
100% {
transform:translate3d(24vw,12vh,0)
}
}@keyframes anim-8 {
33% {
transform:translate3d(63vw,72vh,0)
}
66% {
transform:translate3d(96vw,63vh,0)
}
100% {
transform:translate3d(24vw,12vh,0)
}
}.bubble:nth-child(9) {
-webkit-animation:anim-9 47s infinite alternate .6s ease-in-out;
animation:anim-9 47s infinite alternate .6s ease-in-out;
transform:translate3d(59vw,47vh,0);
width:42px;
height:42px
}
.bubble:nth-child(9)::after {
background:radial-gradient(#ffff82,#ffce72 40%,rgba(250,76,43,0) 70%)
}
@-webkit-keyframes anim-9 {
33% {
transform:translate3d(45vw,22vh,0)
}
66% {
transform:translate3d(7vw,57vh,0)
}
100% {
transform:translate3d(4vw,33vh,0)
}
}@keyframes anim-9 {
33% {
transform:translate3d(45vw,22vh,0)
}
66% {
transform:translate3d(7vw,57vh,0)
}
100% {
transform:translate3d(4vw,33vh,0)
}
}.bubble:nth-child(10) {
-webkit-animation:anim-10 29s infinite alternate .2s ease-in-out;
animation:anim-10 29s infinite alternate .2s ease-in-out;
transform:translate3d(94vw,20vh,0);
width:104px;
height:104px
}
.bubble:nth-child(10)::after {
background:radial-gradient(#ffff82,#ffce72 40%,rgba(250,76,43,0) 70%)
}
@-webkit-keyframes anim-10 {
33% {
transform:translate3d(23vw,30vh,0)
}
66% {
transform:translate3d(31vw,23vh,0)
}
100% {
transform:translate3d(87vw,39vh,0)
}
}@keyframes anim-10 {
33% {
transform:translate3d(23vw,30vh,0)
}
66% {
transform:translate3d(31vw,23vh,0)
}
100% {
transform:translate3d(87vw,39vh,0)
}
}.bubble:nth-child(11) {
-webkit-animati.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0