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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/686295.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux kernel 内存踩踏之KASAN_SW_TAGS(二)

一、背景 linux kernel 内存踩踏之KASAN&#xff08;一&#xff09;_kasan版本跟hasan版本区别-CSDN博客 上一篇简单介绍了标准版本的KASAN使用方法和实现&#xff0c;这里将介绍KASAN_SW_TAGS和KASAN_HW_TAGS 的使用和背后基本原理&#xff0c;下图是三种方式的对比&#x…

萨科微半导体宋仕强介绍说

萨科微半导体宋仕强介绍说&#xff0c;电源管理芯片是指在电子设备系统中&#xff0c;负责对电能的变换、分配、检测等进行管理的芯片&#xff0c;其性能和可靠性直接影响电子设备的工作效率和使用寿命&#xff0c;是电子设备中的关键器件。萨科微slkor&#xff08;www.slkormi…

2023年中国数据智能管理峰会(DAMS上海站2023):核心内容与学习收获(附大会核心PPT下载)

随着数字经济的飞速发展&#xff0c;数据已经渗透到现代社会的每一个角落&#xff0c;成为驱动企业创新、提升治理能力、促进经济发展的关键要素。在这样的背景下&#xff0c;2023年中国数据智能管理峰会&#xff08;DAMS上海站2023&#xff09;应运而生&#xff0c;汇聚了众多…

1.逆向基础

文章目录 一、前言二、什么是逆向&#xff1f;三、软件逆向四、逆向分析技术五、文本字符六、Windows系统1.Win API2.WOW643.Windows消息机制4.虚拟内存 一、前言 原文以及后续文章可点击查看&#xff1a;逆向基础 逆向真的是一个很宏大的话题&#xff0c;而且大多数都是相当…

数据预处理 —— AI算法初识

一、预处理原因 AI算法对数据进行预处理的原因主要基于以下几个核心要点&#xff1a; 1. **数据清洗**&#xff1a; - 数据通常包含缺失值、异常值或错误记录&#xff0c;这些都会干扰模型训练和预测准确性。通过预处理可以识别并填充/删除这些不完整或有问题的数据。 2. **数…

LabVIEW智能监测系统

LabVIEW智能监测系统 设计与实现一个基于LabVIEW的智能监测系统&#xff0c;通过高效的数据采集和处理能力&#xff0c;提高监测精度和响应速度。系统通过集成传感器技术与虚拟仪器软件&#xff0c;实现对环境参数的实时监测与分析&#xff0c;进而优化监控过程&#xff0c;提…

如何实现Vuex数据持久化

Vuex是一个非常流行的状态管理工具&#xff0c;它可以帮助我们在Vue.js应用中管理和共享数据。然而&#xff0c;当应用重新加载或刷新时&#xff0c;Vuex的状态会被重置&#xff0c;这就导致了数据的丢失。那么&#xff0c;如何才能实现Vuex的数据持久化呢&#xff1f;让我们一…

C语言第二十六弹---字符串函数(下)

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】 目录 1、strncat 函数的使用 2、strncmp 函数的使用 3、strstr 函数的使用和模拟实现 4、strtok 函数的使用 5、strerror 函数的使用 6、perror 函数的使用…

51单片机编程应用(C语言):串口通信

目录 通信的基本概念和种类 1.1串行通信与并行通信 ​编辑 1.2同步通信与异步通信 1.3单工&#xff0c;半双工&#xff0c;全双工 1.4通信速率 二、波特率和比特率的关系 串口通信简介&#xff1a; 1.接口标准 RS-232 2、D型9针接口定义 3.通信协议&#xff1a; …

【类与对象 -2】学习类的6个默认成员函数中的构造函数与析构函数

目录 1.类的6个默认成员函数 2.构造函数 2.1概念 2.2特性 3.析构函数 3.1析构函数的概念 3.2特性 1.类的6个默认成员函数 如果一个类中什么成员都没有&#xff0c;简称为空类。 空类中真的什么都没有吗&#xff1f;并不是&#xff0c;任何类在什么都不写时&#xff0c;…

PWM驱动直流电机

一、知识补充; 低频时有蜂鸣器响声&#xff0c;加大PWM频率&#xff0c;超出人耳范围就可以听不到&#xff0c;20Hz~20kHz 加大频率-->减小预分频器&#xff0c;从720-->36现在频率就是20kHz这样不会影响占空比&#xff1f; 二、接线图 三、代码分析 main,c #include…

docker (四)-docker网络

默认网络 docker会自动创建三个网络&#xff0c;bridge,host,none bridge桥接网络 如果不指定&#xff0c;新创建的容器默认将连接到bridge网络。 默认情况下&#xff0c;使用bridge网络&#xff0c;宿主机可以ping通容器ip&#xff0c;容器中也能ping通宿主机。 容器之间只…

飞天使-k8s知识点21-kubernetes实操6-daemonset

文章目录 daemonsetservice endpoint pod 之间的关系service基于Service访问外部服务 daemonset DaemonSet 是 Kubernetes 中的一种资源对象&#xff0c;它确保在集群中的每个节点上都运行一个 Pod 的副本。这对于运行集群级别的守护进程&#xff08;例如日志收集器、监控代理…

链式结构实现队列

链式结构实现队列 1.队列1.1队列的概念及结构1.2队列的实现 2. 队列的各种函数实现3. 队列的全部代码实现 1.队列 1.1队列的概念及结构 队列&#xff1a;只允许在一端进行插入数据操作&#xff0c;在另一端进行删除数据操作的特殊线性表&#xff0c;队列具有先进先出 FIFO(Fi…

.NET Core WebAPI中使用Log4net记录日志

一、安装NuGet包 二、添加配置 // log4net日志builder.Logging.AddLog4Net("CfgFile/log4net.config");三、配置log4net.config文件 <?xml version"1.0" encoding"utf-8"?> <log4net><!-- Define some output appenders -->…

python-自动化篇-办公-将PDF文件转存为图片

因工作中的某些奇葩要求&#xff0c;需要将PDF文件的每页内容转存成按顺序编号的图片。用第三方软件或者在线转换也可以&#xff0c;但批量操作还是Python方便&#xff0c;所谓搞定办公自动化&#xff0c;Python出山&#xff0c;一统天下&#xff1b;Python出征&#xff0c;寸草…

机器学习中7种常用的线性降维技术总结

上篇文章中我们主要总结了非线性的降维技术&#xff0c;本文我们来总结一下常见的线性降维技术。 1、Principal Component Analysis (PCA) Principal Component Analysis (PCA) 是一种常用的降维技术&#xff0c;用于将高维数据集转换为低维表示&#xff0c;同时保留数据集的…

高校疫情防控系统的全栈开发实战

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…

Fiddler 无法抓包手机 https 报文的解决方案来啦!!

解决手机https无法抓包的问题 当你测试App的时候&#xff0c;想要通过Fiddler/Charles等工具抓包看下https请求的数据情况&#xff0c;发现大部分的App都提示网络异常/无数据等等信息 这时候怎么解决呢&#xff1f; 以软件测试面试提刷题APP为例&#xff1a; Fiddler上的显示…

蓝桥杯 星期计算

思路1 由于2022太大&#xff0c;用double来存储&#xff0c;即(52022 % 7) % 7即可 int num 5;int t (int)(Math.pow(20,22)%7);num t;num%7;System.out.println(num1);思路2 你需要知道 (a * b ) % p a % p * b % p Scanner scan new Scanner(System.in);int num 1;for…