纯CSS绘画

下载代码

html

css

分享到微信朋友圈

html

css

div {
  position: absolute;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

div:before, div:after {
  content: '';
  position: absolute;
  display: none;
  box-sizing: border-box;
}

body {
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  background: radial-gradient(ellipse at center, white 0%, #fee7d4 50%);
}

body .wrapper {
  top: 50%;
  left: 0;
  width: 100vw;
  height: 30vw;
  margin: 0;
  padding: 0;
  transform: translatey(-50%);
  white-space: nowrap;
  overflow: visible;
}

body .wrapper .painting {
  position: relative;
  display: inline-block;
  width: 20vw;
  height: 30vw;
  margin: 0 2vw;
  border: 0.75vw solid white;
  box-shadow: 0 0 5vw #fcdec9;
  background: #fcdec9;
  overflow: hidden;
}

body .wrapper .painting .mountain {
  overflow: visible;
}

body .wrapper .painting .mountain.front.left {
  top: 80%;
  left: -40%;
  width: 120%;
  height: 60%;
  background: #101854;
  transform: rotate(30deg);
}

body .wrapper .painting .mountain.front.left:before, body .wrapper .painting .mountain.front.left:after {
  display: block;
  width: 60%;
  height: 40%;
  background: #101854;
}

body .wrapper .painting .mountain.front.left:before {
  top: -5%;
  left: -30%;
  transform: rotate(8deg);
}

body .wrapper .painting .mountain.front.left:after {
  top: -1%;
  left: 55%;
  transform: rotate(-10deg);
}

body .wrapper .painting .mountain.front.left .tree {
  transform: rotate(-30deg);
}

body .wrapper .painting .mountain.front.left .tree.tree1 {
  top: -6vw;
  left: 5%;
  width: 0;
  height: 0;
  margin-top: 2vw;
  margin-left: 0.5vw;
  border-width: 0 1.5vw 5vw 1.5vw;
  border-style: solid;
  border-color: transparent transparent #101854 transparent;
  overflow: visible;
}

body .wrapper .painting .mountain.front.left .tree.tree1:before, body .wrapper .painting .mountain.front.left .tree.tree1:after {
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent transparent #101854 transparent;
}

body .wrapper .painting .mountain.front.left .tree.tree1:before {
  top: -1.7vw;
  left: 50%;
  transform: translatex(-50%);
  border-width: 0 1.1vw 4vw 1.1vw;
}

body .wrapper .painting .mountain.front.left .tree.tree1:after {
  top: -2.9vw;
  left: 50%;
  transform: translatex(-50%);
  border-width: 0 0.9vw 3vw 0.9vw;
}

body .wrapper .painting .mountain.front.left .tree.tree2 {
  top: -5vw;
  left: 25%;
  width: 0;
  height: 0;
  margin-top: 1.75vw;
  margin-left: 0.4375vw;
  border-width: 0 1.3125vw 4.375vw 1.3125vw;
  border-style: solid;
  border-color: transparent transparent #101854 transparent;
  overflow: visible;
}

body .wrapper .painting .mountain.front.left .tree.tree2:before, body .wrapper .painting .mountain.front.left .tree.tree2:after {
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent transparent #101854 transparent;
}

body .wrapper .painting .mountain.front.left .tree.tree2:before {
  top: -1.4875vw;
  left: 50%;
  transform: translatex(-50%);
  border-width: 0 0.9625vw 3.5vw 0.9625vw;
}

body .wrapper .painting .mountain.front.left .tree.tree2:after {
  top: -2.5375vw;
  left: 50%;
  transform: translatex(-50%);
  border-width: 0 0.7875vw 2.625vw 0.7875vw;
}

body .wrapper .painting .mountain.front.left .tree.tree3 {
  top: -4vw;
  left: 40%;
  width: 0;
  height: 0;
  margin-top: 1.5vw;
  margin-left: 0.375vw;
  border-width: 0 1.125vw 3.75vw 1.125vw;
  border-style: solid;
  border-color: transparent transparent #101854 transparent;
  overflow: visible;
}

body .wrapper .painting .mountain.front.left .tree.tree3:before, body .wrapper .painting .mountain.front.left .tree.tree3:after {
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent transparent #101854 transparent;
}

body .wrapper .painting .mountain.front.left .tree.tree3:before {
  top: -1.275vw;
  left: 50%;
  transform: translatex(-50%);
  border-width: 0 0.825vw 3vw 0.825vw;
}

body .wrapper .painting .mountain.front.left .tree.tree3:after {
  top: -2.175vw;
  left: 50%;
  transform: translatex(-50%);
  border-width: 0 0.675vw 2.25vw 0.675vw;
}

body .wrapper .painting .mountain.front.right {
  top: 75%;
  left: 40%;
  width: 120%;
  height: 60%;
  background: #085b90;
  transform: rotate(-30deg);
}

body .wrapper .painting .mountain.front.right .tree {
  transform: rotate(30deg);
}

body .wrapper .painting .mountain.front.right .tree.tree1 {
  top: -3.5vw;
  right: 30%;
  width: 0;
  height: 0;
  margin-top: 1.25vw;
  margin-left: 0.3125vw;
  border-width: 0 0.9375vw 3.125vw 0.9375vw;
  border-style: solid;
  border-color: transparent transparent #085b90 transparent;
  overflow: visible;
}

body .wrapper .painting .mountain.front.right .tree.tree1:before, body .wrapper .painting .mountain.front.right .tree.tree1:after {
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent transparent #085b90 transparent;
}

body .wrapper .painting .mountain.front.right .tree.tree1:before {
  top: -1.0625vw;
  left: 50%;
  transform: translatex(-50%);
  border-width: 0 0.6875vw 2.5vw 0.6875vw;
}

body .wrapper .painting .mountain.front.right .tree.tree1:after {
  top: -1.8125vw;
  left: 50%;
  transform: translatex(-50%);
  border-width: 0 0.5625vw 1.875vw 0.5625vw;
}

body .wrapper .painting .mountain.front.right .tree.tree2 {
  top: -6vw;
  right: 40%;
  width: 0;
  height: 0;
  margin-top: 2vw;
  margin-left: 0.5vw;
  border-width: 0 1.5vw 5vw 1.5vw;
  border-style: solid;
  border-color: transparent transparent #085b90 transparent;
  overflow: visible;
}

body .wrapper .painting .mountain.front.right .tree.tree2:before, body .wrapper .painting .mountain.front.right .tree.tree2:after {
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent transparent #085b90 transparent;
}

body .wrapper .painting .mountain.front.right .tree.tree2:before {
  top: -1.7vw;
  left: 50%;
  transform: translatex(-50%);
  border-width: 0 1.1vw 4vw 1.1vw;
}

body .wrapper .painting .mountain.front.right .tree.tree2:after {
  top: -2.9vw;
  left: 50%;
  transform: translatex(-50%);
  border-width: 0 0.9vw 3vw 0.9vw;
}

body .wrapper .painting .mountain.front.right .tree.tree3 {
  top: -3vw;
  right: 60%;
  width: 0;
  height: 0;
  margin-top: 1vw;
  margin-left: 0.25vw;
  border-width: 0 0.75vw 2.5vw 0.75vw;
  border-style: solid;
  border-color: transparent transparent #085b90 transparent;
  overflow: visible;
}

body .wrapper .painting .mountain.front.right .tree.tree3:before, body .wrapper .painting .mountain.front.right .tree.tree3:after {
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent transparent #085b90 transparent;
}

body .wrapper .painting .mountain.front.right .tree.tree3:before {
  top: -0.85vw;
  left: 50%;
  transform: translatex(-50%);
  border-width: 0 0.55vw 2vw 0.55vw;
}

body .wrapper .painting .mountain.front.right .tree.tree3:after {
  top: -1.45vw;
  left: 50%;
  transform: translatex(-50%);
  border-width: 0 0.45vw 1.5vw 0.45vw;
}

body .wrapper .painting .mountain.mid {
  top: 60%;
  left: 0;
  width: 100%;
  height: 30%;
  filter: drop-shadow(0 0 3vw white);
}

body .wrapper .painting .mountain.mid .peak {
  background: linear-gradient(135deg, #8ccaca 0%, white 50%);
  transform: rotate(45deg);
}

body .wrapper .painting .mountain.mid .peak.peak1 {
  top: 10%;
  left: -10%;
  width: 60%;
  padding-top: 60%;
}

body .wrapper .painting .mountain.mid .peak.peak2 {
  top: 0;
  left: 30%;
  width: 60%;
  padding-top: 60%;
}

body .wrapper .painting .mountain.mid .peak.peak3 {
  top: 20%;
  left: -27%;
  width: 60%;
  padding-top: 60%;
}

body .wrapper .painting .mountain.mid .peak.peak4 {
  top: 22%;
  left: 52%;
  width: 60%;
  padding-top: 60%;
}

body .wrapper .painting .mountain.mid .peak.peak5 {
  top: 12%;
  left: 65%;
  width: 60%;
  padding-top: 60%;
}

body .wrapper .painting .mountain.mid .peak.peak6 {
  top: 5%;
  left: 15%;
  width: 60%;
  padding-top: 60%;
}

body .wrapper .painting .mountain.back {
  top: 30%;
  left: 0;
  width: 100%;
  height: 70%;
}

body .wrapper .painting .mountain.back .peak {
  background: linear-gradient(45deg, #8ccaca 50%, white 50%);
  transform: rotate(45deg);
}

body .wrapper .painting .mountain.back .peak.peak1 {
  top: 25%;
  left: -40%;
  width: 100%;
  padding-top: 100%;
}

body .wrapper .painting .mountain.back .peak.peak2 {
  top: 22%;
  left: -30%;
  width: 100%;
  padding-top: 100%;
}

body .wrapper .painting .mountain.back .peak.peak3 {
  top: 15%;
  left: -15%;
  width: 100%;
  padding-top: 100%;
}

body .wrapper .painting .mountain.back .peak.peak4 {
  top: 10%;
  left: 0%;
  width: 100%;
  padding-top: 100%;
}

body .wrapper .painting .mountain.back .peak.peak5 {
  top: 15%;
  left: 10%;
  width: 100%;
  padding-top: 100%;
}

body .wrapper .painting .mountain.back .peak.peak6 {
  top: 25%;
  left: 25%;
  width: 100%;
  padding-top: 100%;
}

body .wrapper .painting .mountain.back .peak.peak7 {
  top: 30%;
  left: 40%;
  width: 100%;
  padding-top: 100%;
}

body .wrapper .painting .sun {
  top: 10%;
  left: 50%;
  transform: translatex(-50%);
  width: 70%;
  padding-top: 70%;
  border-radius: 50%;
  background: #f35366;
}

body .wrapper .painting.morning {
  background: #fdf2eb;
  filter: saturate(0.5) brightness(0.8);
}

body .wrapper .painting.morning .sun {
  top: 30%;
  left: -40%;
  transform: translatey(0);
}

body .wrapper .painting.noon {
  background: #fcdec9;
  filter: saturate(1) brightness(1);
}

body .wrapper .painting.evening {
  background: #dc9e72;
  filter: saturate(0.65) brightness(0.9);
}

body .wrapper .painting.evening .sun {
  top: 15%;
  left: 40%;
  transform: translatey(0);
}

body .wrapper .painting.night {
  background: #614430;
  filter: hue-rotate(0) saturate(0.15) brightness(0.25);
}

body .wrapper .painting.night .sun {
  display: none;
  top: 15%;
  left: 40%;
  transform: translatey(0);
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg