css水滴滴水动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css水滴滴水动画效果代码

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

<!DOCTYPE html>

<html lang="en" class="no-js">

<head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <style>

    .drop {
    	background: rgba(255,255,245,1);
    	border: 4px solid rgba(255,245,235,1);
    	border-radius: 100%;
    	box-shadow: inset -0.1em 0 2em 0.5em rgba(255,255,255,0.5),
    				inset -0.1em 0 0.5em 0 rgba(0,0,0,0.8);
    	position: relative;
    	margin: 0 auto;
    	width: 15em; height: 15em;
    	overflow: hidden;
    }
    
    .drop:before,
    .drop:after {
    	content: "";
    	display: block;
    	position: absolute;
    }
    
    .drop:before {
    	background: rgba(167, 217, 234,1);
    	border-radius: 100%;
    	box-shadow: 0 0 0 0.1em rgba(167, 217, 234,0.8),
    				0 0 0 0.15em rgba(167, 217, 234,0.8),
    				0 0 0 0.2em rgba(167, 227, 234,0.8),
    				0 0 0 0.25em rgba(167, 227, 234,0.8),
    				0 0 0 0.3em rgba(167, 227, 234,0.8),
    				0 0 0 0.35em rgba(167, 227, 234,0.8),
    				0 0 0 0.4em rgba(167, 227, 234,0.8),
    				0 0 0 0.45em rgba(167, 227, 234,0.8),
    				0 0 0 0.5em rgba(167, 227, 234,0.8);
    	top: 0%; left: 50%;
    	width: 0.1em; height: 0.1em;
    	-webkit-animation: fall 3.5s cubic-bezier(0.5, 0, 1, 0.5) infinite;
    	   -moz-animation: fall 3.5s cubic-bezier(0.5, 0, 1, 0.5) infinite;
    		-ms-animation: fall 3.5s cubic-bezier(0.5, 0, 1, 0.5) infinite;
    			animation: fall 3.5s cubic-bezier(0.5, 0, 1, 0.5) infinite;
    }
    
    .drop:after {
    	background: rgb(52,152,219);
    	background: -webkit-linear-gradient(rgba(52,255,255,1) 0%, rgba(52,152,219,1) 10%, rgba(152,252,219,1) 100%);
    	background: -moz-linear-gradient(rgba(52,255,255,1) 0%, rgba(52,152,219,1) 10%, rgba(152,252,219,1) 100%);
    	background: linear-gradient(rgba(52,255,255,1) 0%, rgba(52,152,219,1) 10%, rgba(152,252,219,1) 100%);
    	border-radius: 100% 0 50% 0;
    	left: 0; bottom: 0;
    	width: inherit; height: 3em;
    	opacity: 0.7;
    	-webkit-animation: surface 3s linear infinite;
    	   -moz-animation: surface 3s linear infinite;
    		-ms-animation: surface 3s linear infinite;
    			animation: surface 3s linear infinite;
    }
    
    @-webkit-keyframes fall {
    	5%, 15% {
    		box-shadow: 0 -1.4em 0 0.1em rgba(167,217,234,1),
    					0 -0.8em 0 0.15em rgba(167,217,234,1),
    					0 -0.3em 0 0.2em rgba(167,217,234,1),
    					0 -0.1em 0 0.25em rgba(167,217,234,1),
    					0 0 0 0.3em rgba(167,217,234,1),
    					0 0.2em 0 0.35em rgba(167,217,234,1),
    					0 0.4em 0 0.4em rgba(167,217,234,1),
    					0 0.6em 0 0.45em rgba(167,217,234,1),
    					0 0.8em 0 0.5em rgba(167,217,234,1);
    	}
    	16% {
    		top: 80%;
    	}
    	18% {
    		top: 80%;
    		box-shadow: 1em -8em 0 0.2em rgba(177, 227, 234,1),
    					-2.2em -3.8em 0 0.1em rgba(177, 227, 234,1),
    					3em -2.85em 0 0.3em rgba(177, 227, 234,1),
    					-3.5em -4em 0 0.2em rgba(177, 227, 234,1),
    					0 0 0 0.3em rgba(177, 227, 234,1),
    					2em -2em 0 0.2em rgba(177, 227, 234,1),
    					-0.3em -3em 0 0.2em rgba(177, 227, 234,1),
    					0.5em -5em 0 0.35em rgba(177, 227, 234,1),
    					-3em -1em 0 0.3em rgba(177, 227, 234,1);
    	}
    	30% {
    		top: 90%;
    		box-shadow: 1.5em 0 0 0.2em rgba(252,252,255,0.1),
    					-2em 0 0 0.15em rgba(252,252,255,0.1),
    					3em 0 0 0.2em rgba(252,252,255,0.1),
    					-2em 0 0 0.25em rgba(252,252,255,0.1),
    					0 0 0 0.2em rgba(252,252,255,0.1),
    					2.35em 0 0 0.3em rgba(252,252,255,0.1),
    					-0.5em 0 0 0.2em rgba(252,252,255,0.1),
    					1em 0 0 0.3em rgba(252,252,255,0.1),
    					-4em 0 0 0.4em rgba(252,252,255,0.1);
    	}
    	40%, 100%{
    		top: 95%;
    		background: rgba(255,255,255,1);
    		box-shadow: 1.8em 0.5em 0 0.2em rgba(255,255,255,0),
    					-3em 0.5em 0 0.1em rgba(255,255,255,0),
    					4em 0.5em 0 0.1em rgba(255,255,255,0),
    					-3.5em 0.5em 0 0.1em rgba(255,255,255,0),
    					0 0 0 0.3em rgba(255,255,215,0),
    					2.45em 0.5em 0 0.1em rgba(255,255,255,0),
    					-0.8em 0.5em 0 0.2em rgba(255,255,255,0),
    					1.5em 0.5em 0 0.3em rgba(255,255,255,0),
    					-4.5em 0.5em 0 0.2em rgba(255,255,255,0); 
    	}	
    }
    
    @-moz-keyframes fall {
    	5%, 15% {
    		box-shadow: 0 -1.4em 0 0.1em rgba(167,217,234,1),
    					0 -0.8em 0 0.15em rgba(167,217,234,1),
    					0 -0.3em 0 0.2em rgba(167,217,234,1),
    					0 -0.1em 0 0.25em rgba(167,217,234,1),
    					0 0 0 0.3em rgba(167,217,234,1),
    					0 0.2em 0 0.35em rgba(167,217,234,1),
    					0 0.4em 0 0.4em rgba(167,217,234,1),
    					0 0.6em 0 0.45em rgba(167,217,234,1),
    					0 0.8em 0 0.5em rgba(167,217,234,1);
    	}
    	16% {
    		top: 80%;
    	}
    	18% {
    		top: 80%;
    		box-shadow: 1em -8em 0 0.2em rgba(177, 227, 234,1),
    					-2.2em -3.8em 0 0.1em rgba(177, 227, 234,1),
    					3em -2.85em 0 0.3em rgba(177, 227, 234,1),
    					-3.5em -4em 0 0.2em rgba(177, 227, 234,1),
    					0 0 0 0.3em rgba(177, 227, 234,1),
    					2em -2em 0 0.2em rgba(177, 227, 234,1),
    					-0.3em -3em 0 0.2em rgba(177, 227, 234,1),
    					0.5em -5em 0 0.35em rgba(177, 227, 234,1),
    					-3em -1em 0 0.3em rgba(177, 227, 234,1);
    	}
    	30% {
    		top: 90%;
    		box-shadow: 1.5em 0 0 0.2em rgba(252,252,255,0.1),
    					-2em 0 0 0.15em rgba(252,252,255,0.1),
    					3em 0 0 0.2em rgba(252,252,255,0.1),
    					-2em 0 0 0.25em rgba(252,252,255,0.1),
    					0 0 0 0.2em rgba(252,252,255,0.1),
    					2.35em 0 0 0.3em rg.........完整代码请登录后点击上方下载按钮下载查看