css绘制一个万圣节夜色场景背景效果代码
代码语言：html
所属分类：背景
代码描述：css绘制一个万圣节夜色场景背景效果代码，包含城堡、月亮、蝙蝠、南瓜头、蜘蛛、坟墓等元素。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/* ************** COLORS ************* */
/* ************** MIXINs ************* */
/* ************************* */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
/* Large devices (laptops/desktops, 992px and up) */
.background {
background: linear-gradient(#eb6800, #ad2200);
width: 153.6rem;
height: 72.7rem;
position: relative;
}
.background .moon {
background: #fffdd7;
width: 28rem;
height: 28rem;
position: absolute;
top: 5rem;
left: 10rem;
border-radius: 50%;
box-shadow: 0 0 2.2rem 1rem #fffdd7;
}
.background .spider-web {
position: absolute;
right: 0.4rem;
}
.background .spider-web .spider-web1 {
background: #000;
width: 0.4rem;
height: 16rem;
position: absolute;
top: 5.2rem;
left: -9rem;
}
.background .spider-web .spider-web2 {
background: #000;
width: 0.5rem;
height: 14rem;
}
.background .spider-web .spider-web3 {
background: #000;
width: 0.5rem;
height: 14rem;
transform: rotate(90deg);
position: absolute;
top: -6.7rem;
left: -6.8rem;
}
.background .spider-web .spider-web4 {
background: #000;
width: 0.5rem;
height: 14rem;
transform: rotate(20deg) translateX(6rem) translateY(3.8rem);
position: absolute;
top: -6.9rem;
left: -6.8rem;
}
.background .spider-web .spider-web5 {
background: #000;
width: 0.5rem;
height: 14rem;
transform: rotate(55deg) translateX(4rem) translateY(2rem);
position: absolute;
top: -7.9rem;
left: -6.8rem;
}
.background .spider-web .spider-web6 {
background: transparent;
width: 1.7rem;
height: 1.7rem;
border-bottom: solid #000 0.35rem;
border-left: solid #000 0.35rem;
border-radius: 50%;
transform: rotate(-180deg);
position: absolute;
top: 0;
left: -5rem;
}
.background .spider-web .spider-web7 {
background: transparent;
width: 1.7rem;
height: 1.7rem;
border-bottom: solid #000 0.35rem;
border-left: solid #000 0.35rem;
border-radius: 50%;
transform: rotate(-180deg) translateX(2.3rem) translateY(-2rem);
position: absolute;
top: -1rem;
left: -0.5rem;
}
.background .spider-web .spider-web8 {
background: transparent;
width: 1.7rem;
height: 1.7rem;
border-bottom: solid #000 0.35rem;
border-left: solid #000 0.35rem;
border-radius: 50%;
transform: rotate(-190deg) translateX(1.4rem) translateY(-2.5rem);
position: absolute;
top: -1rem;
left: -0.5rem;
}
.background .spider-web .spider-web9 {
background: transparent;
width: 1.9rem;
height: 1.9rem;
border-bottom: solid #000 0.35rem;
border-left: solid #000 0.35rem;
border-radius: 50%;
transform: rotate(-190deg) translateX(1.4rem) translateY(-2.5rem);
position: absolute;
top: 1.8rem;
left: -0.9rem;
}
.background .spider-web .spider-web10 {
background: transparent;
width: 3.2rem;
height: 3.2rem;
border-bottom: solid #000 0.35rem;
border-left: solid #000 0.35rem;
border-radius: 50%;
transform: rotate(-215deg) translateX(1.4rem) translateY(-2.5rem);
position: absolute;
top: 4rem;
left: -3.6rem;
}
.background .spider-web .spider-web11 {
background: transparent;
width: 4.2rem;
height: 4.2rem;
border-bottom: solid #000 0.36rem;
border-left: solid #000 0.36rem;
border-radius: 50%;
transform: rotate(-213deg) translateX(1.4rem) translateY(-2.5rem);
position: absolute;
top: 6.7rem;
left: -4.3rem;
}
.background .spider-web .spider-web12 {
background: transparent;
width: 4.2rem;
height: 4.2rem;
border-bottom: solid #000 0.35rem;
border-left: solid #000 0.35rem;
border-radius: 50%;
transform: rotate(-190deg) translateX(0.1rem) translateY(-0.7rem);
position: absolute;
top: 1.8rem;
left: -6rem;
}
.background .spider-web .spider-web13 {
background: transparent;
width: 6.2rem;
height: 6.2rem;
border-bottom: solid #000 0.39rem;
border-left: solid #000 0.39rem;
border-radius: 50%;
transform: rotate(-190deg) translateX(3rem) translateY(-2.5rem);
position: absolute;
top: 1rem;
left: -6.5rem;
}
.background .spider-web .spider-web14 {
background: transparent;
width: 7.4rem;
height: 7.4rem;
border-bottom: solid #000 0.39rem;
border-left: solid #000 0.39rem;
border-radius: 50%;
transform: rotate(-190deg) translateX(8rem) translateY(-6rem);
position: absolute;
top: -1.5rem;
left: -4.5rem;
}
.background .spider-web .spider-web15 {
background: transparent;
width: 3.5rem;
height: 3.5rem;
border-bottom: solid #000 0.39rem;
border-left: solid #000 0.39rem;
border-radius: 50%;
transform: rotate(-160deg) translateX(0.7rem) translateY(0.7rem);
position: absolute;
top: 1rem;
left: -8rem;
}
.background .spider-web .spider-web15 {
background: transparent;
width: 4.5rem;
height: 4.5rem;
border-bottom: solid #000 0.39rem;
border-left: solid #000 0.39rem;
border-radius: 50%;
transform: rotate(-165deg) translateX(2.5rem) translateY(0.7rem);
position: absolute;
top: 1rem;
left: -7.5rem;
}
.background .spider-web .spider-web16 {
background: transparent;
width: 5.5rem;
height: 5.5rem;
border-bottom: solid #000 0.39rem;
border-left: solid #000 0.39rem;
border-radius: 50%;
transform: rotate(-165deg) translateX(6rem) translateY(0.7rem);
position: absolute;
top: 2.5rem;
left: -7.2rem;
}
.background .spider-web .spider-web17 {
background: transparent;
width: 6.7rem;
height: 6.7rem;
border-bottom: solid #000 0.39rem;
border-left: solid #000 0.39rem;
border-radius: 50%;
transform: rotate(-165deg) translateX(9.2rem) translateY(0.7rem);
position: absolute;
top: 3.7rem;
left: -7.2rem;
}
.background .spider-head {
background: #000;
width: 7rem;
height: 4.5rem;
position: absolute;
top: 21rem;
left: 139.8rem;
border-radius: 50%;
}
.background .spider-head .spider-left-eye {
background: #fffdd7;
width: 2.2rem;
height: 2.2rem;
border-radius: 50%;
position: absolute;
top: 1.2rem;
left: 1.2rem;
}
.background .spider-head .spider-left-eye::before {
content: "";
display: block;
background: #000;
width: 1.4rem;
height: 1.4rem;
border-radius: 50%;
position: absolute;
top: 0.4rem;
left: 0.6rem;
}
.background .spider-head .spider-right-eye {
background: #fffdd7;
width: 2.3rem;
height: 2.3rem;
border-radius: 50%;
position: absolute;
top: 1.2rem;
left: 3.5rem;
}
.background .spider-head .spider-right-eye::before {
content: "";
display: block;
background: #000;
width: 1.4rem;
height: 1.4rem;
border-radius: 50%;
position: absolute;
top: 0.4rem;
left: 0.4rem;
}
.background .spider-head .legs1 {
background: #000;
width: 2rem;
height: 0.7rem;
position: absolute;
top: 1rem;
left: -1.5rem;
}
.background .spider-head .legs1::before {
content: "";
display: block;
background: #000;
width: 1.7rem;
height: 0.7rem;
position: absolute;
top: 0.4rem;
left: -1rem;
transform: rotate(-50deg);
border-radius: 0 50% 0 0;
}
.background .spider-head .legs2 {
background: #000;
width: 1rem;
height: 0.7rem;
position: absolute;
top: 2.1rem;
left: -0.7rem;
}
.background .spider-head .legs2::before {
content: "";
display: block;
background: #000;
width: 1.5rem;
height: 0.7rem;
position: absolute;
top: 0.4rem;
left: -1.2rem;
transform: rotate(-50deg);
border-radius: 0 50% 0 0;
}
.background .spider-head .legs3 {
background: #000;
width: 0.9rem;
height: 0.8rem;
position: absolute;
top: 3rem;
left: -0.1rem;
}
.background .spider-head .legs3::before {
content: "";
display: block;
background: #000;
width: 1.3rem;
height: 0.6rem;
position: absolute;
top: 0.4rem;
left: -1rem;
transform: rotate(-50deg);
border-radius: 0 50% 0 0;
}
.background .spider-head .legs4 {
background: #000;
width: 2rem;
height: 0.7rem;
position: absolute;
top: 1rem;
left: 6rem;
transform: scaleX(-1);
}
.background .spider-head .legs4::before {
content: "";
display: block;
background: #000;
width: 1.7rem;
height: 0.7rem;
position: absolute;
top: 0.4rem;
left: -1.4rem;
transform: rotate(-50deg);
border-radius: 0 50% 0 0;
}
.background .spider-head .legs5 {
backgr.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0