css transition实现边框动画效果

最新推荐文章于 2024-09-28 01:23:25 发布

原创最新推荐文章于 2024-09-28 01:23:25 发布 · 3.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#边框动画

css 专栏收录该内容

52 篇文章

订阅专栏

本文详细介绍如何使用CSS伪类:focus-within实现动画效果，从边框底部中间开始，向两边延伸，通过LESS预处理器语言编写，适用于Vue.js组件。文章深入讲解了代码实现细节，包括过渡效果和颜色变化。

1. 动画从边框底部中间开始，向两边延伸，代码如下，

<template>
  <div class="hello">
    <div :class="css.aaa">
      <input type="text">
    </div>

  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style module='css' lang="less">
.aaa {
  position: relative;
  width: 200px;
  height: 100px;
  background: red;
  padding: 0px;
  &:after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 50%;
    width: 0;
    height: 0;
    border-bottom: 2px solid transparent;
    transition: 800ms ease-out;
  }
  &:focus-within {
    background: #000;
    &:after {
      width: 100%;
      left: 0;
      border-bottom-width: 2px;
      border-bottom-color: blue;
    }
  }
}
</style>

关键部分：

focus-within 伪类:如果元素里面的元素聚焦了，就会有这个伪类