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