一个使用: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>

运行时的动态效果:
在这里插入图片描述

汪子熙 CSDN认证博客专家 前端框架 Node.js SAP
JerryWang,2007年从电子科技大学计算机专业硕士毕业后加入SAP成都研究院工作至今。Jerry是SAP社区导师,SAP中国技术大使。2020年5月下旬,Jerry做了脑部肿瘤的开颅切除手术,对编程和人生又有了新的感悟。
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__0809 返回首页