html5一款响应式服务列表卡片（带阴影和摇晃效果）布局模板

responsive sections layout template

h5, template, service card

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 1482
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

* {
    margin: 0;
    font: inherit;
}
.ico svg,
.ico:before {
    border-radius: 50%;
    transform-origin: 50% 0;
    transform: rotate(-8deg);
    animation: osc 0.3s ease-in-out infinite alternate;
}
@keyframes osc {
    to {
        transform: rotate(8deg);
    }
}
div.container {
    --narr: 1;
    --notnarr: calc(1 - var(--narr));
    --wide: 0;
    --notwide: calc(1 - var(--wide));
    --nor: calc(var(--notnarr)*var(--notwide));
    --or: calc(1 - var(--nor));
    --sum: calc(1 + var(--narr));
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    overflow-x: hidden;
    min-height: 100vh;
    background: linear-gradient(to right top, #ebedec, #e3e7e6, #dbe1e0, #d3dadb, #ccd4d6);
}
body:before {
    --uw: calc(var(--nor)*(100% - var(--n)*2em)/var(--n) + var(--or)*12.5em);
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    height: calc(var(--sum)*2*var(--uw));
    transform: translate(calc(var(--sum)*50%/var(--n)), -50%);
    background: radial-gradient(circle at calc(50% - 1em) calc(39% - 1em), #fff calc(0.25em - 1px), rgba(255, 255, 255, 0) 0.25em), radial-gradient(circle at calc(50% + 1em) calc(39% - 1em), #fff calc(0.25em - 1px), rgba(255, 255, 255, 0) 0.25em), radial-gradient(circle at 50% 39%, #fff calc(0.625em - 1px), rgba(255, 255, 255, 0) 0.625em);
    background-size: calc(50%/(2 - var(--narr))) calc(100%/(1 + var(--narr)));
    clip-path: inset(0 calc(var(--sum)*25%) 0 0);
    filter: drop-shadow(5px 5px 4px rgba(0, 0, 0, 0.2));
    content: '';
}
@media (max-width: 480px) {
    body:before {
        display: none;
    }
}
@media (min-width: 38em) {
    body {
        --narr: 0;
    }
}
@media (min-width: 58em) {
    body {
        --wide: 1;
    }
}
.hid {
    position: absolute;
    clip-path: inset(50%);
}
path {
    --s: 2;
    fill: none;
    stroke: currentcolor;
    stroke-width: var(--s);
    stroke-linecap: round;
}
path.d {
    stroke-dasharray: 0 calc(2*var(--s));
}
path.t {
    --s: 4;
}
section {
    display: flex;
    flex-direction: column;
    padding: 1em 1em;
    min-width: 7.5em;
    width: calc(var(--nor)*(100% - var(--n)*2em)/var(--n) + var(--or)*12.5em);
    font-family: sans-serif;
    text-align: center;
    text-transform: uppercase;
}
h3,
a {
    color: var(--c0);
}
h3 {
    padding: 1em 0 .5em;
    font-size: calc(var(--nor)*2vw + var(--or)*1.16em);
}
p {
    height: 3em;
    font-size: 0.75em;
}
.ico {
    order: -1;
    position: relative;
    margin-bottom: calc(100% + 2.875em + 2px);
    border-radius: 50%;
    box-shadow: inset 0 0 0 0.625em #fff, 11px 11px 12px -9px rgba(27, 14, 0, 0.28);
    background: linear-gradient(135deg, var(--c0), var(--c1)) padding-box;
}
.ico a {
    --sgn: 1;
    box-sizing: border-box;
    display: grid;
    place-content: center;
    padding: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    clip-path: circle(calc(50% - 0.625em));
}
.ico a:hover {
    --sgn: -1;
}
.ico svg {
    --w: calc(100% - 4em);
    box-sizing: border-box;
    position: absolute;
    margin: calc(-.5*var(--w));
    border: solid 1em transparent;
    width: var(--w);
    height: var(--w);
    border-radius: 50%;
    box-shadow: calc(var(--sgn)*36px) 27px 11px -5px rgba(27, 14, 0, 0.16);
    background: linear-gradient(135deg, #fff, #d2d2d2) border-box;
    transition: 0.3s ease-out;
}
.ico:before,
.ico:after {
    position: absolute;
    content: "";
}
.ico:before {
    box-sizing: border-box;
    top: calc(200% + 1px);
    left: calc(50% - 1.4375em);
    border: solid 0.625em transparent;
    width: 2.875em;
    height: 2.875em;
    box-shadow: 0 0 0 2px #fff;
    background: inherit;
    filter: drop-shadow(1px 3px 2px rgba(0, 0, 0, 0.32));
}
.ico:after {
    width: 0.375em;
    top: calc(100% - 0.5em);
    left: calc(50% - 0.5em);
    border: solid 0 transparent;
    border-width: 0.5em 0.3125em;
    padding-top: 100%;
    background: linear-gradient(#fff, #fff) padding-box, radial-gradient(circle at 50% 0.5em, #fff calc(0.5em - 1px), rgba(255, 255, 255, 0) 0.5em) border-box, radial-gradient(circle at 50% calc(100% - 0.5em), #fff calc(0.375em - 1px), rgba(255, 255, 255, 0) 0.375em) border-box;
}

HTML

<div class="container" style="--n: 4;">
    <svg class="hid">
        <symbol id="ico0" viewBox="-9 -9 98 98">
            <path class="d" d="M12 50h57"></path>
            <path d="M40 14h-32v42h64v-21" stroke-linejoin="round"></path>
            <path class="d t" d="M52 20h17"></path>
            <path d="M47 9a3 3 0 0 0-3 3v16a3 3 0 0 0 3 3h6v5l5-5h15a3 3 0 0 0 3-3v-16a3 3 0 0 0-3-3zM33 57v4M47 57v4M26 66v-1a3 3 0 0 1 3-3h22a3 3 0 0 1 3 3v1z"></path>
        </symbol>
        <symbol id="ico1" viewBox="-9 -9 98 98">
            <path d="M8 17h64v22a6 6 0 0 1-6 6h-52a6 6 0 0 1-6-6zM8 39v28h64v-28M28 16v-4a3 3 0 0 1 3-3h18a3 3 0 0 1 3 3v4M34 10h13"></path>
            <path class="d" d="M12 47v16h56v-17"></path>
            <path class="d t" d="M40 38h1"></path>
            <path class="t" d="M27 16h2M51 16h2"></path>
        </symbol>
        <symbol id="ico2" viewBox="-9 -9 98 98">
            <path d="M10 33v37h60v-37M40 7l32 20v7l-32-20-32 20v-7zM32 26v10h16v-10zM40 27v8M32 69v-24h16v24"></path>
            <path class="d" d="M11 63h21M49 63h21"></path>
            <path class="d" d="M44 59h1" style="--s: 3;"></path>
        </symbol>
        <symbol id="ico3" viewBox="-9 -9 98 98">
            <path class="d" d="M51 20v5"></path>
            <path class="d t" d="M32 46v1M48 46v1"></path>
            <path d="M22 51q0 15 15 19q3 2 6 0q15-4 15-19c4 0 2-1 4-5c1-2-2-4-4-3q1-13-7-15c-7 8-28 0-29 15c-2-1-5 1-4 3c2 4 0 5 4 5M20 42c-2-9 1-13-6-17q24-25 37-9q16 3 9 26"></path>
        </symbol>
    </svg>
    <section style="--c0: #fd4617; --c1: #ffc445;">
        <h3>orange</h3>
        <p>Fruit of the citrus species Citrus aurantium</p>
        <div class="ico">
            <a href="#">
                <svg>
                    <use xlink:href="#ico0"></use>
                </svg>
            </a>
        </div>
    </section>
    <section style="--c0: #ffaa5a; --c1: #fff05a;">
        <h3>lemon</h3>
        <p>A hybrid between bitter orange and citron</p>
        <div class="ico">
            <a href="#">
                <svg>
                    <use xlink:href="#ico1"></use>
                </svg>
            </a>
        </div>
    </section>
    <section style="--c0: #96c93d; --c1: #00b09b;">
        <h3>pear</h3>
        <p>Enjoyed since prehistoric times.</p>
        <div class="ico">
            <a href="#">
                <svg>
                    <use xlink:href="#ico2"></use>
                </svg>
            </a>
        </div>
    </section>
    <section style="--c0: #3da5d9; --c1: #54f2f2;">
        <h3>blueberry</h3>
        <p>Pale greenish, then reddish and dark purple.</p>
        <div class="ico">
            <a href="#">
                <svg>
                    <use xlink:href="#ico3"></use>
                </svg>
            </a>
        </div>
    </section>
</div>

responsive sections layout template

h5, template, service card

编辑器支持Emmet

快捷键

responsive sections layout template

h5, template, service card

一款HTML5简约风的电影卡片模板（列表）

HTML5 + GSAP + Founation.css构建响应式博客文章列表页面布局模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：