浮云效果代码,Css代码库,德仔网

代码语言

代码分类

【Css】浮云效果

作者:Duncan / 发布于2014/11/18/ 769


	<div id = "cloud"><span class='shadow'></span></div>

	CSS -

	body {
	 background: #ccc;
	}
	#cloud {
	 width: 350px; height: 120px;

	 background: #f2f9fe;
	 background: linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%);
	 background: -webkit-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%);
	 background: -moz-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%);
	 background: -ms-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%);
	 background: -o-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%);

	 border-radius: 100px;
	 -webkit-border-radius: 100px;
	 -moz-border-radius: 100px;

	 position: relative;
	 margin: 120px auto 20px;
	}

	#cloud:after, #cloud:before {
	 content: '';
	 position: absolute;
	 background: #f2f9fe;
	 z-index: -1
	}

	#cloud:after {
	 width: 100px; height: 100px;
	 top: -50px; left: 50px;

	 border-radius: 100px;
	 -webkit-border-radius: 100px;
	 -moz-border-radius: 100px;
	}

	#cloud:before {
	 width: 180px; height: 180px;
	 top: -90px; right: 50px;

	 border-radius: 200px;
	 -webkit-border-radius: 200px;
	 -moz-border-radius: 200px;
	}

	.shadow {
	 width: 350px;
	 position: absolute; bottom: -10px;
	 background: #000;
	 z-index: -1;

	 box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4);
	 -moz-box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4);
	 -webkit-box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4);

	 border-radius: 50%;
	 -moz-border-radius: 50%;
	 -webkit-border-radius: 50%;
	}

试试其它关键字

　浮云效果　

同语言下

可能有用的

Duncan贡献的其它代码(49)