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

汪子熙 2020-11-11 21:45:58

444

分类专栏：前端开发相关

最后发布:2020-11-11 21:45:58首次发布:2020-11-11 21:45:58

本文链接：https://blog.csdn.net/i042416/article/details/109632153

版权

源代码：

<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>