当前位置：首页 > news >正文

有趣的按钮分享

news 2025/7/30 10:37:01

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。

广告打完，我们进入正题，先看效果：
在这里插入图片描述
废话不多，上源码：

<button class="btn-shine"><span>Shine</span>
</button>

button {position: relative;margin: 0;padding: 17px 35px;outline: none;text-decoration: none;display: flex;justify-content: center;align-items: center;cursor: pointer;text-transform: uppercase;background-color: #fff;border: 1px solid rgba(22, 76, 167, 0.6);border-radius: 10px;color: #1d89ff;font-weight: 400;font-family: inherit;z-index: 0;overflow: hidden;transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
}button span {color: #164ca7;font-size: 14px;font-weight: 500;letter-spacing: 0.7px;
}button:hover {animation: rotate624 0.7s ease-in-out both;
}button:hover span {animation: storm1261 0.7s ease-in-out both;animation-delay: 0.06s;
}@keyframes rotate624 {0% {transform: rotate(0deg) translate3d(0, 0, 0);}25% {transform: rotate(3deg) translate3d(0, 0, 0);}50% {transform: rotate(-3deg) translate3d(0, 0, 0);}75% {transform: rotate(1deg) translate3d(0, 0, 0);}100% {transform: rotate(0deg) translate3d(0, 0, 0);}
}@keyframes storm1261 {0% {transform: translate3d(0, 0, 0) translateZ(0);}25% {transform: translate3d(4px, 0, 0) translateZ(0);}50% {transform: translate3d(-3px, 0, 0) translateZ(0);}75% {transform: translate3d(2px, 0, 0) translateZ(0);}100% {transform: translate3d(0, 0, 0) translateZ(0);}
}.btn-shine {border: 1px solid;overflow: hidden;position: relative;
}.btn-shine span {z-index: 20;
}.btn-shine:after {background: #38ef7d;content: "";height: 155px;left: -75px;opacity: 0.4;position: absolute;top: -50px;transform: rotate(35deg);transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);width: 50px;z-index: -10;
}.btn-shine:hover:after {left: 120%;transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
}