div+css实现城市夜晚月亮天空投射蝙蝠侠标识效果代码
代码语言：html
所属分类：布局界面
代码描述：div+css实现城市夜晚月亮天空投射蝙蝠侠标识效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
:root {
--bg: #fff4d1;
--w1: conic-gradient(from 90deg at 50% 50%, #fff491 0% 25%, #fff0 0% 100%)
no-repeat;
--w2: conic-gradient(from 90deg at 50% 50%, #ffdf81 0% 25%, #fff0 0% 100%)
no-repeat;
--w3: conic-gradient(from 90deg at 50% 50%, #ffb84f 0% 25%, #fff0 0% 100%)
no-repeat;
--w4: conic-gradient(from 90deg at 50% 50%, #ff926f 0% 25%, #fff0 0% 100%)
no-repeat;
--w5: conic-gradient(from 90deg at 50% 50%, #acb0b1 0% 25%, #fff0 0% 100%)
no-repeat;
--w6: conic-gradient(from 90deg at 50% 50%, #9dc8dc 0% 25%, #fff0 0% 100%)
no-repeat;
--w7: conic-gradient(from 90deg at 50% 50%, #577c9a 0% 25%, #fff0 0% 100%)
no-repeat;
--w8: conic-gradient(from 90deg at 50% 50%, #2b4e5f 0% 25%, #fff0 0% 100%)
no-repeat;
}
* {
transform-style: preserve-3d;
}
body {
margin: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
background-color: #1f1f1f;
background-image: linear-gradient(315deg, #0cbaba 0%, #380036 74%);
cursor: pointer;
}
.sky {
background: linear-gradient(0deg, #673ab78a, #3c3c3c94);
height: 100vh;
}
.sky:after {
content: "";
position: absolute;
width: 100vw;
height: 100vh;
top: 0vh;
background-image: radial-gradient(2px 2px at 20px 30px, #484341, transparent),
radial-gradient(2px 2px at 43px 75px, #735454, transparent),
radial-gradient(2px 1px at 54px 184px, #828282, transparent),
radial-gradient(2px 2px at 93px 47px, #654b49, transparent),
radial-gradient(1px 1px at 148px 87px, #3a1919, transparent),
radial-gradient(2px 2px at 193px 137px, #a26662, transparent),
radial-gradient(1px 2px at 210px 154px, #805241, transparent),
radial-gradient(2px 2px at 243px 102px, #866356, transparent),
radial-gradient(2px 1px at 264px 184px, #794937, transparent),
radial-gradient(2px 2px at 293px 44px, #735454, transparent),
radial-gradient(1px 1px at 223px 62px, #ad968e, transparent),
radial-gradient(2px 2px at 249px 162px, #884228, transparent),
radial-gradient(2px 2px at 73px 99px, #442e26, transparent),
radial-gradient(1px 1px at 163px 42px, #403433, transparent),
linear-gradient(180deg, #fff0 10%, #000 25%, #111 50%, #222 75%, #111 100%);
background-repeat: no-repeat, repeat;
background-size: 333px 263px, 333px 163px, 333px 163px, 333px 163px,
333px 163px, 333px 163px, 333px 163px, 333px 163px, 333px 163px, 333px 163px,
333px 163px, 333px 163px, 333px 163px, 333px 163px, 100% 100%;
opacity: 0.5;
mix-blend-mode: color-burn;
}
.moon {
position: absolute;
z-index: 2;
width: 20vmin;
height: 20vmin;
left: 20vmin;
top: 15vmin;
opacity: 1;
border-radius: 100%;
animation: start-moon 3s ease 0s 1;
background: radial-gradient(
circle at 50% 50%,
#fdfdfd 0% 7vmin,
#ffffff00 7.25vmin 100%
),
#fff;
box-shadow: 0 0 8em 4em #6493a9, 0 0 8em -16em #ff660000 inset,
0 0 20px 5px #fdfdfd;
mix-blend-mode: exclusion;
}
.moon:before {
content: "";
background: radial-gradient(
circle at 100% 60%,
#ffffff00 0% 60%,
#dddddd 75% 100%
);
width: 100%;
height: 100%;
position: absolute;
top: 0%;
left: 0%;
border-radius: 100%;
}
.moon:after {
content: "";
background: radial-gradient(
circle at 0% 40%,
#efefef 0% 60%,
#ededed 75% 100%
);
width: 4.5vmin;
height: 4.5vmin;
position: absolute;
top: 20%;
left: 20%;
border-radius: 100%;
filter: blur(2px);
}
.light {
mix-blend-mode: soft-light;
/* background: #fff4d2;*/
width: 22vmin;
height: 22vmin;
border-radius: 100%;
position: absolute;
top: 14vmin;
left: 19vmin;
transform: rotate(-45deg);
opacity: 0;
animation: start 5s ease 0s 1, blink-off 0.2s ease 0s 2;
}
.light:before {
content: "";
position: absolute;
border: 8vmin solid transparent;
border-top: 150vmin solid #fff4d2;
top: 14vmin;
left: 0.5vmin;
border-radius: 0.5vmin;
opacity: 0.65;
filter: blur(3px);
width: 5vmin;
}
.light:after {
content: "";
mix-blend-mode: soft-light;
background: #fff4d2;
width: 22vmin;
height: 22vmin;
border-radius: 100%;
position: absolute;
top: 0;
left: 0;
transform: rotate(-45deg);
filter: blur(2px);
}
body:hover .light {
animation-iteration-count: 0;
}
body:active .light {
opacity: 1;
animation: start 1s ease 0s 1, blink-on 0.15s ease 0s 2;
cursor: none;
}
@keyframes blink-off {
40% {
opacity: 1;
}
50% {
opacity: 0;
}
60% {
opacity: 1;
}
}
@keyframes blink-on {
40% {
opacity: 1;
}
50% {
opacity: 0;
}
60% {
opacity: 1;
}
}
@keyframes start {
20%,
80% {
opacity: 1;
}
}
/***
Batman logo by Stephen Greig:
http://tangledindesign.com/famous-logos-in-css3-the-dark-knight/
***/
#batman-logo {
filter: contrast(1.5) blur(0.5px);
height: 4.35vmin;
overflow: hidden;
position: absolute;
width: 16vmin;
background: #000;
left: 1.85vmin;
top: 9.75vmin;
background-image: -webkit-gradient(
linear,
left bottom,
right top,
color-stop(0, rgb(72, 84, 92)),
color-stop(0.63, rgb(25, 26, 26)),
color-stop(0.86, rgb(26, 26, 26))
);
background-image: -moz-linear-gradient(
/* Remember Browser specific prefixes! */ left bottom,
/* Gradient start point (the angle) */ rgb(72, 84, 92) 0%,
/* First colour and start point */ rgb(25, 26, 26) 63%,
/* Second colour and start point */ rgb(26, 26, 26) 86%
);
background-image: -o-linear-gradient(
left bottom,
rgb(72, 84, 92) 0%,
rgb(25, 26, 26) 63%,
rgb(26, 26, 26) 86%
);
transform: rotateZ(48deg) rotateY(15deg) rotateX(0deg) scaleY(1.75)
scaleX(1.25);
box-shadow: 0 0 10vmin 2vmin #fff;
border-radius: 5% 5% 100% 100%;
}
#batman-logo div {
position: absolute;
}
#left-white {
background: var(--bg);
border-radius: 3.2vmin 5.12vmin 0.96vmin 1.16vmin / 2.56vmin 3.2vmin 1.16vmin
1.16vmin;
width: 7.36vmin;
height: 2.56vmin;
top: -0.032vmin;
left: -5.056vmin;
}
#left-white:after {
content: "";
position: absolute;
background: var(--bg);
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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