当前位置： 首页 > news >正文

html从零开始8：css3新特性、动画、媒体查询、雪碧图、字体图标【搬代码】

news 2026/3/31 5:50:23

css3新特性

1

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><style>div{width: 200px;height: 200px;background-color: aqua;position: relative;border-radius: 20px;/*圆角属性，100%就变成圆形了*/left: 50px;top: 100px;}</style>
</head>
<body><div></div>
</body>
</html>

2

两个值
border-radius: 50px 5px;

3
阴影
4

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><style>div{width: 200px;height: 200px;background-color: aqua;position: relative;border-radius: 50px 5px;/*圆角属性*/left: 50px;top: 100px;}.box1{width: 200px;height: 200px;background-color: blueviolet;margin: 0 auto;/*将div放到中间，左右空袭平均分配*/box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);/*px也可以变成负数，那就是对角方向变成阴影*/}</style>
</head>
<body><div></div><div class="box1"></div>
</body>
</html>

5

动画

6
7
8
9

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><style>div{width: 200px;height: 200px;background-color: brown;animation: myAnmin 3s linear 0s infinite ;/* animation: name duration timing-function delay iteration-count direction fill-mode;*/}/*鼠标滑倒该元素上就触发*/div:hover{/* background-color: blanchedalmond; */animation-play-state: paused;}@keyframes myAnmin {0%{width: 100px;height: 200px;background-color: antiquewhite;}25%{width: 300px;height: 200px;background-color: aqua;}50%{width: 600px;height: 200px;background-color: bisque;}75%{width: 1000px;height: 200px;background-color: black;}100%{background-color: blue;}75%{width: 1000px;height: 200px;background-color: black;}50%{width: 600px;height: 200px;background-color: bisque;}25%{width: 300px;height: 200px;background-color: aqua;}}</style>
</head>
<body><div></div>
</body>
</html>

10
11

呼吸效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><style>.box{width: 500px;height: 400px;margin: 40px auto;background-color: cadetblue;border-radius: 5px;box-shadow: 0 1px 2px;animation: breathe 2.7s ease-in-out infinite alternate;}@keyframes breathe {0%{opacity: 0.2;box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);}50%{opacity: 0.5;box-shadow: 0 1px 2px rgba(18, 190, 84, 0.76);}100%{opacity: 1;box-shadow: 0 1px 30px rgba(59, 255, 255, 1);}}</style>
</head>
<body><div class="box"></div>
</body>
</html>

12
13

媒体查询

14
15

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><style>.box1{width: 300px;height: 300px;}@media screen and (max-width: 768px) {/*max-width: 768px屏幕宽度768手机*/.box1{background-color: aqua;}.p1{display: none;}.p2{display: none;}}@media screen and (min-width: 768px) and (max-width: 996px) {/*max-width: 768px屏幕宽度996平板*/.box1{background-color: blue;}.p1{display: none;}.p2{display: block;/*block显示，none不显示*/}}@media screen and (min-width:996px) {/*max-width: 768px屏幕宽度996电脑*/.box1{background-color: brown;}.p1{display: block;}.p2{display: block;/*block显示，none不显示*/}}</style>
</head>
<body><div class="box1"></div><p class="p1">嘎嘎嘎</p><p class="p2">哈哈哈</p>
</body>
</html>

图1
16
2
17
3
18

雪碧图

在这里插入图片描述
19

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><style>.icon{display: block;/*block把一个行内元素变化成一个块级元素；inline变成一个行内元素*/width: 70px;height: 70px;background-image: url(4.jpg);border: 1px solid red;background-position: -26px -30px;/*参数是xy轴*/}.icon2{display: block;/*block把一个行内元素变化成一个块级元素；inline变成一个行内元素*/width: 70px;height: 70px;background-image: url(4.jpg);border: 1px solid red;background-position: -26px -140px;/*参数是xy轴*/}</style>
</head>
<body><span class="icon"></span><span class="icon2"></span>
</body>
</html>

20

字体图标

21
22
下载可以使用的图标代码，iconfont.cn
23
24

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="./font/iconfont.css"><title></title><style>.icon{display: block;/*block把一个行内元素变化成一个块级元素；inline变成一个行内元素*/width: 70px;height: 70px;background-image: url(4.jpg);border: 1px solid red;background-position: -26px -30px;/*参数是xy轴*/}.icon2{display: block;/*block把一个行内元素变化成一个块级元素；inline变成一个行内元素*/width: 70px;height: 70px;background-image: url(4.jpg);border: 1px solid red;background-position: -26px -140px;/*参数是xy轴*/}.xing{font-size: 40px;color: brown;/*color可以设置图标颜色*/}</style>
</head>
<body><span class="icon"></span><span class="icon2"></span><span class="iconfont icon-xing xing"></span>
</body>
</html>

