预览图：

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. Python 潮流周刊#28：两种线程池、四种优化程序的方法

    你好,我是猫哥.这里每周分享优质的 Python.AI 及通用技术内容,大部分为英文.本周刊开源,欢迎投稿.另有电报频道作为副刊,补充发布更加丰富的资讯. 产品推荐 Walles.AI 是一款适用于所 ...

  2. redis基础命令复习（Sring，Hash，List，Set，SortedSet）

    1,Redis数据结构: https://redis.io/commands 2,Redis命令---Redis通用命令(常见的有,keys,del,exists,expire,ttl) 2.1,ke ...

  3. C++学习笔记五：变量与数据类型（Auto类型）

    Auto 允许编译器自己来推断变量的类型,这种新功能是在c++11引入的.这个关键字结合for循环使用可以节省变量类型的重复输入.VS Code可以在鼠标移动到变量上之后直接显示变量的类型. auto ...

  4. 数字孪生融合GIS系统能够为物流行业提供什么解决方案？

    全球贸易和电子商务的不断发展,让物流行业面临着越来越多的挑战.其中,提高运输效率.降低成本.优化供应链和增强可持续性等问题成为业界关注的焦点.在这个数字化时代,数字孪生和GIS系统的融合为物流行业带来 ...

  5. Android辅助功能

    1:AccessibilityService 新建service public class AccessibilityService extends android.accessibilityserv ...

  6. Linux测试磁盘读写性能

    1.安装必要的工具: 确保系统上已经安装了必要的工具,hdparm和fio.使用以下命令来安装它们: sudo yum install hdparm fio -y 2.使用hdparm测试磁盘读性能: ...

  7. Ubuntu系统部署后优化

    Ubuntu系统配置调整 前期准备 #更改主机名,重启后不变 hostnamectl set-hostname Zabbix-Server01 #更改主机名,重启后变回从前 hostname Zabb ...

  8. Java反序列化漏洞-CC1利用链分析

    @ 目录 一.前置知识 1. 反射 2. Commons Collections是什么 3. 环境准备 二.分析利用链 1. Transformer 2. InvokeTransformer 执行命令 ...

  9. grafana添加组件

    ###安装grafana插件需联网安装[root@zabbix grafana]# grafana-cli plugins list-remote #查询可用的插件id: abhisant-druid ...

  10. 虚拟化M搭建及基本操作

    虚拟化MH搭建 虚拟化概念: 虚拟机安装分为2块:RHEVM .RHEVH RHEVM:负责管理角色 RHEVH:负责运算角色 2016-09-23_0-52-54.png hypervisor: 提 ...