记录实现鼠标放入,卡片缓慢上升的动效

<template>
    <div class="card">
        <div class="top">
            <p class="time">02/27 22:39</p>
            <p class="label">理想</p>
        </div>
        <p class="content">数据展示</p>
        <div class="footer">
            <div class="icon">
                <el-icon><Star /></el-icon>
                <span>0</span>
            </div>
            <p class="note-name">superman</p>
        </div>
    </div>
</template>

<style lang="less" scoped>
    p{
        padding: 0;
        margin: 0;
    }
    .card{
        position: relative;
        transition: all .3s;
        height: 240px;
        width: 288px;
        box-sizing: border-box;
        padding: 12px 20px;
        border: 1px solid transparent;
        background: rgba(168, 237, 138, 0.3);
        .top{
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: #949494;
            padding-bottom: 16px;
        }
        .content{
            font-size: 14px;
            height: 140px;
            cursor: pointer;
        }
        .footer{
            display: flex;
            justify-content: space-between;
            .icon{
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .note-name{
                font-size: 16px;
            }
        }
    }
    .card:hover{
        transform: translateY(-10px);
    }
</style>

​ 以上代码会展示一个卡片视图，鼠标进入会有向上升的趋势

关键代码

.card{
	transition: all .3s;
}
.card:hover{
	transform: translateY(-10px);
}

​ transform通常用于变换标签，transition指定变换的属性和变换执行完所用的时间，会有个平缓的过渡效果。

​ 在css中常用有过渡（transition），变换（transform），和动画（annimation）三种可以产生互动的效果。路长久远，君须向前。