css3加js寫的下拉選單動畫小圖示,不好的地方請指點,謝謝
阿新 • • 發佈:2019-02-06
<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>