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

news2024/12/27 13:21:12

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.coloradmin.cn/o/1451948.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

vue导出word文档（图文示例）

vue导出word文档（图文示例）

第076个 查看专栏目录: VUE 本文章目录 示例说明示例效果图导出的文件效果截图示例源代码参数说明&#xff1a;重要提示&#xff1a;API 参考网址 示例说明 在Vue中导出Word文档&#xff0c;可以使用第三方库file-saver和html-docx-js。首先需要安装这两个库&#xff1a; npm …
阅读更多...
Java微服务学习Day2

Java微服务学习Day2

文章目录 Nacos配置管理统一配置管理配置热更新![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/c8a2d17baeef411980b44b432eb9692a.png)配置共享搭建Nacos集群 Feign远程调用介绍自定义配置性能优化最佳实践 Gateway服务网关介绍搭建网关服务路由断言工厂路由过滤器…
阅读更多...
Python hash函数

Python hash函数

在Python编程中&#xff0c;hash()函数是一个重要的内置函数&#xff0c;用于计算对象的哈希值。哈希值是一种由固定长度的字符串表示的数据摘要&#xff0c;通常用于在散列表中快速查找、比较对象或数据完整性验证等场景。本文将深入探讨Python中的hash()函数&#xff0c;包括…
阅读更多...
【Linux网络编程五】Tcp套接字编程(四个版本服务器编写)

【Linux网络编程五】Tcp套接字编程(四个版本服务器编写)

