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

css水滴滴水动画效果代码

代码语言：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%);
    	backgro.........完整代码请登录后点击上方下载按钮下载查看