返回顶部

收藏

css3的浮云效果图

更多

css3浮云:

css3的浮云效果图

代码如下:

<!doctype html>
<html>
<head>
<style>
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%;
}
</style>
</head>
<body>

<p>这是css3的浮云</p>
<div id = "cloud"><span class='shadow'></span></div>

</body>
</html>

标签:css3

收藏

1人收藏

支持

1

反对

0