欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 编程资源 > 编程问答 >内容正文

编程问答

一个使用：focus-within伪类实现的button选中动画效果

发布时间：2023/12/19 编程问答 39 豆豆
生活随笔 收集整理的这篇文章主要介绍了 一个使用：focus-within伪类实现的button选中动画效果 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

源代码：

<html> <style>.g-container {width: 300px;margin: 50px auto; }.g-container p {line-height: 1.4;padding-left: 40px; }.g-container input {position: absolute;border: none;outline: none;background: none;width: 20px;height: 20px;border-radius: 50%;border: 1px solid #aaa;box-sizing: border-box;top: 50%;left: 10px;transform: translate(0, -50%);cursor: pointer; }.g-container .g-section {position: relative;padding: 10px;box-sizing: border-box;border: 1px solid transparent; }.g-container .g-section:focus-within {background: linear-gradient(90deg, #03a9f4 50%, transparent 0) repeat-x, linear-gradient(90deg, #03a9f4 50%, transparent 0) repeat-x, linear-gradient(0deg, #03a9f4 50%, transparent 0) repeat-y, linear-gradient(0deg, #03a9f4 50%, transparent 0) repeat-y;background-size: 8px 1px, 8px 1px, 1px 8px, 1px 8px;background-position: 0 0, 0 100%, 0 0, 100% 0;animation: linearGradientMove .5s infinite linear; }.g-container .g-section:focus-within input {background: #03a9f4; }@keyframes linearGradientMove {100% {background-position: 6% 0, -6% 100%, 0 -6%, 100% 6%; } }</style><div class="g-container"><div class="g-section"><input type="button"><p>:focus-within 是一个CSS 伪类 ，表示一个元素获得焦点，或，该元素的后代元素获得焦点。换句话说，元素自身或者它的某个后代匹配:focus伪类。</p></div><div class="g-section"><input type="button"><p>:focus-within 是一个CSS 伪类 ，表示一个元素获得焦点，或，该元素的后代元素获得焦点。换句话说，元素自身或者它的某个后代匹配:focus伪类。</p></div><div class="g-section"><input type="button"><p>:focus-within 是一个CSS 伪类 ，表示一个元素获得焦点，或，该元素的后代元素获得焦点。换句话说，元素自身或者它的某个后代匹配:focus伪类。</p></div> </div> </html>

运行时的动态效果：

总结

以上是生活随笔为你收集整理的一个使用：focus-within伪类实现的button选中动画效果的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。