CSS实现卡片浮动效果

效果演示

CSS实现卡片浮动效果_第1张图片

实现原理

给卡片添加 css3 新的过度属性(transition),鼠标移入和移出时都会触发这个过度属性,使卡片向上偏移一段距离,同时扩大卡片的背景阴影,从而实现卡片的浮动效果。

关键代码

.card-box .card {
    transition: transform .2s, box-shadow .2s;
    /* 省略部分代码 */
}
.card-box .card:hover {
    transition: transform .2s, box-shadow .2s;
    transform: translateY(-4px);
    box-shadow: 4px 4px 8px rgba(0, 0, 0, .1), -4px -4px 8px rgba(0, 0, 0, .1);
}

源代码

DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>卡片浮动效果title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-size: 20px;
            background-color: #e3e3e3;
        }
        .card-box {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: space-between;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 40em;
            height: 22em;
            padding: 1.5em;
            background-color: #e3e3e3;
        }
        .card-box .card {
            transition: transform .2s, box-shadow .2s;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 5.5em;
            height: 3.5em;
            margin-bottom: 1em;
            border-radius: .5em;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, .1), -2px -2px 4px rgba(0, 0, 0, .1);
            background-color: #fff;
            color: #3e3e3e;
            font-size: 1.5em;
            font-weight: 700;
            letter-spacing: 4px;
            cursor: pointer;
        }
        .card-box .card:hover {
            transition: transform .2s, box-shadow .2s;
            transform: translateY(-4px);
            box-shadow: 4px 4px 8px rgba(0, 0, 0, .1), -4px -4px 8px rgba(0, 0, 0, .1);
        }
    style>
head>
<body>
    <div class="card-box">
        <div class="card"><span>富强span>div>
        <div class="card"><span>民主span>div>
        <div class="card"><span>文明span>div>
        <div class="card"><span>和谐span>div>
        <div class="card"><span>自由span>div>
        <div class="card"><span>平等span>div>
        <div class="card"><span>公正span>div>
        <div class="card"><span>法治span>div>
        <div class="card"><span>爱国span>div>
        <div class="card"><span>敬业span>div>
        <div class="card"><span>诚信span>div>
        <div class="card"><span>友善span>div>
    div>
body>
html>

你可能感兴趣的:(css,css3,html)