持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第4天，点击查看活动详情
前言
国庆回家实在是抢不到高铁票了，只能迫不得已买一张机票回家了。但是选座的时候发现靠窗的位置全都被抢完了，那就只能选一个前面有窗、后面也有窗，只有我坐在隔板处，往前看也不行，往后看也不行。那就自己来做一个窗户看外面的蓝天白云吧~~~~
先来个window
👉 既然是个窗户，那就得用window来包裹里面的内容了。
<div class="window">
</div>
👉 在给样式的时候，会给一个 before 用来做一个双层的哦
.window {
position: relative;
padding: 20px;
border: 4px solid #808080;
border-radius: 48px;
background-color: #D9D9D9;
box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.2), 0 0 0 40px whitesmoke, 0 0 0 44px #808080, 0 20px 40px 40px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.window:before {
content: "";
position: absolute;
top: -10px;
left: 0;
width: 100%;
height: 20px;
background: black;
opacity: 0.2;
filter: blur(10px);
pointer-events: none;
z-index: 20;
}
👉 看一下效果吧
👆 效果好像不太好，只是普普通通的两个圆圈哦。
🤌 格局打开。。写着写着就会把窗户打开了。
蓝天和白云
👉 先来一个静止的蓝天
<div class="glass">
<div class="sky">
</div>
</div>
👉 给 glass 一个宽高，这样就可以把窗户撑开啦
.glass {
position: relative;
width: 200px;
height: 300px;
border-radius: 72px;
box-shadow: 0 0 0 4px #808080;
overflow: hidden;
}
.glass:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-image: radial-gradient(circle farthest-corner at 90% 10%, rgba(255, 255, 255, 0.4) 0%, transparent 20%);
box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.2);
border-radius: 72px;
}
.sky {
position: relative;
background: #3FA9F5;
width: 100%;
height: 100%;
z-index: 0;
}
👉 蓝天已经出来了，那就给一片白云飘在蓝天中
<div class="sky">
<div class="cloud"></div>
<div class="cloud"></div>
<div class="cloud"></div>
<div class="cloud"></div>
<div class="cloud"></div>
<div class="cloud"></div>
</div>
👆 因为是直接用css写的飘动样式，所以多写几个层级，就可以做出不同的大小了
.cloud {
position: relative;
width: 100px;
height: 40px;
background-color: white;
border-radius: 40px;
-webkit-animation-name: leftToRight;
animation-name: leftToRight;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.cloud:before, .cloud:after {
content: " ";
width: 40px;
height: 40px;
border-radius: 50%;
background-color: white;
position: absolute;
}
.cloud:before {
top: -20px;
left: 20px;
}
.cloud:after {
top: -10px;
left: 50px;
}
.cloud:nth-child(1) {
-webkit-animation-duration: 8s;
animation-duration: 8s;
}
.cloud:nth-child(2) {
top: 20%;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
-webkit-animation-duration: 6s;
animation-duration: 6s;
}
.cloud:nth-child(3) {
top: 40%;
-webkit-animation-duration: 4s;
animation-duration: 4s;
}
.cloud:nth-child(4) {
top: 60%;
-webkit-animation-duration: 6s;
animation-duration: 6s;
}
.cloud:nth-child(5) {
top: 20%;
transform: scale(3);
-webkit-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.cloud:nth-child(6) {
top: 20%;
transform: scale(2);
-webkit-animation-duration: 4s;
animation-duration: 4s;
}
@-webkit-keyframes leftToRight {
0% {
left: -200%;
}
100% {
left: 150%;
}
}
@keyframes leftToRight {
0% {
left: -200%;
}
100% {
left: 150%;
}
}
👉 给了每个白云层级不同的大小，不同的动画时长，这样就可以直接显示成下面的样子啦
开窗？关窗？自己操作！
👉 看腻了蓝天白云不就得关起窗户看看空姐嘛。所以需要有个自己操作的窗户帘。
<div class="top"></div>
.top {
position: absolute;
left: 0;
top: -90%;
width: 100%;
height: 100%;
border-radius: 48px;
background: whitesmoke;
box-shadow: 0 0 0 4px #808080, 0 0 30px rgba(0, 0, 0, 0.4);
transition: 0.6s all ease-in-out;
cursor: pointer;
z-index: 10;
}
.top.closed {
top: -5%;
}
.top:before {
content: "";
display: block;
width: 40%;
height: 8px;
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
border-radius: 4px;
background-color: #808080;
}
.top:after {
content: "";
display: block;
width: 16px;
height: 8px;
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
border-radius: 4px;
background-image: radial-gradient(#5DF254, #15a10c);
-webkit-animation-name: light;
animation-name: light;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease;
animation-timing-function: ease;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@-webkit-keyframes light {
0% {
box-shadow: 0 0 0px #5DF254;
}
50% {
box-shadow: 0 0 20px #5DF254;
}
80% {
box-shadow: 0 0 40px rgba(93, 242, 84, 0);
}
}
@keyframes light {
0% {
box-shadow: 0 0 0px #5DF254;
}
50% {
box-shadow: 0 0 20px #5DF254;
}
80% {
box-shadow: 0 0 40px rgba(93, 242, 84, 0);
}
}
👉 点击窗户开关效果当然是用js来控制的啦，用到的逻辑就是给 top 类旁边新增一个 closed
$('.top').on('click', function(){
$(this).toggleClass('closed');
});
👆 我这里使用的是jquery去操作的，主要是为了放到码上掘金中展示出来
