html实现卡片动态效果

⌚Time: 2024-05-01 21:10:00

👨‍💻Author: Jack Ge

使用css样式实现卡片效果,并且鼠标覆盖时会变大。



    .card{
        color:rgb(224,231,247);
        /*背景色*/
        background-color: rgb(118,87,122);
        opacity: 0.8;/*透明度*/

        /*大小*/
        width: 90vw;
        height: 16vh;

        /*间距*/
        margin: auto;
        margin-bottom: 3vh;
        /*鼠标样式*/
        cursor: pointer;

        transition: all 0.5s ease;/*变换时间*/
        border: rgb(149, 158, 158) 3px solid;/*边框*/
        border-radius: 2vh;/*圆角*/
    }
    .card:hover {
        /*鼠标覆盖时缩放*/
        transform: scale(1.05);
        /*改变透明度*/
        opacity: 0.9;
    }