CSS3实现卡片结果-百分百源码网

CSS3实现卡片结果

发布时间：09/01 来源：未知浏览：关键词：

第一步：肯定 HTML 代码构造

在创立 HTML 代码前，你第一应当想象它的构造。当你有一个好的模型时，应当第一时间把你想象的页面构造或者你的 CSS 模块及时地在纸上排列出来。一个设计合理、构造良好的 HTML 页面会让你在接下来的工作历程中变的一非常轻松。

<a id="case-title" href=" http://www.loveo.cc/using-css-to-make-cards-ui.html">
    利用css制作卡片UI -- 墨丶水瓶
</a>
<div class="card">
    <a href="#.">
        <div class="card-image">
            <img src="http://www.loveo.cc/wp-content/uploads/2017/02/card-image.jpg"
            alt="Orange" />
        </div>
        <div class="card-body">
            <div class="card-date">
                <time>
                    20 Novembre 1992
                </time>
            </div>
            <div class="card-title">
                <h3>
                    Lorem Ipsum
                </h3>
            </div>
            <div class="card-exceprt">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam voluptatibus
                    autem consectetur voluptate facere at, omnis ab optio placeat officiis!
                    Animi modi harum enim quia veniam consectetur unde autem inventore.
                </p>
            </div>
        </div>
    </a>
</div>

第二步：定义 Css 规则

一旦确立了 Html 构造，接下来我们将开端为它编写 Css 样式。我将鄙人面离别贴出每一部分的 Css 代码。

.card

.card {
    width:400px;
    margin:0px auto;
    background-color:white;
    box-shadow:0px 5px 20px #999;
}
.card a {
    color:#333;
    text-decoration:none;
}
.card:hover .card-image img {
    width:160%;
    filter:grayscale(0);
}

将 .card 设定为牢固大小。

居中方式为 margin:0px auto;

为了在稍暗的背景中便于区分，将块元素设定为白色。

增添了一个小暗影发生叠加效应。

定义元素 a 标签的色彩与下划线润饰。

定义鼠标移上时放大元素并将滤镜灰度设定为“0”。

.card-image

.card-image {
    height:250px;
    position:relative;
    overflow:hidden;
}
.card-image img {
    width:150%;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    filter:grayscale(1);
    transition-property:filter width;
    transition-duration:.3s;
    transition-timing-function:ease;
}

牢固块元素的大小，其中包括我们的图片，这使我们能够在知足尺寸要求的状况下，任何图片都可用于制作成卡片。

设定相对的定位方式，由于它里面包括了绝对定位的元素。

定义内容溢出元素框时裁剪并潜藏。

我们可以按照需要在牢固大小的100%根基上增添图像的默许大小，但是不要增加小于400px的图像，也不要健忘遵照其宽度/高度比，避免显现空白。

为了将图像在父元素中完全显示及将 .card-image 的中心作为起点，我们需要同时设定定位方式为 absolute 。top 、left 为50% ，然后能过 transform:translate(-50%, -50%) 设定位移，使 .card-image

的中心点作为起点。

定义元素为 100% 灰度。

使元素在鼠标移上时在300毫秒内慢速开端，然后变快，然后慢速完毕的过渡方式放大。

.card-body

.card-body {
    text-align:center;
    padding: 15px 20px;
    box-sizing: border-box;
}

定义 .card-bady 元素的文本对齐方式为居中对齐。

设定元素的内边距。

元素 box-sizing 属性值为 border-box。

字体及其他

.card-date {
    font-family: 'Source Sans Pro', sans-serif;
}
.card-title, .card-excerpt {
    font-family: 'Playfair Display', serif;
}
.card-date, .card-title {
    text-align:center;
    text-transform:uppercase;
    font-weight: bold;
}
.card-date, .card-excerpt {
    color: #777;
}

引荐教程：《CSS教程》

以上就是CSS3实现卡片结果的具体内容，更多请关注百分百源码网其它相关文章！

打赏