實現(xiàn)右側(cè)彈出層
2 回答
不再熱情似火
TA貢獻15條經(jīng)驗 獲得超6個贊
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding:0;
margin: 0;
}
html{
font-size:20px;
}
button{
padding:.2rem 1rem;
font-size:1rem;
line-height:1;
border:1px solid #67a;
box-shadow:.1rem .1rem .3rem .2rem gray;
color:#fff;
text-shadow:.1rem -.1rem .13rem gray;
background:#58a;
background:linear-gradient(30deg,#58a,#67a);
}
button:hover{
box-shadow:.05rem .05rem .1rem .2rem gray;
color:orange;
}
.div{
height: 150px;
width: 100px;
background:linear-gradient(-135deg,transparent 15px,#58a 0,#67a);
position: absolute;
left: 100px;
top: 0;
visibility: visible;
opacity:1;
filter:alpha(opacity: 100);
transition:all .3s linear;
}
.div.hide{
opacity:0;
filter:alpha(opacity: 100);
visibility:hidden;
}
</style>
</head>
<body>
<button>click</button>
<div class="div hide"></div>
<script>
function $(selector) {
return document.querySelectorAll(selector);
}
var button = $('button')[0],
div = $('.div')[0];
button.addEventListener('click',function () {
div.classList.toggle('hide');
},false);
</script>
</body>
</html>
添加回答
舉報
0/150
提交
取消