预览图：

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. 聊聊数据库连接池 Druid

    在 Spring Boot 项目中,数据库连接池已经成为标配,然而,我曾经遇到过不少连接池异常导致业务错误的事故.很多经验丰富的工程师也可能不小心在这方面出现问题. 在这篇文章中,我们将探讨数据库连接 ...

  2. Spring Cache + Caffeine的整合与使用

    前言 对于一些项目里需要对数据库里的某些数据一直重复请求的,且这些数据基本是固定的,在这种情况下,可以借助简单使用本地缓存来缓存这些数据.这些介绍一下Spring Cache和Caffeine的使用. ...

  3. vue3在父子组件使用v-model双向绑定

    父组件: <script setup> import InputBox from "@/compon/InputBox.vue"; import {ref} from ...

  4. 你是否想知道如何应对高并发？Go语言为你提供了答案！

    并发编程是当前软件领域中不可忽视的一个关键概念.随着CPU等硬件的不断发展,我们都渴望让我们的程序运行速度更快.更快.而Go语言在语言层面天生支持并发,充分利用现代CPU的多核优势,这也是Go语言能够 ...

  5. 牛客网刷Java记录第一天

    第一题 下列程序输出啥? public class StringDemo{ private static final String MESSAGE="taobao"; public ...

  6. Pikachu漏洞靶场 XSS（跨站脚本攻击）

    XSS 关于xss的我也是一知半解,所以只放出payload来. 反射型xss(get) 修改maxlength属性之后提交如下内容: <script>alert(/xss/);</ ...

  7. Kubernetes常见错误总结

    1.屏幕持续打印Pod日志报error: unexpected EOF错误 Kubernetes: requesting flag for "kubectl logs" to av ...

  8. 24、去除右上方的debug图标

    class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext ...

  9. 浅学GoF23种设计模式

    long long ago 买了设计模式的书,一直没看,平常工作虽然涉及到,但是不够系统,工作之余抽空学习一下. 一.创建型模式 01.单例(Singleton) 02.工厂方法(Factory Me ...

  10. 数仓性能优化：倾斜优化-表达式计算倾斜的hint优化

    本文分享自华为云社区<GaussDB(DWS)性能调优:倾斜优化-表达式计算倾斜的hint优化>,作者: 譡里个檔 . 1.原始SQL SELECT TMP4.TAX_AMT, CATE. ...