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) inset;
    transform: translate(0,4.5em) scale(0)
}

.pl__bubble:after {
    animation-name: bubble-rise-after;
    background-image: radial-gradient(25% 10% at 50% 5%,white 48%,rgba(255,255,255,0) 50%);
    width: 87.5%;
    height: 87.5%;
    transform: translate(-50%,-50%) translate(0,4.5em) rotate(-45deg) scale(0)
}

.pl__bubble:before,.pl__bubble-drop:before {
    width: 100%;
    height: 100%
}

.pl__bubble-drop:before {
    animation-name: bubble-drop;
    background-color: hsl(var(--hue),90%,80%);
    border-radius: .0625em;
    transform: translateY(0) scaleY(0);
    transform-origin: 50% 0
}

.pl__bubble:before,.pl__bubble:after,.pl__bubble-drop:before {
    content: "";
    display: block
}

.pl__bubble:nth-child(2):before,.pl__bubble:nth-child(2):after,.pl__bubble:nth-child(2) .pl__bubble-drop:before {
    animation-delay: .15s
}

.pl__bubble:nth-child(3):before,.pl__bubble:nth-child(3):after,.pl__bubble:nth-child(3) .pl__bubble-drop:before {
    animation-delay: .3s
}

@keyframes bubble-rise-before {
    from {
        animation-timing-function: cubic-bezier(0.12,0,0.39,0);
        transform: translate(0,4.5em) scale(0)
    }

    30% {
      .........完整代码请登录后点击上方下载按钮下载查看