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

已于 2024-02-16 23:16:04 修改
阅读量1k 收藏 29
点赞数 9
文章标签： css3 html 媒体
于 2024-02-16 23:13:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52001174/article/details/136123363
版权

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

搬代码
关注
《从零开始学HTML5+CSS3》中文PDF及配套代码.rar
05-31
《从零开始学HTML5+CSS3》是一本旨在帮助初学者掌握现代网页开发核心技术的教程。这本书包含HTML5和CSS3的详细讲解，以及配套的实战代码示例，覆盖了从基础知识到高级特性的全面内容。以下是针对这两个重要技术的...
HTML---利用CSS3制作网页动画
zhoutong2323的博客
12-26 1707
CSS3是HTML的样式语言，它用于描述和控制HTML文档的外观和布局。CSS3是CSS的最新版本，引入了一些新的特性和模块，以增强样式表的功能和灵活性。CSS函数是一种用于处理CSS属性值的特殊函数。它们可以接受特定的指令（输入参数），并执行指令的相应动作，并返回执行结果，然后将该结果用作CSS属性的值。函数名(参数1, 参数2, ...)函数名称：函数的名称用于识别和调用特定的函数。例如，rgb()是一个用于设置颜色的函数。参数：函数接受一个或多个参数，用于指定函数执行时的数据。
HTML5第九章
qq_43142032的博客
02-13 1337
第九章 1.CSS3变形 CSS3变形是一些效果的集合 如平移、旋转、缩放、倾斜效果 每个效果都可以称为变形（transform），它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化 浏览器对变形属性的支持情况，并根据不同浏览器添加前缀 变形函数 translate()：平移函数，基于X、Y坐标重新定位元素的位置 语法：translate(tx,ty); scale()：缩放函数，可以使任意元素...
HTML--利用CSS3制作网页动画
one piece的博客
07-27 975
CSS3是HTML的样式语言，它用于描述和控制HTML文档的外观和布局。CSS3是CSS的最新版本，引入了一些新的特性和模块，以增强样式表的功能和灵活性。CSS函数是一种用于处理CSS属性值的特殊函数。它们可以接受特定的指令（输入参数），并执行指令的相应动作，并返回执行结果，然后将该结果用作CSS属性的值。函数名(参数1, 参数2, ...)函数名称：函数的名称用于识别和调用特定的函数。例如，rgb()是一个用于设置颜色的函数。参数：函数接受一个或多个参数，用于指定函数执行时的数据。
CSS3实现动画效果
热门推荐
AXDRXS的博客
12-17 1万+
CSS3实现动画效果
html的动画属性,CSS3动画属性
weixin_42170064的博客
06-04 1157
在了解css3动画属性之前我们要知道动画的原理，就是一定时间内播放多张图片，也可以说是把整个运动过程分成多份，如下图，下图人物从右至左的变化过程即动画。动画属性：1.animation-name:设置动画的名字，指定动画运动的名称2.@keyframes (关键帧):关键帧的设置是设置不同阶段下特定的CSS样式的值语法：@keyframes animationname(动画名){from{}to{...
html实现简单动画,编写自己的代码库(css3常用动画的实现)
weixin_34278412的博客
06-10 3340
1.前言在月初的时候，发了CSS3热身实战--过渡与动画(实现炫酷下拉，手风琴，无缝滚动)。js的代码库也发过两次，两篇文章。之前也写了css3的热身实战，既然热身完了，是时候开始封装css3的代码库了，相比起js的代码库，css3的代码库的逻辑性就更加简单了！可以说只要打上注释和一张效果图就可以让大家明白了其中的原理了！我写代码库的时候，动画效果主要是参考了三个开源项目，nec，hover.cs...
CSS3火警提示图标动画特效
07-24
【CSS3火警提示图标动画特效】是一种利用CSS3的强大功能来实现的视觉效果，它通过CSS3的animation属性创建了一种生动的火警图标，伴随着声波振动的动画，以此来模拟火警报警器的工作状态，提升用户体验，增强警示...
HTML5css3样式图标查询手册源代码
03-18
在本"HTML5css3样式图标查询手册源代码"中，我们可以看到如何利用这两者来创建一个图标查询系统，使得开发者可以更方便地在网页中使用各种图标。 首先，HTML5引入了许多新的元素和特性，比如`<article>`、`...
CSS3新拟态图标悬停动画特效代码.zip
11-02
在这个名为“CSS3新拟态图标悬停动画特效代码.zip”的压缩包中，我们很显然会发现一个专注于利用CSS3实现的新拟态（Neumorphism）设计风格的图标悬停动画效果。 新拟态设计风格是近年来流行的一种UI设计趋势，它...
CSS3点击左侧图标导航菜单网页全屏切换动画代码.zip
07-11
4. **媒体查询**：利用CSS3的媒体查询（`@media`），可以针对不同的设备特性（如屏幕大小）应用不同的样式，这对于实现全屏切换尤其重要。 5. **JavaScript交互**：虽然标题主要强调CSS3，但实现点击图标触发全屏...
html中如何设置动画效果,css3如何设置动画？
weixin_36082987的博客
06-04 944
首先我们来了解一下css3实现简单动画需要用到的属性：animation属性，@keyframes“规则”。animation属性和@keyframes“规则”是css3新增的属性，animation属性可用来给动画设置许多的CSS样式，例如color，background-color，height，或width。【推荐视频学习：css3教程，了解更多css3属性】我们先通过@keyframes“...
前端基础HTML5CSS3动画
weixin_42218868的博客
03-23 720
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>$美少女战士$</title> <style> /* animation 所有动画属性的简写属性，除了 animation-...
【前端】【html5/css3】前端学习之路（四）（CSS3动画/CSS3伸缩布局/CSS3背景）
SuiKaSan的自学室
08-01 1264
一、动画【  animation  】 动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。 语法格式： animation:动画名称 花费时间 运动曲线  何时开始  播放次数  是否反方向; 以上的几项，除了 名字，动画时间，延时  有严格顺序要求之外，其他顺序随意。  直接用案例理解吧。 案例一（基本理解） ...
Html+css3动画效果
weixin_44540196的博客
01-18 1万+
Html+css3动画效果 开发工具与关键技术：DW 作者：彭春怡 撰写时间：2019/1/16 1.下面是通过html+css3完成的一个动画效果，“跳跳球”。实现的代码如图所示： Html代码： Css3 代码： 通过“@keyframes” 元素完成css3的动画效果。 下面便是代码实现的效果：...
哈哈，又找到几个强大的html5+css3的动画效果
weblhy的博客
08-29 1万+
一周HTML5经典回顾 31个别出心裁的HTML5动画 40,425 人浏览 发表回复 13 又是一周即将过去，我们来精心挑选这周分享的31款别出心裁的HTML5动画，很多还比较实用，一起来看看吧。 1、HTML5迷你音乐播放器 3D翻转播放按钮 上一篇我们分享了一款外观很酷的HTML5音乐播放器，这次分享的播放器比较小巧迷你，虽然外观没有上一个播放
现今 CSS3 最强二维布局系统 Grid 网格布局
qq_73220073的博客
10-13 1066
Grid 布局是一个基于网格的二位布局系统，是目前 CSS 最强的布局系统，它可以同时对列和行进行处理（它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局） CSS3 最强布局系统 Grid 布局 二维布局系统
【CSS3】css开篇基础（3）
最新发布
Easonmax的博客
10-17 304
相同选择器给设置相同的样式，此时一个样式就会覆盖(层叠)另一个冲突的样式。如果子元素没有指定某个样式，它会继承其父元素的样式。优先级决定当多个选择器应用于同一元素时，哪个选择器的样式生效。而如果我们不想要单元格之间有间隙，可以变成这样，加上一句代码。的圆角边框可以使一个正方形元素变成圆形，使矩形变成椭圆。在学习html5和css3的基础上使我们的前端使用更高级。如果一个元素使用多个选择器，它们的优先级会叠加。这些区域一起决定了元素的最终显示效果和占用空间。按顺序设置上、右、下、左的内边距。
CSS3 提示框带边角popover
阿酷tony
10-17 113
CSS3 提示框带边角popover，CSS3 提示框带边角popover。因为需要绝对定位子元素（这里就是伪元素），所以需要将其设置为相对对位
CSS Media查询详解：从CSS2到CSS3的媒体类型和属性应用
CSS Media查询是响应式设计的关键组成部分，虽然它最初在CSS2中已有雏形，但CSS3对其进行了扩展和改进。媒体查询允许网页根据不同的媒介类型应用不同的CSS样式，从而实现适应不同设备和屏幕尺寸的设计。以下是媒体...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值