每天一个jquery插件-css实现风扇1
css实现风扇1
下面是效果图，当然假如将js参与进来的话就会很容易实现这个效果，不过今天讨论一下纯css是个啥，我们要知道一个概念，js并不是效果的支持者，而只是类似于一种将你的想法转变成支持这种效果的途径，一个网页动画的支持是以css为基础的，所以理论是只要你css掌握的足够棒，涉及页面动画效果之类的，完全可以纯css实现，所以今天就这个拓展一下自己的解决方法。
目标效果如下
我的测试代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css控制动画</title>
<style>
#div {
border: 1px solid lightgray;
width: 95%;
height: 300px;
margin: 20px auto;
}
#red:hover~#div {
background-color: red;
}
#orange:hover~#div {
background-color: orange;
}
#yellow:hover~#div {
background-color: yellow;
}
#green:hover~#div {
background-color: green;
}
#purple:hover~#div {
background-color: purple;
}
#blue:hover~#div {
background-color: blue;
}
</style>
</head>
<body>
<ul>
<li id="red">红</li>
<li id="orange">橙</li>
<li id="yellow">黄</li>
<li id="green">绿</li>
<li id="blue">蓝</li>
<li id="purple">紫</li>
<div id="div"></div>
</ul>
</body>
</html>
测试案例效果
思路解释
- 就着上面的我的测试案例我是想看看能不能做到类似于状态控制得效果，就是一个很有用的路子，你悬浮在一个dom上，但是你的目标是同时更改另外一个dom的样式，在这里面我找到很多有用的想法，大家百度能看到更多
- ①假如你触发的对象与变化的对象是父子关系，那么可以直接
doma:hover domb{color:red};也就是空格之后该写啥就能直接控制了 - ②假如你的触发对象要变化对象是兄弟关系，那么写法就是这样的
doma:hover+domb{color:red};就是空格变成了加号，找到下一个 - ③假如触发对象和变化对象同级但是不是紧挨着的，那么就是这样的
doma:hover~domb{color:red}; - 嗯，这样子之后我们想要知道的就差不多了，配合上伪类元素我们就可以达到上述效果了，当然不只是常用的hover之类的效果，像active之类的我们也没办法达到让样式维持下去的效果，但是我们再分析一下风扇调档有个什么关系？
就是唯一性,想想是不是和单选按钮刚好效果一致？所以我们就可以用radio：checked这个伪类实现效果了，（事后看了看源码效果好像还真是用这个实现的） - 所以今天先到这，明天把风扇整个弄出来，未完，溜了