background：url不显示图片和几个CSS动画

x_lcw

已于 2022-05-24 15:55:39 修改

阅读量2.4k

点赞数

分类专栏： Web网页前端文章标签： css 动画 css3 vue vue.js

于 2022-05-16 18:35:43 首次发布

本文链接：https://blog.csdn.net/qq_53318060/article/details/124747714

版权

Web网页前端专栏收录该内容

38 篇文章 3 订阅

订阅专栏

vue中background：url(img)不显示图片

在这里插入图片描述
也可以使用内嵌式，图片使用require导入，div也要有高度的，否则也是不显示。

<div id="login-container" :style="{background: 'url(' + bgImg + ')'}">

事件绑定的函数中传入dom参数

<input type="text" name="" @focus="focusAction($event.target)" @blur="blurAction($event.target)">

传入 $event.target 就好了

css几个动画

第一个动画，聚焦时，展开水平线

    <input type="text" name="" id="">
    <div class="demo"></div>

    <style>
        input{
            border: none;
            background-color: red;  
        }
        .demo{
            width: 200px;
            height: 4px;
            position: absolute;
            /* 居中 */
            top: calc(50% - 2px);
            left: calc(50% - 100px);
            /* 颜色 */
            background-color: #000;
            transform: scaleX(0);
            transition: all 0.3s;
        }
        input:focus ~ .demo{
            transform: scaleX(1);
        }
    </style>

另一种实现方式：使用伪类

.input-div{
    // 父级设置为 relative, 使得子级相对于它进行定位
    position: relative;
}
.input-div:before,.input-div:after{
    content: '';
    position: absolute;
    bottom: 30px;			// 控制位置
    width: 0%;
    height: 1px;
    background-color: #03a9f4;
    transition: 0.6s;
}

//设置这两条线的起点位置
// 注意 right50和left50效果是不一样的
.input-div:before{
    right: 50%;         // before的右侧 距进行相对定位的父元素right50%
}
.input-div:after{
    left:50%;           // after的左侧 距进行相对定位的父元素距left50%
}

// 动画就是 从 0-50
// 当聚焦时,添加了一个changColor类
.input-div.changeColor:before,.input-div.changeColor:after{
    width: 50%;
    // 宽度是 与之进行相对定位的父元素的一半
}