25

相关文章：

html从零开始8：css3新特性、动画、媒体查询、雪碧图、字体图标【搬代码】

css3新特性 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice-width, …...

编程日记 2024/2/17 13:06:47

HAL库 STM32驱动W25QXX驱动例程

HAL库 STM32驱动W25QXX驱动例程 &#x1f4cd;驱动程序参考&#xff1a;《STM32CubeMX | 基于STM32使用HAL库W25Q128驱动程序》&#x1f511; 驱动方式&#xff1a;硬件SPI方式和SPI DMA方式。&#x1f516;适用于&#xff1a;W25X系列/Q系列芯片:W25Q80、W25Q16、W25Q32、 W25…...

编程日记 2024/2/17 13:02:43

C#入门及进阶|数组和集合（九）：Stack类

在C#中&#xff0c;通过类Stack来封装对栈的操作&#xff0c;使得对栈的操作变得非常简单和容易理解。 栈是按照“后进先出”的原则来操作元素。 栈集合常用的属性和方法: 属性说明Count获取 Stack 中包含的元素数。方法说明Peek返回位于栈顶部的对象但不将其移除。Po…...

编程日记 2024/2/17 13:01:42

算法训练day31贪心算法理论基础Leetcode455分发饼干376摆动序列53最大子序和

贪心算法理论基础 文章链接 代码随想录 (programmercarl.com) 说实话贪心算法并没有固定的套路。最好用的策略就是举反例&#xff0c;如果想不到反例&#xff0c;那么就试一试贪心吧。 面试中基本不会让面试者现场证明贪心的合理性&#xff0c;代码写出来跑过测试用例即可&…...

编程日记 2024/2/17 12:57:39

Java与JavaScript同源不同性

Java是目前编程领域使用非常广泛的编程语言&#xff0c;相较于JavaScript&#xff0c;Java更被人们熟知。很多Java程序员想学门脚本语言&#xff0c;一看JavaScript和Java这么像&#xff0c;很有亲切感&#xff0c;那干脆就学它了&#xff0c;这也间接的帮助了JavaScript的发展…...

编程日记 2024/2/17 12:55:37

【JavaEE】spring boot快速上手

SpringBoot快速上手 文章目录 SpringBoot快速上手Maven会出现的一个官方bug创建完项目之后常用的的三个功能依赖管理Maven仓库中央仓库本地仓库国内源配置私服 springboot项目创建什么是springspring boot项目的创建Hello Worldweb服务器 SpringMVC什么是SpringWebMVC什么是MVC…...

编程日记 2024/2/17 12:54:36

【数据结构】16 二叉树的定义，性质，存储结构（以及先序、后序、中序遍历）

二叉树 一个二叉树是一个有穷的结点集合。 它是由根节点和称为其左子树和右子树的两个不相交的二叉树组成的。 二叉树可具有以下5种形态。 性质 一个二叉树第i层的最大结点数为 2 i − 1 2^{i-1} 2i−1, i ≥ 1 i \geq 1 i≥1 每层最大结点可以对应完美二叉树&#xff08;…...

编程日记 2024/2/17 12:52:34

GPT SOVITS项目 一分钟克隆 （文字输出）

步骤流程&#xff1a;&#xff08;首先使用UVR 提取人声文件&#xff0c;然后按下面步骤进行&#xff09; 注意这里提交的音频是参考的音频...

编程日记 2024/2/17 12:51:33

python34-Python列表和元组之加法

列表和元组支持加法运算&#xff0c;加法的和就是两个列表或元组所包含的元素的总和。 需要指出的是&#xff0c;列表只能和列表相加;元组只能和元组相加;元组不能直接和列表相加。 如下代码示范了元组和列表的加法运算。 # !/usr/bin/env python# -*- coding: utf-8 -*-# T…...

编程日记 2024/2/17 12:47:30

不做程序员了（转岗半年后对程序员岗位的思考）

不做程序员了&#xff08;转岗半年后对程序员岗位的思考&#xff09; 前言 好久没有更新了&#xff0c;已经久到CSDN的小编来问我为什么不更了。原因是我半年前转岗了&#xff0c;不再做程序员了&#xff0c;由程序员变为了产品经理。废话不多说&#xff0c;换个视角来给大家…...

编程日记 2024/2/17 12:46:29

DS：八大排序之直接插入排序、希尔排序和选择排序

创作不易&#xff0c;感谢三连支持&#xff01;&#xff01; 一、排序的概念及运用 1.1 排序的概念 排序&#xff1a;所谓排序&#xff0c;就是使一串记录&#xff0c;按照其中的某个或某些关键字的大小&#xff0c;递增或递减的排列起 来的操作。稳定性&…...

