朵云"/>
使用html生成一朵云
代码
<html>
<head>
<style type="text/css">body {width: 100vw;height: 100vw;background: linear-gradient(165deg, #527785 0%, #7FB4C7 100%);padding: 1%;
}.cloud {width: 500px;height: 275px;border-radius: 50%;position: absolute;top: -35vh;left: -25vw;
}#cloud-back {filter: url(#filter-back);box-shadow: 300px 300px 30px -20px #fff;
}#cloud-mid {filter: url(#filter-mid);box-shadow: 300px 340px 70px -60px rgba(158, 168, 179, 0.5);left: -25vw;
}#cloud-front {filter: url(#filter-front);box-shadow: 300px 370px 60px -100px rgba(0, 0, 0, 0.3);left: -25vw;
}</style>
</head>
<body><div class="cloud" id="cloud-back"></div><div class="cloud" id="cloud-mid"></div><div class="cloud" id="cloud-front"></div><svg width="0" height="0">
<svg width="0" height="0"> <!--Top Layer--><filter id="filter-back"><feTurbulence type="fractalNoise" baseFrequency="0.012" numOctaves="4"
seed="0" /> <feDisplacementMap in="SourceGraphic" scale="170" /></filter><filter id="filter-mid"><feTurbulence type="fractalNoise" baseFrequency="0.012" numOctaves="2"
seed="0"/><feDisplacementMap in="SourceGraphic" scale="150" /></filter><filter id="filter-front"><feTurbulence type="fractalNoise" baseFrequency="0.012" numOctaves="2"
seed="0"/><feDisplacementMap in="SourceGraphic" scale="100" /></filter>
</svg>
</body>
</html>
效果
更多推荐
使用html生成一朵云
发布评论