让我们先来看看实现的效果(接二十三天)
html_4">html代码
html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.html" title=css>css">
<title>第二十四天</title>
</head>
<body>
<div class="channel">
switch切换按钮啦！
</div>
<div class="container">
<!-- 速度切换开关 -->
<div id="switch" >
<div id="circle"></div>
</div>
<!-- 主画布 -->
<div class="main">
<!-- 太阳 -->
<div class="sun">
<!-- span[style=--i:$]*8 -->
<span style="html" title=css>css">--i:1"></span>
<span style="html" title=css>css">--i:2"></span>
<span style="html" title=css>css">--i:3"></span>
<span style="html" title=css>css">--i:4"></span>
<span style="html" title=css>css">--i:5"></span>
<span style="html" title=css>css">--i:6"></span>
<span style="html" title=css>css">--i:7"></span>
<span style="html" title=css>css">--i:8"></span>
</div>
<!-- 群山 -->
<div class="mountain a"> </div>
<div class="mountain b"> </div>
<div class="mountain c"> </div>
<div class="mountain d"> </div>
<div class="mountain e"> </div>
</div>
</div>
<script>
let swch=document.getElementById('switch');
swch.addEventListener('click',(e)=>{
// swch.classList.toggle('switched');
if(swch.classList.contains('switched')){
swch.classList.remove('switched');
} else{
swch.classList.add('switched');
}
});
</script>
</body>
</html>
html" title=css>css_62">html" title=css>css代码
html" title=css>css">:root {
--background-color: #2c3e50;
--border-color: #7591AD;
--text-color: #34495e;
--color1: #EC3E27;
--color2: #fd79a8;
--color3: #0984e3;
--color4: #00b894;
--color5: #fdcb6e;
--color6: #e056fd;
--color7: #F97F51;
--color8: #BDC581;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
font-size: 14px;
}
body{
width: 100vw;
height: 100vh;
background-color: var(--background-color);
display: flex;
justify-content: center;
align-items: center;
font-family: 'Montserrat', sans-serif, Arial, 'Microsoft Yahei';
}
.channel{
position: absolute;
width: 80%;
text-align: center;
top: 10vh;
left: 50%;
transform: translateX(-50%);
font-size: 5vmin;
font-weight:bold ;
color: #353535;
z-index: 10000;
}
.container{
width: 100vw;
height: 100vh;
/* background-color: #00b894; */
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
/* **********************
* 速度切换开关
* 不用checkbox实现，我们用html" title=js>js控制样式来实现
* ********************** */
#switch{
position: relative;
width: 60px;
height: 30px;
border: 2px solid #333;
border-radius: 30px;
cursor: pointer;
}
#switch::before,
#switch::after{
position: absolute;
line-height: 26px;
text-transform: uppercase;
font-weight: 800;
padding: 0 20px;
cursor: initial;
pointer-events: none;
}
#switch::before{
content: 'slow';
right: 90%;
color: var(--color8);
}
#switch::after{
content: 'fast';
left: 90%;
color: var(--color3);
}
/* 默认情况 */
#switch #circle{
position: absolute;
top: 3px;
left: 3px;
width: 20px;
height: 20px;
border: 2px solid #333;
border-radius: 50%;
box-shadow: inset 4px -2px 0 0 var(--color8);
transition: all .5s cubic-bezier(.74,1.28,.73,.99);
}
/* 点击选中的情况 */
#switch.switched #circle{
left: calc(100% - 20px - 3px);
box-shadow: inset 4px -2px 0 0 var(--color3);
}
/* **********************
* 这里是主画布外框
* ********************** */
.main{
position: relative;
width: 400px;
height: 300px;
border: 2px solid #333;
margin-top: 20px;
overflow: hidden;
}
/* **********************
* 这里是太阳
* ********************** */
.sun{
position: absolute;
width: 20px;
height: 20px;
border: 2px solid #333;
border-radius: 50%;
left:270px;
top: 50px;
display: flex;
justify-content: center;
align-items: center;
animation: sun_rotate 10s linear infinite;
}
@keyframes sun_rotate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
.sun span{
position: absolute;
display: block;
height: 2px;
width: 16px;
background-color: #333;
transform:
rotate(calc(var(--i) * 45deg))
translateX(-20px);
box-shadow: 4px 4px 0 0 var(--color5);
animation: sun_ray 1s linear infinite;
animation-delay: calc(var(--i) * -0.5s);
}
@keyframes sun_ray{
0%{
transform: rotate(calc(var(--i) * 45deg))
translateX(-20px) scaleX(1);
}
50%{
transform: rotate(calc(var(--i) * 45deg))
translateX(-20px) scaleX(0.6);
}
100%{
transform: rotate(calc(var(--i) * 45deg))
translateX(-20px) scaleX(1);
}
}
/* **********************
* 这里是群山
* ********************** */
.mountain{
position: absolute;
border: 2px solid #333;
transform: rotate(45deg);
}
.mountain.a{
width: 14px;
height: 14px;
left: 80px;
bottom: 35px;
}
.mountain.b{
width: 18px;
height: 18px;
left: 130px;
bottom: 45px;
}
.mountain.c{
width: 20px;
height: 20px;
left: 190px;
bottom: 60px;
}
.mountain.d{
width: 2px;
height: 2px;
left: 240px;
bottom: 62px;
border-bottom: none;
}
.mountain.e{
width: 14px;
height: 14px;
left: 285px;
bottom: 41px;
}
.mountain.a::after,
.mountain.b::after,
.mountain.c::after,
.mountain.d::after,
.mountain.e::after,
.mountain.a::before,
.mountain.b::before,
.mountain.c::before,
.mountain.d::before,
.mountain.e::before{
position: absolute;
content: '';
background-color: #333;
}
.mountain.a::after,
.mountain.b::after,
.mountain.c::after,
.mountain.d::after,
.mountain.e::after{
left: -2px;
top: 100%;
width: 2px;
}
.mountain.a::after{
height: 70px;
}
.mountain.b::after{
height: 50px;
}
.mountain.c::after{
height: 70px;
}
.mountain.d::after{
height: 14px;
}
.mountain.e::after{
height: 18px;
}
.mountain.a::before,
.mountain.b::before,
.mountain.c::before,
.mountain.d::before,
.mountain.e::before{
top: -2px;
left: 100%;
height: 2px;
}
.mountain.a::before{
width: 14px;
box-shadow: -5px -5px 0 0 var(--color4);
}
.mountain.b::before{
width: 14px;
box-shadow: -5px -5px 0 0 var(--color4);
}
.mountain.c::before{
width: 36px;
box-shadow: -14px -5px 0 0 var(--color4);
}
.mountain.d::before{
width: 55px;
box-shadow: 5px 5px 0 0 var(--color4);
}
.mountain.e::before{
width: 70px;
box-shadow: 5px 5px 0 0 var(--color4);
}
设计思路与今日份知识总结
设计思路
- 1.先画一些小正方形
- 2.before和after在正方形的垂直两边画延长线(可以先用和正方形不一样的颜色来区分，方便画线)
- 3.调整小正方形到底部，然后进行一个rotate旋转就可以得到山了
- 4.使用box-shadow给山加点绿植，就完成了，呵呵
知识总结
剩饭尔。无新知识！