【Linux网络编程五】Tcp套接字编程(四个版本服务器编写&#xff09; [Tcp套接字编程]一.服务器端进程&#xff1a;1.创建套接字2.绑定网络信息3.设置监听状态4.获取新连接5.根据新连接进行通信 二.客户端进程&#xff1a;1.创建套接字2.连接服务器套接字3.连接成功后进行通信 三…
阅读更多...
2.15练习

2.15练习

选择题 1. B2. B3. C4. D5. A6. B7. C8. B9. D10. B11. A12. B 填空题 1. a b c 2.string s: I like it. String t:A like it. 3. 30 10 30 n Learning
阅读更多...
云计算基础-虚拟机迁移原理

云计算基础-虚拟机迁移原理

什么是虚拟机迁移 虚拟机迁移是指将正在运行的虚拟机实例从一个物理服务器&#xff08;或主机&#xff09;迁移到另一个物理服务器&#xff08;或主机&#xff09;的过程&#xff0c;而不会中断虚拟机的运行。 虚拟机拟机迁移分类虚 热迁移&#xff1a;开机状态下迁移 冷迁…
阅读更多...
“分布式透明化”在杭州银行核心系统上线之思考

“分布式透明化”在杭州银行核心系统上线之思考

导读 随着金融行业数字化转型的需求&#xff0c;银行核心系统的升级改造成为重要议题。杭州银行成功上线以 TiDB 为底层数据库的新一代核心业务系统&#xff0c;该实践采用应用与基础设施解耦、分布式透明化的设计开发理念&#xff0c;推动银行核心系统的整体升级。 本文聚焦…
阅读更多...
H12-821_44

H12-821_44

44.如图所示的网络,R1设备配置路由渗透,那么R1设备把Level-2的LSP发送给R3,使R3可以获知全网路由。 A.正确 B.错误 答案&#xff1a;B 注释&#xff1a; 感觉题目描述有两个问题&#xff1a; 1. R3是Level-1-2路由器&#xff0c;本来就可以学习到Level-2的路由。题目中的R3应该…
阅读更多...
第七篇【传奇开心果系列】Python微项目技术点案例示例：数据可视化界面图形化经典案例

第七篇【传奇开心果系列】Python微项目技术点案例示例：数据可视化界面图形化经典案例

传奇开心果微博系列 系列微博目录Python微项目技术点案例示例系列 微博目录一、微项目开发背景和项目目标&#xff1a;二、雏形示例代码三、扩展思路介绍四、数据输入示例代码五、数据分析示例代码六、排名统计示例代码七、数据导入导出示例代码八、主题定制示例代码九、数据过…
阅读更多...
微信网页版能够使用（会顶掉微信app的登陆）

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

一、文件结构 新建目录chrome新建icons&#xff0c;其中图片你自己找吧新建文件manifest.json新建文件wx-rules.json 二、文件内容 对应的png你们自己改下 1、manifest.json {"manifest_version": 3,"name": "wechat-need-web","author…
阅读更多...
[BUUCTF]-PWN:ciscn_2019_es_1解析(tcachebin duf)

[BUUCTF]-PWN:ciscn_2019_es_1解析(tcachebin duf)

查看保护 再查看ida 大致为alloc创建堆块&#xff0c;free释放堆块&#xff0c;show输出堆块内容 但是要注意一点free没有清空堆块指针 完整exp&#xff1a; from pwn import* from LibcSearcher import* pprocess(./es1) premote(node5.buuoj.cn,26841)def alloc(size,cont…
阅读更多...
基于剪贴板的文件传输方案

基于剪贴板的文件传输方案

文章目录 背景原理步骤获取待上传文件的十六进制数据格式转换输出 背景 某次误删了环境上的C库之后想到的 什么都不可用了&#xff0c;但当前的ssh连接还在&#xff0c;echo命令和重定向符还可以使用 这就催生了我的想法&#xff1a;直接用echo -en “\xab\xcd” > file这样…
阅读更多...
DataX源码分析-插件机制

DataX源码分析-插件机制

系列文章目录 一、DataX详解和架构介绍 二、DataX源码分析 JobContainer 三、DataX源码分析 TaskGroupContainer 四、DataX源码分析 TaskExecutor 五、DataX源码分析 reader 六、DataX源码分析 writer 七、DataX源码分析 Channel 八、DataX源码分析-插件机制 文章目录 系列文章…
阅读更多...
HTML | DOM | 网页前端 | 常见HTML标签总结

HTML | DOM | 网页前端 | 常见HTML标签总结

文章目录 1.前端开发简单分类2.前端开发环境配置3.HTML的简单介绍4.常用的HTML标签介绍 1.前端开发简单分类 前端开发&#xff0c;这里是一个广义的概念&#xff0c;不单指网页开发&#xff0c;它的常见分类 网页开发&#xff1a;前端开发的主要领域&#xff0c;使用HTML、CS…
阅读更多...
活用 Composition API 核心函数，打造卓越应用（下）

活用 Composition API 核心函数，打造卓越应用（下）

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…
阅读更多...
C#根据权重抽取随机数

C#根据权重抽取随机数

&#xff08;游戏中一个很常见的简单功能&#xff0c;比如抽卡抽奖抽道具&#xff0c;或者一个怪物有多种攻击动作&#xff0c;按不同的权重随机出个攻击动作等等……&#xff09; 假如有三种物品 A、B、C&#xff0c;对应的权重分别是A&#xff08;50&#xff09;&#xff0c…
阅读更多...
yolov8源码解读Detect层

yolov8源码解读Detect层

yolov8源码解读Detect层 Detect层解读网络各层解读及detect层后的处理 关于网络的backbone,head&#xff0c;以及detect层后处理&#xff0c;可以参考文章结尾博主的文章。 Detect层解读 先贴一下全部代码,下面一一解读。 class Detect(nn.Module):"""YOLOv8 …
阅读更多...
【开源】JAVA+Vue.js实现大学计算机课程管理平台

【开源】JAVA+Vue.js实现大学计算机课程管理平台

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 实验课程档案模块2.2 实验资源模块2.3 学生实验模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 实验课程档案表3.2.2 实验资源表3.2.3 学生实验表 四、系统展示五、核心代码5.1 一键生成实验5.2 提交实验5.3 批阅实…
阅读更多...
如何选择一个适合自己的赛道

如何选择一个适合自己的赛道

&#xff08;点击即可收听&#xff09; 最开始一定要先做好定位&#xff0c;也就是你做短视频的目的是什么&#xff1f;当然对大多数人来说&#xff0c;终极目的肯定是赚钱&#xff0c;但赚钱的速度是由定位决定的 如果你资金比较充裕&#xff0c;不急于赚钱&#xff0c;就可以…
阅读更多...
配置oracle连接管理器（cman）

配置oracle连接管理器（cman）

Oracle Connection Manager是一个软件组件&#xff0c;可以在oracle客户端上指定安装这个组件&#xff0c;Oracle连接管理器代理发送给数据库服务器的请求&#xff0c;在连接管理器中&#xff0c;我们可以通过配置各种规则来控制会话访问。 简而言之&#xff0c;不同于专用连接…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023