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 伪类:如果元素里面的元素聚焦了,就会有这个伪类