每天一个jquery插件-css实现风扇2
css实现风扇2
辣眼睛警告，极度敷衍ing
实现效果
代码部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css控制动画</title>
<style>
#div {
border: 1px solid lightgray;
width: 95%;
height: 300px;
margin: 20px auto;
position: relative;
}
#r1:checked~#fs{
animation:xz 1s linear infinite;
}
#r2:checked~#fs{
animation:xz 0.5s linear infinite;
}
#r3:checked~#fs{
animation:xz 0.25s linear infinite;
}
#tz:checked~fs{
animation: none;
}
.an{
opacity: 0;
}
.lb{
display: flex;
border: 1px solid gray;
width: 30px;
height: 30px;
border-radius:50%;
justify-content: center;
align-items: center;
font-size: 12px;
z-index: 7;
position: absolute;
}
.an:checked+.lb{
background-color: lightgray;
}
@keyframes xz{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
/* 开始绘制与移动每个部件 */
#fs{
position: absolute;
top: 0;
left: 0;
z-index: 5;
}
.lb0{
top: 260px;
left: 50px;
}
.lb1{
top: 260px;
left: 90px;
}
.lb2{
top: 260px;
left: 130px;
}
.lb3{
top: 260px;
left: 170px;
}
#fskz{
border: 3px solid black;
width: 190px;
height: 190px;
border-radius:50%;
position: absolute;
left: 30px;
top: 30px;
z-index: 5;
display: flex;
justify-content: center;
align-items: center;
}
#gz{
background-color: lightgray;
width: 50px;
height: 50px;
z-index: 9;
position: absolute;
border-radius: 50%;
}
#gj1{
width:100%;
height:10px;
z-index: 2;
background-color: lightgray;
position: absolute;
}
#gj2{
width:100%;
height:10px;
z-index: 2;
background-color: lightgray;
transform: rotate(120deg);
position: absolute;
}
#gj3{
width:100%;
height:10px;
z-index: 2;
background-color: lightgray;
transform: rotate(240deg);
position: absolute;
}
#dz{
background-color:lightblue;
width: 260px;
height: 50px;
border-radius: 50%;
position: absolute;
bottom: 0;
z-index: 0;
}
#zz{
background-color: lightblue;
width: 40px;
height: 160px;
position: absolute;
bottom: 0;
left:110px;
}
</style>
</head>
<body>
<div id="div">
<input type="radio" class="an" id="tz" name="fs" /><label for="tz" class="lb lb0">停止</label>
<input type="radio" class="an" id="r1" name="fs" /><label for="r1" class="lb lb1">1</label>
<input type="radio" class="an" id="r2" name="fs" /><label for="r2" class="lb lb2">2</label>
<input type="radio" class="an" id="r3" name="fs" /><label for="r3" class="lb lb3">3</label>
<img src="img/风扇.png" id="fs" />
<div id="fskz">
<div id="gz"></div>
<div id="gj1"></div>
<div id="gj2"></div>
<div id="gj3"></div>
</div>
<div id="dz"></div>
<div id="zz"></div>
</div>
</body>
</html>
听我bb
- 额，感觉我知道的东西好少，之前总是抱着一种我有想法愿意去实践的思想，所以忽视了基础的学习，像搞这个的时候让我难受的一匹，因为很多东西并不是你想翻它牌子了就能让它按照你的意愿去行动，无非就是积累的差异了。
- 这个的技术点就是关注俩个点，第一网上很多说纯css实现诸如radio checkbox美化样式的博客，我一直以为可以css直接给完成，所以今天折腾半袖发现系统默认的控件是没办法改的，最多给藏起来，用for来让其他的空间继承它的属性，然后把继承者的外观和样式以及伪类属性进行修改才能达到诸如此类的效果，我是今天百度才知道for的作用，之前遇见过但是没有深究，啊QAQ，所以说基础真的很重要，第二就是在用样式控制得时候我的补充一下我昨天的发现，其实这些都是归于一个css选择器的范畴，并没有办法直接达到我描述的效果，就是没办法直接不相干的元素互相控制(如果大佬知道咋操作麻烦教教我，我立马三连上车qwq)
- 嗯，这个是我搜到的讲css选择器的地址可以去看看