程序员经验分享-hwhale

几种css炫酷背景欣赏

2023-11-17

这里为大家带来几种表现惊人的css背景效果，纯css表现效果，有桌布效果，星空效果，心形效果，砖墙效果等。请欣赏：

列表内容

background: 
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%) 0 0,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13%, rgba(255,255,255,0) 14%) 0 0,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19%, rgba(255,255,255,0) 20%) 0 110px,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) -130px -170px,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) 130px 370px,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13%, rgba(255,255,255,0) 14%) 0 0,
linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%);
background-size: 470px 470px, 970px 970px, 410px 410px, 610px 610px, 530px 530px, 730px 730px, 100% 100%;
background-color: #840b2a;

这里写图片描述

background-color:black;
background-image:
radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px),
radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px; 
background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;

这里写图片描述

background: 
radial-gradient(circle closest-side at 60% 43%, #b03 26%, rgba(187,0,51,0) 27%),
radial-gradient(circle closest-side at 40% 43%, #b03 26%, rgba(187,0,51,0) 27%),
radial-gradient(circle closest-side at 40% 22%, #d35 45%, rgba(221,51,85,0) 46%),
radial-gradient(circle closest-side at 60% 22%, #d35 45%, rgba(221,51,85,0) 46%),
radial-gradient(circle closest-side at 50% 35%, #d35 30%, rgba(221,51,85,0) 31%),

radial-gradient(circle closest-side at 60% 43%, #b03 26%, rgba(187,0,51,0) 27%) 50px 50px,
radial-gradient(circle closest-side at 40% 43%, #b03 26%, rgba(187,0,51,0) 27%) 50px 50px,
radial-gradient(circle closest-side at 40% 22%, #d35 45%, rgba(221,51,85,0) 46%) 50px 50px,
radial-gradient(circle closest-side at 60% 22%, #d35 45%, rgba(221,51,85,0) 46%) 50px 50px,
radial-gradient(circle closest-side at 50% 35%, #d35 30%, rgba(221,51,85,0) 31%) 50px 50px;
background-color:#b03;
background-size:100px 100px;

这里写图片描述

background-color: silver;
background-image: linear-gradient(335deg, #b00 23px, transparent 23px),
linear-gradient(155deg, #d00 23px, transparent 23px),
linear-gradient(335deg, #b00 23px, transparent 23px),
linear-gradient(155deg, #d00 23px, transparent 23px);
background-size: 58px 58px; 
background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;

这里写图片描述

background-color: hsl(2, 57%, 40%);
background-image: repeating-linear-gradient(transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, 
transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, 
rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, 
rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, 
rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px),
repeating-linear-gradient(270deg, transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, 
transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, 
rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, 
rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, 
rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px),
repeating-linear-gradient(125deg, transparent, transparent 2px, rgba(0,0,0,.2) 2px, rgba(0,0,0,.2) 3px, 
transparent 3px, transparent 5px, rgba(0,0,0,.2) 5px);

列表内容

background-color:white;
background-image:
radial-gradient(midnightblue 9px, transparent 10px),        
repeating-radial-gradient(midnightblue 0, midnightblue 4px, transparent 5px, transparent 20px, midnightblue 21px, midnightblue 25px, transparent 26px, transparent 50px);    
background-size: 30px 30px, 90px 90px; 
background-position: 0 0;

效果图为实际表现效果图，读者可以直接粘贴复制，然后运行查看效果，如果没有看到效果，不要来私信我，你不给它宽高能看到效果吗？

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

前端开发

CSS3

炫酷背景

桌布背景

星空背景

几种css炫酷背景欣赏 的相关文章

  • Obsidian Tasks插件介绍

    背景 按照之前对 DataView 插件的介绍 对于任务列表的使用其实就可以使用其中的 list 插件完成的 但是 DataView 插件只能完成列表的查询功能 而查询功能只能是任务列表中其中一个功能 因此就使用 DataVIew 插件是不

随机推荐

  • java集合List

    Java集合概况 Java集合一直理解的都是片面的 整理一下 将知识组织成面 更便于理解 上图来自Java 集合系列01之 总体框架 如果天空不死 博客园 虽然博主是基于java1 6整理的 但也不碍于我们学习 理解了上图 对于学习java

  • 排序遍历带前缀的文件名

    排序遍历带前缀的文件名 def getTimeId file fileAttrs file split fileTime fileAttrs 0 return fileTime def CleanUpExpireTar backupDir

  • 树莓派4B安装Batocera V35版本 前言

    前言 说说为什么要写这个 原因比较多 我在大学的时候买了树莓派4B 那时正价购买 刷了个OpenWrt系统在宿舍当软路由再跑 毕业之后买了个X86主机当软路由 树莓派就放着吃灰了 大学时期同样买了个北通的游戏手柄 当初为了玩崩坏3购入的 后

  • DDR2 DDR3的区别

    DDR2 DDR3的区别 功耗进一步减少 DDR2内存的默认电压为1 8V 而DDR3内存的默认电压只有1 5V 因此内存的功耗更小 发热量也相应地会减少 值得一提的是 DDR3内存还新增了温度监控 采用了ASR Automatic sel

  • Unity5.x运行场景直接卡死的问题

    今天遇到一个很奇葩的问题 就是电脑中Unity5 x版本的都不能运行场景了 包括新建空的工程也不行 重装unity软件重装VS环境也不行 神奇的是2017 2018 2019版本的都没有问题 并且界面也没有任何报错 爬各种论坛谷歌都没有找到

  • 山海演武传·黄道·第一卷 雏龙惊蛰 第二十二 ~ 二十四章 真龙之剑·星墟列将...

    我是第一次 请你 请你温柔一点 少女一边娇喘着 一边将稚嫩的红唇紧贴在男子耳边 樱桃小嘴盈溢出如兰香气 这样子 人家骑在上面 她紧紧地依偎在某个男子身上 窈窕的身躯与丰盈的酥胸 伴随着男子身体晃动而滑上滑下 起伏不定 啊 不要晃的那样厉害

  • ios appStore上架审核通过后，appStore搜索不到该应用

    问题描述 前两天上架一款ios App 周一到公司看审核已经通过了 去appStore上搜索一直搜索不到 ios appStore connect点击提示该商品在中国大陆没有上架 解决方法 通过app store connect 最下面的联

  • vue3.0 + element Plus实现页面中引入弹窗组件及defineExpose用法

    1 在需要弹窗显示的页面引入你所写的弹窗组件 index html

  • AI革命：AI+算力，霸主即将诞生！

    随着人工智能技术的飞速发展 AI 算力 的结合应用已成为科技行业的热点话题 甚至诞生出 AI 算力 最强龙头 的网络热门等式 该组合不仅可以提高计算效率 还可以为各行各业带来更强大的数据处理和分析能力 从而推动创新和增长 那么对于这个时下的

  • 二维多孔介质图像的粒度分布研究（Matlab代码实现）

    欢迎来到本博客 博主优势 博客内容尽量做到思维缜密 逻辑清晰 为了方便读者 座右铭 行百里者 半于九十 本文目录如下 目录 1 概述 2 运行结果 3 参考文献 4 Matlab代码实现 1 概述 使用流域分割算法对岩石二维二值图像进行粒度

  • Scala深入浅出——从Java到Scala

    本文适合有一定Java基础的 并想系统学习Scala的小伙伴借鉴学习 文章有大量实例 建议自己跑一遍 Scala深入浅出 从Java到Scala Scala 一 介绍 1 什么是Scala 2 特点 3 安装 二 Scala特点 三 sca

  • SecureCRT9.1高亮配色设置

    参考 http zh cjh com qita 1623 html https download csdn net download qq 45698138 88310255 spm 1001 2014 3001 5503 1 创建文件co

  • fork的例子

    以下是下列代码的头文件 forks c Examples of Unix process control include

  • Ruoyi-cloud集成Sa-Token SSO单点登录

    文章目录 服务端 客户端前端 客户端后端 https github com dromara Sa Token Sa Token SSO 模式三 修改本地hosts 127 0 0 1 sa sso server com 127 0 0 1

  • ionic3代码压缩和apk优化

    我们在做ionic打包的时候 通常执行这条命令 ionic cordova build android release prod 使用这个命令生成的apk是ionic项目导出的最优化的apk 但是如果还想继续压缩 那么还可以借助Androi

  • Unity 空气墙Shader

    废话不多说 先上效果图 具体代码如下 Shader Hidden AirWall Properties Color Color Color 1 1 1 1 颜色 Interval Interval float 10 间隔 SubShader

  • springmvc注解和参数传递

    一 SpringMVC注解入门 创建web项目 在springmvc的配置文件中指定注解驱动 配置扫描器 Xml代码 收藏代码

  • FFmpeg 实战指南

    文章目录 表达式 滤镜效果 zoompan 中心视距由远及近 中心视距由近及远 水平视距从左到右 水平视距从右到左 垂直视距从上到下 垂直视距从下到上 rotate 顺时针旋转 PI 6 弧度 逆时针旋转 PI 6 弧度 顺时针旋转 45

  • 【Flink】处理函数Process

    目录 处理函数 基本处理函数 ProcessFunction 处理函数的功能 ProcessFunction解析 处理函数的分类 按键分区处理函数 KeyedProcessFunction 定时器Timer 和定时服务 TimerServi

  • 几种css炫酷背景欣赏

    这里为大家带来几种表现惊人的css背景效果 纯css表现效果 有桌布效果 星空效果 心形效果 砖墙效果等 请欣赏 background radial gradient rgba 255 255 255 0 0 rgba 255 255 25

热门标签