纯css一个div实现一座浮动的城堡效果-html代码-BFW代码库

纯css一个div实现一座浮动的城堡效果

代码语言：html

代码描述：纯css一个div实现一座浮动的城堡效果

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
html, body {
  position: absolute;
  top: 0;
  left; 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  background: LightSkyBlue;
  background: linear-gradient(135deg, #beeeef, LightSkyBlue)
}

.castle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60vmin;
  height: 80vmin;
  clip-path: polygon(50% 23%, 52% 23.5%, 52% 10%, 52.25% 9.75%, 52.5% 10%, 54.5% 16%, 53.5% 18%, 52.5% 17%, 52.5% 23.66%, 78% 30%, 80% 81%, 90% 82.5%, 99.5% 84.5%, 100% 85%, 100% 85.5%, 75% 95%, 50% 100%, 20% 95%, 0% 84.5%, 0.25% 84%, 20% 81%, 22% 30%);
  background-image: linear-gradient(135deg, transparent 65%, rgba(0,0,0,0.5) 90%), radial-gradient(at 60% 12.5%, #d50000 8%, transparent 10%), linear-gradient(black 24%, transparent 0), linear-gradient(to top, #3B1500 10%, darkgreen 15%, green 16% 19.7%, transparent 0), radial-gradient(at 50% 80%, green 15%, transparent 0), radial-gradient(at 50% 60%, #333 20%, #666 38%, transparent 0 );
}

.castle::before,
.castle::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  clip-path.........完整代码请登录后点击上方下载按钮下载查看