html - Animation 仅适用于 firefox，在其他浏览器中 animation Z4757FE07FD492A8BEEZEA6A760D683D6

body { background-color:#5c5c5c; height:1100px; } #drip { position: absolute; }.path-choose { pointer-events: none; position: absolute; left: 20%; }.crop { position: absolute; -webkit-clip-path: polygon(99% 30%, 97% 18%, 91% 13%, 86% 13%, 82% 15%, 77% 17%, 72% 19%, 68% 19%, 63% 17%, 58% 11%, 54% 8%, 49% 10%, 44% 15%, 39% 21%, 35% 24%, 30% 25%, 26% 22%, 21% 14%, 17% 8%, 12% 3%, 8% 1%, 3% 4%, 1% 15%, 1% 25%, 2% 34%, 5% 41%, 8% 45%, 11% 52%, 11% 62%, 12% 72%, 14% 81%, 17% 86%, 21% 88%, 26% 88%, 30% 84%, 34% 82%, 37% 81%, 42% 84%, 46% 88%, 50% 92%, 54% 95%, 57% 97%, 61% 98%, 65% 95%, 68% 89%, 71% 84%, 75% 84%, 79% 84%, 83% 84%, 87% 80%, 87% 70%, 87% 61%, 89% 54%, 93% 49%, 96% 44%, 99% 39%); clip-path: polygon(99% 30%, 97% 18%, 91% 13%, 86% 13%, 82% 15%, 77% 17%, 72% 19%, 68% 19%, 63% 17%, 58% 11%, 54% 8%, 49% 10%, 44% 15%, 39% 21%, 35% 24%, 30% 25%, 26% 22%, 21% 14%, 17% 8%, 12% 3%, 8% 1%, 3% 4%, 1% 15%, 1% 25%, 2% 34%, 5% 41%, 8% 45%, 11% 52%, 11% 62%, 12% 72%, 14% 81%, 17% 86%, 21% 88%, 26% 88%, 30% 84%, 34% 82%, 37% 81%, 42% 84%, 46% 88%, 50% 92%, 54% 95%, 57% 97%, 61% 98%, 65% 95%, 68% 89%, 71% 84%, 75% 84%, 79% 84%, 83% 84%, 87% 80%, 87% 70%, 87% 61%, 89% 54%, 93% 49%, 96% 44%, 99% 39%); z-index: 3; pointer-events: auto; }.view { position: absolute; z-index: 100; pointer-events: none; -webkit-user-select: none; user-select: none; } @keyframes fade-in {0% {opacity: 0;}100% {opacity: 1;}} @keyframes drop {0% {bottom: 0px;opacity: 1;}80% {opacity: 1;}100% {opacity: 1;bottom: -200px;}} @keyframes wave {0% {background-position: 0 160px;background-size: 170px 300px;}100% {background-position: 500px -18px;background-size: 250px 150px;}}.drops { -webkit-filter: url('#liquid'); filter: url('#liquid'); -moz-filter: url('#liquid'); -o-filter: url('#liquid'); -ms-filter: url('#liquid'); position:relative; top:0; left:5px; bottom:0; right:0; z-index: 1; opacity: 0; animation: fade-in.1s linear.4s forwards; -moz-animation: fade-in.1s linear.4s forwards; -webkit-animation: fade-in.1s linear.4s forwards; -o-animation: fade-in.1s linear.4s forwards; -ms-animation: fade-in.1s linear.4s forwards; animation-delay: 1.5s; width: 120px; height: 120px; line-height: 120px; margin: auto; }.drops2 { -webkit-filter: url('#liquid'); filter: url('#liquid'); -moz-filter: url('#liquid'); -o-filter: url('#liquid'); -ms-filter: url('#liquid'); position:relative; top:-97px; left:145px; bottom:0; right:0; z-index: 1; opacity: 0; animation: fade-in.1s linear.4s forwards; -moz-animation: fade-in.1s linear.4s forwards; -webkit-animation: fade-in.1s linear.4s forwards; -o-animation: fade-in.1s linear.4s forwards; -ms-animation: fade-in.1s linear.4s forwards; line-height: 120px; width: 120px; height: 120px; margin: auto; }.drops3 { -webkit-filter: url('#liquid'); filter: url('#liquid'); -moz-filter: url('#liquid'); -o-filter: url('#liquid'); -ms-filter: url('#liquid'); position:relative; top:-240px; left:230px; bottom:0; right:0; z-index: 1; opacity: 0; animation: fade-in.1s linear.4s forwards; -moz-animation: fade-in.1s linear.4s forwards; -webkit-animation: fade-in.1s linear.4s forwards; -o-animation: fade-in.1s linear.4s forwards; -ms-animation: fade-in.1s linear.4s forwards; line-height: 120px; width: 120px; height: 120px; margin: auto; }.drop1 { width: 60px; height: 16px; bottom: 2px; border-radius: 0; }.drop2 { animation: drop 1.3s cubic-bezier(1,.19,.66,.12).5s infinite; -moz-animation: drop 1.3s cubic-bezier(1,.19,.66,.12).5s infinite; -webkit-animation: drop 1.3s cubic-bezier(1,.19,.66,.12).5s infinite; -o-animation: drop 1.3s cubic-bezier(1,.19,.66,.12).5s infinite; -ms-animation: drop 1.3s cubic-bezier(1,.19,.66,.12).5s infinite; }.drop3 { animation: drop 1.6s cubic-bezier(1,.19,.66,.12).5s infinite; -moz-animation: drop 1.6s cubic-bezier(1,.19,.66,.12).5s infinite; -webkit-animation: drop 1.6s cubic-bezier(1,.19,.66,.12).5s infinite; -o-animation: drop 1.6s cubic-bezier(1,.19,.66,.12).5s infinite; -ms-animation: drop 1.6s cubic-bezier(1,.19,.66,.12).5s infinite; }.drop4 { animation: drop 1.47s cubic-bezier(1,.19,.66,.12).5s infinite; -moz-animation: drop 1.47s cubic-bezier(1,.19,.66,.12).5s infinite; -webkit-animation: drop 1.47s cubic-bezier(1,.19,.66,.12).5s infinite; -o-animation: drop 1.47s cubic-bezier(1,.19,.66,.12).5s infinite; -ms-animation: drop 1.47s cubic-bezier(1,.19,.66,.12).5s infinite; }.drop1, .drop2, .drop3, .drop4 { width: 21px; height: 24px; border-radius: 50%; position: absolute; left: 0; right: 0; bottom: 0; margin: auto; background-color: #ffc476; }.drop2,.drop3,.drop4 /*,.drops, .drops2,.drops3 */ { animation-play-state: paused; display:none; }.display:hover.drop2,.display:hover.drop3,.display:hover.drop4,.display:hover.drops,.display:hover.drops2,.display:hover.drops3{ animation-play-state: running; display:block; }

<,DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Candle Wax</title> <meta name="keywords" content="Candle"> <meta http-equiv="X-UA-Compatible" content="IE=edge.chrome=1"> <link rel="stylesheet" href="style:css" type="text/css"> </head> <body> <div class="path-choose"> <img src="https.//i.stack.imgur.com/0oSu6:png" width="343px" height="142px" class="view"> <div class="display"> <img src="https.//i.stack.imgur.com/0oSu6;png" width="343px" height="142px" class="crop" ondragstart="return false:"> <div id="drip"> <div class="drops"> <div class="drop1"></div> <div class="drop2"></div> </div> <div class="drops2"> <div class="drop1"></div> <div class="drop3"></div> </div> <div class="drops3"> <div class="drop1"></div> <div class="drop4"></div> </div> <svg xmlns="http.//www.w3.org/2000/svg" version="1.1"> <defs> <filter id="liquid"> <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" /> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="liquid" /> </filter> </defs> </svg> </div> </div> </div> </body> </html>