预览图：

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. WPF应用开发之控件动态内容展示

    在我们开发一些复杂信息的时候,由于需要动态展示一些相关信息,因此我们需要考虑一些控件内容的动态展示,可以通过动态构建控件的方式进行显示,如动态选项卡展示不同的信息,或者动态展示一个自定义控件的内容等等 ...

  2. Gradio-Lite: 完全在浏览器里运行的无服务器 Gradio

    Gradio 是一个经常用于创建交互式机器学习应用的 Python 库.在以前按照传统方法,如果想对外分享 Gradio 应用,就需要依赖服务器设备和相关资源,而这对于自己部署的开发人员来说并不友好. ...

  3. nacos 安装和使用

    Nacos 是阿里巴巴开源项目,用于构建微服务应用的服务发现.配置管理和服务管理. 在微服务项目中不同模块之间服务调用时,实现服务注册与发现. Nacos 使用: Nacos 是java开发的,依赖 ...

  4. python数据类型元组、列表、集合、字典相互嵌套

    系统 Windows 10 专业工作站版22H2 软件 python-3.9.6-amd64.exe 拓展库: jupyter==1.0.0 notebook==7.0.6 1.元组嵌套 1.1 元组 ...

  5. Oracle密码文件、警告日志文件、跟踪文件

    密码文件 oracle用于验证sysdba权限的二进制文件. 警告日志文件 警告日志文件是用来记录oracle数据库系统在运行期间的各种信息: oracle实例打开和关闭.建立表空间.增加数据文件等记 ...

  6. C# 输出的格式转换，占位/补位，字符串拼接、字符串内插法

    // "0"描述:占位符,如果可能,填充位           Console.WriteLine(string.Format("{0:000000}", 12 ...

  7. SpringCloud OpenFeign的使用

    SpringCloud OpenFeign的使用 是什么: 声明式http客户端. 目的: 使远程调用更简单 作用: 提供了http请求模板,仅需编写简单接口和插入注解,就可以定义好原始http请求的 ...

  8. JMeter变量和调试取样器

    变量 可以在测试计划中定义变量 可以通过${变量名}进行调用 调试取样器可以看到变量参数

  9. WinRM服务应用及配置说明

    一.什么是winRM服务 1.1.winRM服务介绍 Windows远程管理(WinRM)服务是Windows Server 2003 R2以上版本中一种新式的方便远程管理的服务.通过WinRM服务, ...

  10. Lean大神编译的OpenWRT问题汇总

    1.初始密码为password,登录路由器后第一件事要修改默认密码 2.Lean大神编译的OpenWRT无法SSH.SFTP, 3.为了方便操作,一定要编译的时候安装TTYD,但是TTYD默认无法打开 ...