预览图：

HMTL代码部分

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Day02</title>

    <link rel="stylesheet" href="css.css" type="text/css">

</head>

<body>

    <div class="box">

        <div class="img8x">

            <img src="data:images/img01.jpg" alt="">

        </div>

        <div class="content">

            <h2>White Cat<br><span>ロクでなし魔術講師と禁忌教典</span></h2>

        </div>

    </div>

    <div class="box">

        <div class="img8x">

            <img src="data:images/img02.jpg" alt="">

        </div>

        <div class="content">

            <h2>Kokoro<br><span>同棲から始まるオタク彼女の作りかた</span></h2>

        </div>

    </div>

    <div class="box">

        <div class="img8x">

            <img src="data:images/img03.jpg" alt="">

        </div>

        <div class="content">

            <h2>Rio<br><span>Seirei Gensouki</span></h2>

        </div>

    </div>

</body>

</html>

CSS代码部分

/* 外部GooGle字体 */

@font-face {

    font-family: 'Poppins';

    font-style: normal;

    font-weight: 400;

    src: local('Poppins Regular'), local('Poppins-Regular'), url(https://fonts.gstatic.com/s/poppins/v13/pxiEyp8kv8JHgFVrJJbecmNE.woff2) format('woff2');

    unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;

}

/* latin-ext */

@font-face {

    font-family: 'Poppins';

    font-style: normal;

    font-weight: 400;

    src: local('Poppins Regular'), local('Poppins-Regular'), url(https://fonts.gstatic.com/s/poppins/v13/pxiEyp8kv8JHgFVrJJnecmNE.woff2) format('woff2');

    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;

}

/* latin */

@font-face {

    font-family: 'Poppins';

    font-style: normal;

    font-weight: 400;

    src: local('Poppins Regular'), local('Poppins-Regular'), url(https://fonts.gstatic.com/s/poppins/v13/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');

    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;

}

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    font-family: 'Poppins', sans-serif;

}

/*justify-content 属性定义了浏览器之间，如何分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间。 */

body {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    min-height: 100vh;

    background: #010615;

}

.box {

    position: relative;

    width: 300px;

    height: 300px;

    display: flex;

    justify-content: center;

    align-items: center;

    margin: 40px;

    /* background: #060c21; */

    transition: 0.5;

}

.box :hover {

    height: 100%;

}

.box .img8x {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    padding: 10px;

    box-sizing: border-box;

}

.box .img8x img {

    max-width: 100%;

    opacity: 0.1;

    transition: 0.5s;

}

.box:hover .img8x img {

    opacity: 1;

}

.box::before {

    content: '';

    position: absolute;

    top: -2px;

    left: -2px;

    right: -2px;

    bottom: -2px;

    background: #fff;

    z-index: -1;

}

.box:after {

    content: '';

    position: absolute;

    top: -2px;

    left: -2px;

    right: -2px;

    bottom: -2px;

    background: #fff;

    z-index: -2;

    filter: blur(40px);

}

.box:before,

.box:after {

    background: linear-gradient(235deg, #89ff00, #010615, #00bcd4);

}

.box:nth-child(2):before,

.box:nth-child(2):after {

    background: linear-gradient(235deg, #ff005e, #010615, #fbff00);

}

.box:nth-child(3):before,

.box:nth-child(3):after {

    background: linear-gradient(235deg, #772aff, #010615, #2196F3);

}

.box .content {

    position: absolute;

    bottom: 0;

    left: 10px;

    right: 10px;

    bottom: 10px;

    height: 90px;

    background: rgba(0, 0, 0, 0.4);

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    opacity: 0;

    transition: 0.5s;

}

.box:hover .content {

    opacity: 1;

}

.box:hover .content h2 {

    font-size: 20px;

    color: #fff;

    font-weight: 500;

    line-height: 20px;

    letter-spacing: 1px;

}

.box .content h2 span {

    font-size: 14px;

    color: #fff;

    font-weight: 200;

    letter-spacing: 2px;

}

HTML+CSS小实战案例 （照片墙特效、代码展示）的更多相关文章

  1. HTML+CSS小实战案例

    HTML+CSS小实战案例 登录界面的美化,综合最近所学进行练习 网页设计先布局,搭建好大框架,然后进行填充,完成页面布局 <html> <head> <meta htt ...

  2. CSS基础 实战案例 模拟小米官方导航栏

    效果图 html结构 <ul> <li><a href="#">Xiaomi手机</a></li> <li> ...

  3. CSS3基础——笔记+实战案例(CSS基本用法、CSS层叠性、CSS继承性)

    CSS3基础——笔记 CSS是Cascading Style Sheet的缩写,翻译为"层叠样式表" 或 "级联样式表".CSS定义如何显示HTML的标签央视, ...

  4. HTML+CSS提升小实战

    1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html ...

  5. php 网站301重定向设置代码实战案例

    php 网站301重定向设置代码实战案例 301重定向就是页面永久性移走的意思,搜索引擎知道这个页面是301重定向的话,就会把旧的地址替换成重定向之后的地址. 302重定向就是页面暂时性转移,搜索引擎 ...

  6. Java生鲜电商平台-一次代码重构的实战案例

    Java生鲜电商平台-一次代码重构的实战案例 说明,Java开源生鲜电商平台-一次代码重构的实战案例,根据实际的例子,分析出重构与抽象,使代码更加的健壮与高效. 1.业务说明 系统原先已有登录功能,我 ...

  7. Salesforce学习之路-developer篇（五）一文读懂Aura原理及实战案例分析

    1. 什么是Lightning Component框架? Lightning Component框架是一个UI框架,用于为移动和台式设备开发Web应用程序.这是一个单页面Web应用框架,用于为Ligh ...

  8. Vue2.0史上最全入坑教程（下）—— 实战案例

    书接上文 前言:经过前两节的学习,我们已经可以创建一个vue工程了.下面我们将一起来学习制作一个简单的实战案例. 说明:默认我们已经用vue-cli(vue脚手架或称前端自动化构建工具)创建好项目了 ...

  9. 2天驾驭DIV+CSS （实战篇）（转）

     这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们.本文是实战篇. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” ...

  10. jQ小图标上下滑动特效

    嗯,又到了,夜静饥寒的时候,手指颤抖,回望去,屋内满是寂静,寥寥绰影,咳咳咳,想我程序员之路还没到终点...就...咳咳咳 好了日常神经结束,还要涂我的唇膏.还剩下,最后一章,js动画(四),明天放上 ...

随机推荐

  1. 2020-2021 “Orz Panda” Cup Programming Contest G题（树形结构）

    题目传送门 题目大意:给点一颗包含 \(n\)个节点的无根树,有 \(m\)次询问,每次询问给出两个点 \(u\)和 \(v\),要求计算 \[\sum_{r=1}^{n}d_{r}(u,v) \] ...

  2. SpringBoot实战项目：蚂蚁爱购(从零开发)

    ​ 简介 这是从零开发的SpringBoot实战项目,名字叫蚂蚁爱购. 从零开发项目,视频加文档,十天彻底掌握开发SpringBoot项目. 教程路线是:搭建环境=> 安装软件=> 创建项 ...

  3. NoSQL数据库与关系数据库的比较

    1.在原理方面 2.在数据规模方面 3.在数据库模式方面 4.查询效率方面: 5.在事务一致性方面: 6.在数据完整性方面: 7.在可扩展性方面: 8.在可用性方面 9.在标准化方面: 10.在技术支 ...

  4. 一行代码修复100vh bug | 京东云技术团队

    你知道奇怪的移动视口错误(也称为100vh bug)吗?或者如何以正确的方式创建全屏块? 一.100vh bug 什么是移动视口错误? 你是否曾经在网页上创建过全屏元素?只需添加一行 CSS 并不难: ...

  5. Diffusion Model扩散模型

    1.扩散模型基本原理: 扩散模型包括两个步骤: 固定的(或预设的)前向扩散过程q:该过程会逐渐将高斯噪声添加到图像中,直到最终得到纯噪声. 2.可训练的反向去噪扩散过程pθ:训练一个神经网络,从纯噪音 ...

  6. flask自带的异常抛出函数abort

    flask中有一个abort函数,可以用于快捷的抛出异常, 但是只能抛出标准的HTTP状态码,不能乱设置HTPP状态码,比如666.777这种. from flask import abort @ap ...

  7. 马某 说c# 不开源，他是蠢还是坏?

    马某在视频 计算机主流开发语言的现状和未来3-5年的发展前景--Java.Golang.Python.C\C#\C++.JS.前端.AI.大数据.测试.运维.网络安全 点评各种语言,其中说到C# 的时 ...

  8. Linux SNMP监控配置

    1, 安装SNMP服务 [root@zlm log]# yum -y install net-snmp net-snmp-utils 2, 编辑SNMP配置文件[root@zlm log]# vim ...

  9. JS对象拷贝：深拷贝和浅拷贝

    摘要:对象拷贝,简而言之就是将对象再复制一份,但是,复制的方法不同将会得到不同的结果. 本文分享自华为云社区<js对象深浅拷贝,来,试试看!>,作者: 北极光之夜.. 一.速识概念: 对象 ...

  10. 云小课｜ModelArts Pro 视觉套件 零代码构建视觉AI应用

    阅识风云是华为云信息大咖,擅长将复杂信息多元化呈现,其出品的一张图(云图说).深入浅出的博文(云小课)或短视频(云视厅)总有一款能让您快速上手华为云.更多精彩内容请单击此处. 摘要:ModelArts ...