css3加js写的下拉菜单动画小图标,不好的地方请指点,谢谢
2018-03-14 19:33
471 查看
<style media="screen">
.box span{
width: 18px;
height: 2px;
margin: 4px 3px 0;
background: #000;
display: block;
transition: all .6s;
-webkit-transition:all .6s;
transform-origin:0 50%;
-webkit-transform-origin:0 50%;
}
.box .first-span{
transform:rotate(45deg);
-ms-transform:rotate(45deg); /* IE 9 */
-moz-transform:rotate(45deg); /* Firefox */
-webkit-transform:rotate(45deg); /* Safari 和 Chrome */
-o-transform:rotate(45deg); /* Opera */
}
.box .second-span{
opacity: 0;
}
.box .third-span{
transform:rotate(-45deg);
-ms-transform:rotate(-45deg); /* IE 9 */
-moz-transform:rotate(-45deg); /* Firefox */
-webkit-transform:rotate(-45deg); /* Safari 和 Chrome */
-o-transform:rotate(-45deg); /* Opera */
}
</style>
<div class="box">
<span id="first-span"></span>
<span id="second-span"></span>
<span id="third-span"></span>
</div>
<script>
var oBox = document.getElementsByClassName('box')[0],
firstSpan = document.getElementById('first-span'),
secondSpan = document.getElementById('second-span'),
thirdSpan = document.getElementById('third-span')
oBox.onclick = function(){
if(firstSpan.className != ''){
firstSpan.classList.remove('first-span')
}
else {
firstSpan.classList.add('first-span')
}
if(secondSpan.className != ''){
secondSpan.classList.remove('second-span')
}
else {
secondSpan.classList.add('second-span')
}
if(thirdSpan.className != ''){
thirdSpan.classList.remove('third-span')
}
else {
thirdSpan.classList.add('third-span')
}
}
</script>
.box span{
width: 18px;
height: 2px;
margin: 4px 3px 0;
background: #000;
display: block;
transition: all .6s;
-webkit-transition:all .6s;
transform-origin:0 50%;
-webkit-transform-origin:0 50%;
}
.box .first-span{
transform:rotate(45deg);
-ms-transform:rotate(45deg); /* IE 9 */
-moz-transform:rotate(45deg); /* Firefox */
-webkit-transform:rotate(45deg); /* Safari 和 Chrome */
-o-transform:rotate(45deg); /* Opera */
}
.box .second-span{
opacity: 0;
}
.box .third-span{
transform:rotate(-45deg);
-ms-transform:rotate(-45deg); /* IE 9 */
-moz-transform:rotate(-45deg); /* Firefox */
-webkit-transform:rotate(-45deg); /* Safari 和 Chrome */
-o-transform:rotate(-45deg); /* Opera */
}
</style>
<div class="box">
<span id="first-span"></span>
<span id="second-span"></span>
<span id="third-span"></span>
</div>
<script>
var oBox = document.getElementsByClassName('box')[0],
firstSpan = document.getElementById('first-span'),
secondSpan = document.getElementById('second-span'),
thirdSpan = document.getElementById('third-span')
oBox.onclick = function(){
if(firstSpan.className != ''){
firstSpan.classList.remove('first-span')
}
else {
firstSpan.classList.add('first-span')
}
if(secondSpan.className != ''){
secondSpan.classList.remove('second-span')
}
else {
secondSpan.classList.add('second-span')
}
if(thirdSpan.className != ''){
thirdSpan.classList.remove('third-span')
}
else {
thirdSpan.classList.add('third-span')
}
}
</script>
相关文章推荐
- 100多个纯CSS3动画图标
- css3 图标上下移动动画
- 【css3】js条件下多次触发同一个css3动画的解决方案
- Bounce.js – 快速创建漂亮的 CSS3 动画效果
- 前端制作动画的几种方式(css3,js)
- js监听css3动画实现
- JS如何监控css3动画
- 多彩图标按钮动画下拉菜单
- 【css3】js条件下多次触发同一个css3动画的解决方案
- wow.min.js 支持css3多种动画的效果!
- 【动画】简易制作贝塞尔曲线动画(JS+css3+canvas)
- js css3写嵌套立方体动画效果(大立方内套小立方)
- Html+CSS3技术实现动画、天气图标动态效果 效果很酷
- css3 - 图标元素动画效果1 - 只执行一次动画
- Bounce.js-可视化CSS3动画代码生成js插件
- JS模拟CSS3动画-贝塞尔曲线
- 菜鸟一枚,有什么错误,或者不好的地方请大家多多指点
- 自己写的一个针对特定网站的网络爬虫,初学者,大家瞧瞧,不好的地方,给点建议!谢谢!
- jquery使用CSS3实现文字动画效果插件Textillate.js
- 全屏滚动插件fullpage.js的回调函数,css3动画