Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
HOVER ME
css
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #060505; } .button { border: 2px solid #d2bdff; height: 80px; width: 200px; border-radius: 4px; position: relative; cursor: pointer; font-family: "Roboto", sans-serif; margin: 25px; } .button::after { content: "HOVER ME"; position: absolute; top: 41%; left: 50%; transform: translate(-50%); color: #d2bdff; transition: all 0.1s linear; } .button::before { content: ""; position: relative; display: block; height: 15px; width: 15px; background: #d2bdff; box-shadow: 0px 0px 10px 3px #0ff; margin-left: -8px; margin-top: -8px; opacity: 0; transition: all 0.1s linear; border-radius: 100%; animation: star 1.3s linear infinite; } @keyframes star { 0% { margin-left: -8px; margin-top: -8px; } 25% { margin-left: 194px; margin-top: -8px; } 50% { margin-left: 194px; margin-top: 75px; } 75% { margin-left: -8px; margin-top: 75px; } 100% { margin-left: -8px; margin-top: -8px; } } .button:hover::before { opacity: 1; animation: star 1.3s linear infinite; } .button:hover::after { content: "I'M GLOWING"; text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 20px #82bedc, 0 0 30px #82bedc, 0 0 40px #82bedc, 0 0 50px #82bedc, 0 0 60px #82bedc; } .button2 { position: relative; display: inline-block; padding: 30px 61px; border-radius: 4px; color: #03e9f4; text-decoration: none; text-transform: uppercase; overflow: hidden; margin: 25px; font-family: "Roboto", sans-serif; filter: hue-rotate(0deg); border: 2px solid #d2bdff; transition: all 0.1s linear; } .button2:hover { border: 1px solid transparent; } .button2:hover span { position: absolute; display: block; } .button2:hover span:nth-child(1) { filter: hue-rotate(0deg); top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, transparent, #3a86ff); animation: animate1 1s linear infinite; } @keyframes animate1 { 0% { left: -100%; } 50%, 100% { left: 100%; } } .button2:hover span:nth-child(2) { filter: hue-rotate(60deg); top: -100%; right: 0; width: 3px; height: 100%; background: linear-gradient(180deg, transparent, #3a86ff); animation: animate2 1s linear infinite; animation-delay: 0.25s; } @keyframes animate2 { 0% { top: -100%; } 50%, 100% { top: 100%; } } .button2:hover span:nth-child(3) { filter: hue-rotate(120deg); bottom: 0; right: 0; width: 100%; background: linear-gradient(270deg, transparent, #3a86ff); animation: animate3 1s linear infinite; animation-delay: 0.5s; } @keyframes animate3 { 0% { right: -100%; height: 3px; } 50%, 100% { height: 2px; right: 100%; } } .button2:hover span:nth-child(4) { filter: hue-rotate(300deg); bottom: -100%; left: 0; width: 3px; height: 100%; background: linear-gradient(360deg, transparent, #3a86ff); animation: animate4 1s linear infinite; animation-delay: 0.75s; } @keyframes animate4 { 0% { bottom: -100%; } 50%, 100% { bottom: 100%; } }
JavaScript
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>按钮悬停动画-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号