编程日记 2024/2/17 12:44:27

【MySQL】-21 MySQL综合-8（MySQL默认值+MySQL非空约束+MySQL查看表中的约束）

MySQL默认值MySQL非空约束MySQL查看表中的约束 MySQL默认值在创建表时设置默认值约束在修改表MySQL默认值在创建表时设置默认值约束在修改表时添加默认值约束删除默认值约束删除默认值约束 MySQL非空约束在创建表时设置非空约束在修改表时添加非空约束删除非空约束 MySQL查看表…...

编程日记 2024/2/17 12:41:25

力扣hot3--并查集+哈希

第一想法是排个序然后遍历一遍&#xff0c;but时间复杂度就超啦 并查集居然与哈希结合了&#xff08;&#xff09; 已经好久没用过并查集了&#xff0c;&#xff0c;&#xff0c;我们用哈希表f_node中来记录原结点的父节点&#xff0c;其中key是原结点&#xff0c;value是父节点…...

编程日记 2024/2/17 12:38:21

微信网页版能够使用（会顶掉微信app的登陆）

一、文件结构 新建目录chrome新建icons&#xff0c;其中图片你自己找吧新建文件manifest.json新建文件wx-rules.json 二、文件内容 对应的png你们自己改下 1、manifest.json {"manifest_version": 3,"name": "wechat-need-web","author…...

编程日记 2024/2/17 12:33:16

word软件中硬件图像加速有什么用处？禁用硬件图形加速(G)会影响word文档中插入图片的分辨率吗？

问题描述&#xff1a;word软件中硬件图像加速有什么用处&#xff1f;禁用硬件图形加速(G)会影响word文档中插入图片的分辨率吗&#xff1f; 问题解答&#xff1a; 在 Microsoft Word 中&#xff0c;硬件图形加速主要用于提高图形元素的渲染速度和性能&#xff0c;特别是处理大…...

编程日记 2024/2/17 12:32:15

.NET Core MongoDB数据仓储和工作单元模式封装

前言 上一章我们把系统所需要的MongoDB集合设计好了&#xff0c;这一章我们的主要任务是使用.NET Core应用程序连接MongoDB并且封装MongoDB数据仓储和工作单元模式&#xff0c;因为本章内容涵盖的有点多关于仓储和工作单元的使用就放到下一章节中讲解了。仓储模式&#xff08;R…...

编程日记 2024/2/17 12:28:12

lua：有关表访问的metamethod

针对在两种正常状态&#xff1a;表的不存在的域的查询和修改&#xff0c;Lua也提供了改变 tables的行为的方法。 index metamethod 我们可以通过index元方法来实现访问table内部不存在的域时人为操控返回数据。 比如以下测试代码&#xff1a; local set {1,2,3} setmetata…...

编程日记 2024/2/17 12:27:11

【MySQL】索引事务

MySQL索引事务 1. 索引1.1 概念1.2 作用1.3 使用场景1.4 使用1.5 案例 2. 事务2.2 事物的概念2.3 使用 3. 内容重点总结 1. 索引 1.1 概念 索引是一种特殊的文件&#xff0c;包含着对数据表里所有记录的引用指针。可以对表中的一列或多列创建索引&#xff0c; 并指定索引的类…...

编程日记 2024/2/17 12:24:08

ChatGPT重大升级：能自动记住用户的习惯和喜好，用户有权决定是否共享数据给OpenAI

OpenAI刚刚宣布了ChatGPT的一项激动人心的更新&#xff01; OpenAI在ChatGPT中新加了记忆功能和用户控制选项&#xff0c;这意味着GPT能够在与用户的互动中记住之前的对话内容&#xff0c;并利用这些信息在后续的交谈中提供更加相关和定制化的回答。 这一功能目前正处于测试阶…...

编程日记 2024/2/17 12:23:07

CSS设置盒子阴影

语法 box-shadow: *h-shadow v-shadow blur spread color* inset; 注释: box-shadow向框添加一个或多个阴影. 该属性是由逗号分隔的阴影列表,每个阴影由2-4个长度值、可选的颜色值及可选的inset关键词来规定。省略长度的值是0。 外阴影 a、给元素右边框和下边框加外阴影——把…...

编程日记 2024/2/17 12:20:04

【手把手教学】Tesseract-OCR图片文字识别从安装到实战

1. Tesseract-OCR简介与安装准备 第一次接触图片文字识别技术时&#xff0c;我和很多人一样觉得这是个遥不可及的黑科技。直到发现了Tesseract-OCR这个开源工具&#xff0c;才发现原来OCR技术可以如此亲民。Tesseract最初由HP实验室开发&#xff0c;后来由Google接手维护&#…...

