【每日一练】05—CSS实现创意按钮动画效果

作者 | 杨小爱

写在前面

今天是【每日一练】项目练习的第5天&＃xff0c;如果你前面已经坚持练习了4天&＃xff0c;那么&＃xff0c;恭喜你&＃xff0c;你还没有放弃&＃xff01;

今天我们练习的小项目是一个按钮的效果&＃xff0c;这个按钮功能&＃xff0c;我们在任何一个开发项目中&＃xff0c;都会用到它&＃xff0c;而很多时候&＃xff0c;我们为了吸引用户&＃xff0c;我们的设计一定要出彩&＃xff0c;毕竟现在网络上的网站不计其数&＃xff0c;如果我们在视觉能够吸引到用户的话&＃xff0c;用户可能会考虑继续浏览&＃xff0c;不然就直接退出离开了。

因此&＃xff0c;我们今天练习的案例是一个比较有创意的按钮效果&＃xff0c;希望对你的开发项目也有用。

以下是今天小练习的最终效果&＃xff1a;

HTML代码&＃xff1a;






首页HTML/CSSJavascript源码好课主机



CSS代码&＃xff1a;

*
{margin: 0;padding: 0;box-sizing: border-box;font-family: &＃39;Poppins&＃39;, sans-serif;
}
body
{display: flex;justify-content: center;align-items: center;min-height: 100vh;background: #0e1538;overflow: hidden;
}
a
{position: relative;padding: 20px 60px;display: flex;justify-content: center;align-items: center;background: rgba(0,0,0,0.5);overflow: hidden;text-decoration: none;margin: 80px 40px;transition: 1s;-webkit-box-reflect: below 1px linear-gradient(transparent,transparent,#0004);
}
a:hover
{background: var(--clr);box-shadow: 0 0 10px var(--clr),0 0 30px var(--clr),0 0 60px var(--clr),0 0 100px var(--clr);
}
a::before
{content: &＃39;&＃39;;position: absolute;width: 40px;height: 400%;background: var(--clr);transition: 1s;animation: animate 2s linear infinite;animation-delay: calc(-0.33s * var(--i));
}
a:hover::before
{width: 120%;
}
a::after
{content: &＃39;&＃39;;position: absolute;inset: 4px;background: #0e1538;transition: 0.5s;
}
a:hover::after
{background: var(--clr);
}
&＃64;keyframes animate
{0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}
}
span
{position: relative;z-index: 1;font-size: 2em;color: #fff;opacity: 0.5;text-transform: uppercase;letter-spacing: 4px;
}
a:hover span
{opacity: 1;
}

写在最后

以上就是每日一练的全部内容&＃xff0c;希望今天的小练习对你有用&＃xff0c;如果你觉得有帮助的话&＃xff0c;请点赞我&＃xff0c;关注我&＃xff0c;并将它分享给你身边做开发的朋友&＃xff0c;也许能够帮助到他。

我是杨小爱&＃xff0c;我们明天见。

学习更多技能

请点击下方公众号