白昼夜晚温度切换动画
代码语言：html
所属分类：动画
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> - Sunset/Sunrise Animation with CSS Variables</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<style>
body{
background: linear-gradient(to bottom, #0846B0, #23B2EE);
}
#sunset:checked ~ * {
--sunset: 1;
--sunrise: 0;
--color-building-dark: #00436F;
--color-building: #0258C6;
--color-building-light: #1771C5;
--color-cloud: #9ED5F8;
}
#sunrise:checked ~ * {
--sunrise: 1;
--sunset: 0;
--color-building-dark: #50A8E3;
--color-building: #9BD9FE;
--color-building-light: #E5F7FE;
--color-cloud: white;
}
:root {
--color-window-dark: #3B98D8;
--color-window-light: white;
}
#app {
width: 800px;
height: 370px;
padding: 0 2rem;
display: flex;
flex-direction: row;
z-index: 1;
position: relative;
font-family: Montserrat,sans-serif;
}
#app * {
font-weight: 600;
letter-spacing: 1px;
}
#app > .times {
flex: 0 0 70%;
}
#app > .heavens {
flex: 0 0 30%;
}
#app:before, #app:after {
content: '';
position: absolute;
display: block;
width: 100vw;
height: 100vh;
left: calc(50% - 50vw);
top: calc(50% - 50vh);
z-index: -10;
transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
}
#app:before {
background: linear-gradient(tobottom, #73DAF9, #E5F7FE);
opacity: var(--sunrise);
}
#app:after {
background: linear-gradient(tobottom, #0846B0, #23B2EE);
opacity: var(--sunset);
}
.sky {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 0 2rem rgba(0, 0, 0, 0.1);
}
.sky:before, .sky:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
z-index: -1;
}
.sky:before {
background: linear-gradient(tobottom, #2CA4F4, #C2E6FB);
opacity: var(--sunrise);
}
.sky:after {
background: linear-gradient(tobottom, #043385, #1797D7);
opacity: var(--sunset);
}
.times {
display: flex;
flex-direction: row;
justify-content: space-between;
padding-top: 0.5rem;
overflow: hidden;
}
.time {
color: white;
}
.time:nth-child(1) {
-webkit-animation-delay: 0s !important;
animation-delay: 0s !important;
}
.time:nth-child(2) {
-webkit-animation-delay: 0.05s !important;
animation-delay: 0.05s !important;
}
.time:nth-child(3) {
-webkit-animation-delay: 0.1s !important;
animation-delay: 0.1s !important;
}
.time:nth-child(4) {
-webkit-animation-delay: 0.15s !important;
animation-delay: 0.15s !important;
}
.time:nth-child(5) {
-webkit-animation-delay: 0.2s !important;
animation-delay: 0.2s !important;
}
.time:first-child:after {
font-size: 2.5rem;
}
.time:first-child ~ .time {
opacity: 0.5;
}
.time:before {
content: '';
display: block;
left: calc(50% - 0.8rem);
margin-bottom: 0.5rem;
width: 0;
height: 0;
border-width: 0.8rem;
border-style: solid;
border-color: transparent;
border-bottom-color: white;
}
.time:after {
font-size: 2rem;
}
.city {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.windows {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: repeating-linear-gradient(totop, #044DA8 0, #044DA8 6px, transparent 6px, transparent var(--window-space, 14px));
overflow: hidden;
}
.windows, .windows:before, .windows:after {
background-clip: content-box !important;
}
.windows:before, .windows:after {
transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.windows:before {
background: repeating-linear-gradient(totop, var(--window-color, var(--color-window-light)) 0, var(--window-color, var(--color-window-light)) 6px, transparent 6px, transparent var(--window-space, 14px));
opacity: var(--sunrise);
}
.windows:after {
background: repeating-linear-gradient(totop, gold 0, gold 6px, transparent 6px, transparent var(--window-space, 14px));
opacity: var(--sunset);
transition-delay: calc(var(--sunset,0) * 1.5s);
transition-duration: 0.75s;
}
.ledge {
width: 100%;
height: 0;
padding: 50% 0;
overflow: hidden;
}
.ledge:before {
transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
-webkit-transform-origin: right top;
transform-origin: right top;
background: linear-gradient(tobottom, rgba(0, 0, 0, 0.3), transparent);
}
.ledge:after {
transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
content: '';
display: block;
position: absolute;
top: 0;
height: 4px;
width: 100%;
background: var(--color-building);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}
.building {
position: absolute;
bottom: 0;
height: 60%;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: flex-end;
z-index: 1;
}
.building > .tower {
bottom: 0;
z-index: 1;
background: currentColor;
}
.building > .tower, .building > .tower:before, .building > .tower:after {
transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
}
.building:nth-child(1) {
left: 64px;
height: 145px;
}
.building:nth-child(1) > .tower:nth-child(1) {
--color-pointy: $color-building-dark;
width: 21px;
height: 70%;
background: white;
color: var(--color-building-dark);
background: currentColor;
--window-color: $color-window-dark;
}
.building:nth-child(1) > .tower:nth-child(1):after {
content: '';
display: block;
position: absolute;
width: 3px;
height: 30px;
bottom: 100%;
box-shadow: 15px -5px 0 var(--color-pointy);
z-index: -1;
}
.building:nth-child(1) > .tower:nth-child(1):before {
content: '';
display: block;
position: absolute;
bottom: 100%;
left: 0;
height: 2rem;
width: 100%;
z-index: -1;
transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
background: var(--color-pointy);
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: skewY(-45deg);
transform: skewY(-45deg);
z-index: -1;
}
.building:nth-child(1) > .tower:nth-child(1) .windows, .building:nth-child(1) > .tower:nth-child(1) .windows:before, .building:nth-child(1) > .tower:nth-child(1) .windows:after {
padding-right: 8px;
}
.building:nth-child(1) > .tower:nth-child(2) {
--color-pointy: $color-building;
width: 50px;
height: 100%;
color: var(--color-building);
}
.building:nth-child(1) > .tower:nth-child(2):before {
content: '';
display: block;
position: absolute;
bottom: 100%;
left: 0;
height: 45%;
width: 100%;
z-index: -1;
transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
background: var(--color-pointy);
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: skewY(-55deg);
transform: skewY(-55deg);
z-index: -1;
}
.building:nth-child(1) > .tower:nth-child(2) .windows, .building:nth-child(1) > .tower:nth-child(2) .windows:before, .building:nth-child(1) > .tower:nth-child(2) .windows:after {
padding-left: 12px;
}
.building:nth-child(1) > .tower:nth-child(3) {
--color-pointy: $color-building;
width: 21px;
height: 90%;
color: var(--color-building);
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
}
.building:nth-child(1) > .tower:nth-child(3):after {
content: '';
display: block;
position: absolute;
width: 3px;
height: 30px;
bottom: 100%;
box-shadow: 5px -15px 0 var(--color-pointy), 10px -5px 0 var(--color-pointy);
z-index: -1;
}
.building:nth-child(1) > .tower:nth-child(3):before {
content: '';
display: block;
position: absolute;
bottom: 100%;
left: 0;
height: 2rem;
width: 100%;
z-index: -1;
transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
background: var(--color-pointy);
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: skewY(30deg);
transform: skewY(30deg);
z-index: -1;
}
.building:nth-child(1) > .tower:nth-child(3) .windows, .building:nth-child(1) > .tower:nth-child(3) .windows:before, .building:nth-child(1) > .tower:nth-child(3) .windows:after {
padding-left: 12px;
}
.building:nth-child(2) {
left: 284px;
height: 250px;
}
.building:nth-child(2) > .tower:nth-child(1), .building:nth-child(2) > .tower:nth-child(3) {
width: 38px;
height: 50%;
}
.building:nth-child(2) > .tower:nth-child(1) .windows, .building:nth-child(2) > .tower:nth-child(1) .windows:before, .building:nth-child(2) > .tower:nth-child(1) .windows:after, .building:nth-child(2) > .tower:nth-child(3) .windows, .building:nth-child(2) > .tower:nth-child(3) .windows:before, .building:nth-child(2) > .tower:nth-child(3) .windows:after {
padding: 0 6px;
}
.building:nth-child(2) > .tower:nth-child(1) {
color: var(--color-building-dark);
--color-pointy: $color-building-dark;
--window-color: $color-window-dark;
--window-space: 20px;
}
.building:nth-child(2) > .tower:nth-child(1):after {
content: '';
display: block;
position: absolute;
width: 3px;
height: 30px;
bottom: 100%;
box-shadow: 10px 15px 0 var(--color-pointy), 20px 20px 0 var(--color-pointy);
z-index: -1;
}
.building:nth-child(2) > .tower:nth-child(1):before {
content: '';
display: block;
position: absolute;
bottom: 100%;
left: 0;
height: 4px;
width: 100%;
background: var(--color-building);
}
.building:nth-child(2) > .tower:nth-child(2) {
width: 62px;
height: 100%;
color: var(--color-building);
--color-pointy: $color-building;
--window-color: $color-window-light;
--window-space: 20px;
}
.building:nth-child(2) > .tower:nth-child(2):after {
content: '';
display: block;
position: absolute;
width: 3px;
height: 30px;
bottom: 100%;
box-shadow: 20px 5px 0 var(--color-pointy), 40px 15px 0 var(--color-pointy);
z-index: -1;
}
.building:nth-child(2) > .tower:nth-child(2):before {
content: '';
height: 100%;
position: absolute;
top: 0;
display: block;
width: 20px;
background: var(--color-building-dark);
}
.building:nth-child(2) > .tower:nth-child(2) .windows, .building:nth-child(2) > .tower:nth-child(2) .windows:before, .building:nth-child(2) > .tower:nth-child(2) .windows:after {
padding-left: 30px;
}
.building:nth-child(2) > .tower:nth-child(3) {
color: var(--color-building);
--window-space: 20px;
}
.building:nth-child(3) {
left: 554px;
height: 180px;
}
.building:nth-child(3) > .tower:nth-child(1) {
--color-pointy: $color-building-dark;
width: 21px;
height: 70%;
background: white;
color: var(--color-building-dark);
background: var(--color-building-dark);
--window-color: $color-window-dark;
}
.building:nth-child(3) > .tower:nth-child(1):before {
content: '';
display: block;
position: absolute;
bottom: 100%;
left: 0;
height: 2rem;
width: 100%;
z-index: -1;
transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
background: var(--color-pointy);
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: skewY(-55deg);
transform: skewY(-55deg);
z-index: -1;
}
.building:nth-child(3) > .tower:nth-child(1) .windows, .building:nth-child(3) > .tower:nth-child(1) .windows:before, .building:nth-child(3) > .tower:nth-child(1) .windows:after {
padding-right: 8px;
}
.building:nth-child(3) > .tower:nth-child(2) {
--color-pointy: $color-building;
width: 30px;
height: 100%;
color: var(--color-building);
}
.building:nth-child(3) > .tower:nth-child(2):after {
content: '';
display: block;
position: absolute;
width: 3px;
height: 30px;
bottom: 100%;
box-shadow: 10px 20px 0 var(--color-pointy), 14px 23px 0 var(--color-pointy), 20px 15px 0 var(--color-pointy);
z-index: -1;
}
.building:nth-child(3) > .tower:nth-child(2):before {
content: '';
display: block;
position: absolute;
bottom: 100%;
left: 0;
height: 4px;
width: 100%;
background: var(--color-building-light);
}
.building:nth-child(3) > .tower:nth-child(2) .windows, .building:nth-child(3) > .tower:nth-child(2) .windows:before, .building:nth-child(3) > .tower:nth-child(2) .windows:after {
padding-left: 12px;
}
.building:nth-child(3) > .tower:nth-child(3) {
--color-pointy: $color-building;
width: 40px;
height: 70%;
color: var(--color-building);
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
}
.building:nth-child(3) > .tower:nth-child(3):before {
content: '';
display: block;
position: absolute;
bottom: 100%;
left: 0;
height: 60px;
width: 100%;
z-index: -1;
transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
background: var(--color-pointy);
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: skewY(50deg);
transform: skewY(50deg);
z-index: -1;
}
.building:nth-child(3) > .tower:nth-child(3) .windows, .building:nth-child(3) > .tower:nth-child(3) .windows:before, .building:nth-child(3) > .tower:nth-child(3) .windows:after {
padding-left: 12px;
}
.heavens {
position: absolute;
width: 200px;
right: 0;
top: 0;
z-index: 10;
height: 100%;
overflow: hidden;
}
[class^="sun"] {
position: absolute;
text-align: center;
width: 100%;
cursor: pointer;
}
[class^="sun"]:before {
content: attr(data-title);
display: inline-block;
width: 100%;
margin: 2rem 0;
color: white;
font-size: 1.5rem;
}
[class^="sun"]:after {
transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
margin-top: 1rem;
content: '';
display: inline-block;
width: 100%;
border-radius: 50%;
}
.glow {
width: 200px;
height: 200px;
z-index: -1;
position: absolute;
right: 0;
-webkit-filter: blur(50px);
filter: blur(50px);
}
.glow:before, .glow:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
}
.glow:before {
background: #FFFAAD;
}
.glow:after {
background: white;
}
.sunrise:after {
width: 78px;
height: 78px;
background: #FFFAAD;
box-shadow: 0 0 0 1rem rgba(255, 250, 173, 0.3);
}
.sunset:before {
marg.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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