如何用animate实现点击按钮时右侧弹出一个层，再点一下，层被隐藏
实现右侧弹出层
金属girl浏览 3183回答 2
2回答
-
不再热情似火
<!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> -
不再热情似火
你的意思是有动画效果吗？还是需要 动态添加/删除 keyframes那种类型的？
随时随地看视频慕课网APP
CSS3
Html/CSS