css+div实现晶莹剔透水珠气泡上升爆炸动画效果代码-html代码-BFW代码库

css+div实现晶莹剔透水珠气泡上升爆炸动画效果代码

代码语言：html

所属分类：动画

代码描述：css+div实现晶莹剔透水珠气泡上升爆炸动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>

* {
    border: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

:root {
    --hue: 223;
    --trans-dur: .3s;
    font-size: calc(16px+(24 - 16) *(100vw - 320px) /(2560 - 320))
}

.container {
    background: linear-gradient(hsl(var(--hue),90%,30%),hsl(var(--hue),90%,10%));
    color: hsl(var(--hue),90%,90%);
    display: flex;
    font: 1em/1.5 sans-serif;
    height: 60vh;
    min-height: 15em;
    transition: background-color var(--trans-dur),color var(--trans-dur)
}

.pl {
    display: flex;
    justify-content: space-between;
    align-items: center;
    filter: drop-shadow(0.9em .9em 4px rgba(0,0,0,0.4));
    margin: auto;
    width: 12em;
    height: 12em
}

.pl__bubble {
    position: relative;
    width: 3em;
    height: 3em
}

.pl__bubble-drop {
    width: .125em;
    height: .5em;
    transform: translate(-50%,-3em)
}

.pl__bubble-drop,.pl__bubble-drop:before {
    transform-origin: 50% 0
}

.pl__bubble-drop:nth-child(2) {
    transform: translate(-50%,-3em) rotate(51.4285714286deg)
}

.pl__bubble-drop:nth-child(3) {
    transform: translate(-50%,-3em) rotate(102.8571428571deg)
}

.pl__bubble-drop:nth-child(4) {
    transform: translate(-50%,-3em) rotate(154.2857142857deg)
}

.pl__bubble-drop:nth-child(5) {
    transform: translate(-50%,-3em) rotate(205.7142857143deg)
}

.pl__bubble-drop:nth-child(6) {
    transform: translate(-50%,-3em) rotate(257.1428571429deg)
}

.pl__bubble-drop:nth-child(7) {
    transform: translate(-50%,-3em) rotate(308.5714285714deg)
}

.pl__bubble:before,.pl__bubble:after,.pl__bubble-drop {
    position: absolute
}

.pl__bubble:before,.pl__bubble:after,.pl__bubble-drop:before {
    animation: bubble-rise-before 1.5s linear infinite
}

.pl__bubble:before,.pl__bubble:after {
    border-radius: 50%
}

.pl__bubble:after,.pl__bubble-drop {
    top: 50%;
    left: 50%
}

.pl__bubble:before {
    box-shadow: 0 -0.0625em 0 .0625em hsl(var(--hue),90%,90%) inset,0 0 0 .0625em hsl(var(--hue),90%,70%) inset,0 0 .25em .25em hsla(var(--hue),90%,70%,0.7) i.........完整代码请登录后点击上方下载按钮下载查看