预览图：

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. C#中的virtual和override关键字

    公众号「DotNet学习交流」,分享学习DotNet的点滴. 使用基类中的引用 代码如下: class MyBaseClass //基类   {        public void Print() ...

  2. Vue02-小案例（购物车功能）

    效果图 主要代码 index.html <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  3. termux+anlinux+Rvnc viewer来使安卓手机（平板）变成linux服务器

    第一步,先安装termux和anlinux,在此之前先安装一个vpn 下面是termux的官网(官网是没有内嵌任何广告的): termux/termux-app: Termux - a termina ...

  4. 【低代码】低代码平台协同&敏捷场景下的并行开发解决方案探索

    低代码开发平台的出现,大大地提高的产品交付效率,但是在协同开发.敏捷迭代的场景下,也暴露出了一些问题. 例如: 多人同时对项目进行修改,相互影响甚至修改内容被互相覆盖: 同一项目下多个需求同步开发,但 ...

  5. 一个ssh无法远程登录的问题跟踪解决

    用户反馈龙芯服务器系统loongnix-server使用root用户ssh远程登录,有时候可以有时候又无法登录,频繁出现错误:Permission denied,please try again.我分 ...

  6. 神经网络优化篇：详解归一化输入（Normalizing inputs）

    归一化输入 训练神经网络,其中一个加速训练的方法就是归一化输入.假设一个训练集有两个特征,输入特征为2维,归一化需要两个步骤: 零均值 归一化方差: 希望无论是训练集和测试集都是通过相同的\(μ\)和 ...

  7. JavaFx之TableView表格添加按钮删除行（二十二）

    JavaFx之TableView表格添加按钮删除行(二十二) JavaFx之TableView添加按钮 JavaFx之TableView删除行 编写一个xml <?xml version=&qu ...

  8. JavaFx之从controller关闭stage（十八）

    JavaFx之从controller关闭stage(十八) 开发时,我们需要从controller的button时间中关闭当前,那么你的按钮事件可以这样: @FXML public Button ca ...

  9. 斯坦福 UE4 C++ ActionRoguelike游戏实例教程 06.敲定AI——游戏框架拓展和细节优化

    斯坦福课程 UE4 C++ ActionRoguelike游戏实例教程 0.绪论 概述 这篇文章对应课程13课, 50~54节.虽然标题是敲定AI,实际内容和AI关联并不大,主要工作是对游戏内各种细节 ...

  10. 为什么maven配置完Tomcat且运行之后页面内容没有显示出来？

    1.如何在maven项目中配置一个webapp项目? 首先新建一个maven项目 项目目录 <?xml version="1.0" encoding="UTF-8& ...