其他
【每日一练】76—一款非常有创意的删除按钮动画效果
写在前面
今天我们一起来练习一个非常有创意的删除按钮动画效果，具体效果如下：
<!DOCTYPE html><html><head><title>【每日一练】76—一款非常有创意的删除按钮动画效果</title></head><body> <a href="#" class="btn"><span></span><text>Delete</text></a> <script> let btn = document.querySelector('.btn'); btn.onclick = function(){ btn.classList.toggle('active'); } </script></body></html>
*{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif;}body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #222;}a { position: relative; height: 50px; min-width: 160px; background: #333; color: #fff; text-decoration: none; display: flex; justify-content: center; align-items: center; border-radius: 4px; overflow: hidden; transition: 0.5s; box-shadow: 0 5px 20px rgba(0,0,0,0.15);}a.active { background: #2196f3;}a span { position: absolute; left: 40px; width: 18px; height: 20px; display: inline-block; background: #fff; margin-right: 10px; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; transition: 0.5s;}a:hover span { transform: scale(2) rotate(60deg) translateY(10px);}a.active span { left: 50%; transform: translateX(-50%) rotate(-45deg); border-radius: 0; width: 20px; background: transparent; border-left: 2px solid #fff; border-bottom: 2px solid #fff; height: 10px;}a span::before{ content: ''; position: absolute; top: -3px; width: 100%; height: 2px; background: #fff; box-shadow: 12px -2px 0 #333, 12px -3px 0 #333, 15px -1px 0 #333, 6px -2px 0 #fff; transition: 0.5s;}a.active span::before,a.active:hover span::before{ transform: scale(0);}a:hover span::before{ transform: rotate(-90deg) translateX(50%) translateY(-10px);}a text { position: absolute; right: 40px; transition: 0.5s;}a:hover text, a.active text { transform: translateX(-50px) translateY(-5px) scale(0);}写在最后
以上就是今天【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号