编程新知 2026/3/31 4:31:15

打造沉浸式音乐体验：Apple Music-Like Lyrics 全栈技术指南

打造沉浸式音乐体验&#xff1a;Apple Music-Like Lyrics 全栈技术指南 【免费下载链接】applemusic-like-lyrics 一个基于 Web 技术制作的类 Apple Music 歌词显示组件库&#xff0c;同时支持 DOM 原生、React 和 Vue 绑定。 项目地址: https://gitcode.com/gh_mirrors/ap/a…...

编程新知 2026/3/31 4:15:04

手把手教你用EAS2搞定maxon电机与elmo驱动器：从参数辨识到运动控制

手把手教你用EAS2实现maxon电机与elmo驱动器的精准控制 在工业自动化和精密运动控制领域&#xff0c;maxon电机以其卓越的性能和可靠性著称&#xff0c;而elmo驱动器则是实现高精度控制的理想选择。本文将带你从零开始&#xff0c;通过EAS2软件完成从硬件连接到参数辨识&#x…...

编程新知 2026/3/31 3:16:16

揭秘Figma-MCP与ClaudeCode：驱动像素级UI还原的协议与智能引擎

1. Figma-MCP协议&#xff1a;设计到代码的桥梁 Figma-MCP协议是连接设计工具与开发环境的关键纽带。我第一次接触这个协议时&#xff0c;就被它解决设计还原痛点的能力震撼了。传统开发流程中&#xff0c;设计师在Figma里精心打磨的界面&#xff0c;到了开发阶段往往要经历痛苦…...

编程新知 2026/3/31 3:10:16

哪种编程语言更契合 Claude Code？：从代码行数到 Token 时代的效能重构

在软件开发的漫长岁月中&#xff0c;我们曾习惯于用代码行数来衡量工作量&#xff1b;而今&#xff0c;在 AI 编程的纪元&#xff0c;工作量的天平正向 Token 计数倾斜。就在几周前&#xff0c;GitHub 上涌现出一项令人侧目的基准测试&#xff1a;mame/ai-coding-lang-bench。其…...

编程新知 2026/3/31 3:04:13

构建实时体积渲染管线：Unreal VDB插件深度解析与实践指南

构建实时体积渲染管线&#xff1a;Unreal VDB插件深度解析与实践指南 【免费下载链接】unreal-vdb This repo is a non-official Unreal plugin that can read OpenVDB and NanoVDB files in Unreal. 项目地址: https://gitcode.com/gh_mirrors/un/unreal-vdb 在实时渲染…...

编程新知 2026/3/31 1:37:14

ROS2数据录制实战：用ros2 bag记录小海龟运动轨迹（附常见问题排查）

ROS2数据录制实战&#xff1a;从入门到精通的ros2 bag全指南 小海龟在屏幕上划出优美轨迹的瞬间&#xff0c;你是否想过如何完整记录这些运动数据&#xff1f;ROS2中的ros2 bag工具正是为解决这类需求而生。作为机器人开发中的数据"时光机"&#xff0c;它不仅能忠实记…...

编程新知 2026/3/31 0:52:54

RRFLibraries：Duet 3D打印机固件的硬实时C++驱动库

1. RRFLibraries 项目概述RRFLibraries 是 RepRapFirmware 生态系统中高度工程化的底层软件基础设施&#xff0c;其定位并非通用型嵌入式库&#xff0c;而是专为 3D 打印固件——特别是 Duet 系列控制器&#xff08;Duet 2 WiFi、Duet 3 Mainboard、Duet 3 Mini&#xff09;——…...

编程新知 2026/3/31 0:40:46

Harness Engineering 又是什么新 AI 玩具？

今天我们聊了业内最新提出的 Harness Engineering。可以看到&#xff0c;在 AI 智能体优先的世界里&#xff0c;软件工程的鲁棒性开始转移到了支撑智能体上。最近 AI 编程可以说是卷上天了&#xff0c;不得不说时代的大车轱辘已经碾过来了。GLM 一个月内狂发新模型。我们今天来…...

编程新知 2026/3/30 23:02:13

Realistic Vision V5.1镜像免配置部署教程：Docker+本地模型路径自动校验

Realistic Vision V5.1镜像免配置部署教程&#xff1a;Docker本地模型路径自动校验 1. 项目概述 Realistic Vision V5.1虚拟摄影棚是基于Stable Diffusion 1.5生态顶级写实模型开发的本地化工具&#xff0c;专为追求摄影级人像效果的用户设计。这个解决方案通过Docker容器化技…...

编程新知 2026/3/30 22:56:10