CSS3(入门)

已于 2022-06-16 18:05:45 修改
阅读量7.4k 收藏 195
点赞数 19
分类专栏： 前端开发 # HTML+CSS 文章标签： css3 css html
于 2022-02-19 14:56:32 首次发布
该文章版权属于知识汲取者，未经允许请勿转载
本文链接：https://blog.csdn.net/qq_66345100/article/details/122771407
版权

目录

一、CSS3基本概念和作用

Html5是网页的结构，css3是网页的表现（美化），javaScript是网页的交互。
菜鸟教程（学习的工具网站）

  1. 概念：CSS又叫层叠样式表( Cascading Style Sheets )是一种用来表现HTML或XML等文件样式的计算机语言，3是版本号。CSS于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块

  2. 作用：用于控制网页的样式和布局，美化网页（字体、颜色、边距、高度、宽度、背景图片、动画、网页定位和浮动……）

  3. 优势：1）内容与表现分离

    ​ 2）网页结构表现统一，可以实现复用

    ​ 3）样式十分丰富

    ​ 4）利用SEO，容易被搜索引擎收录

二、css引入方式

**三种样式的优先级：**行内样式 > (内部样式|外部样式) 遵从就近原则

  1. **行内样式：**直接写在html代码中 （也称内联样式）
<h1 style="color: red ;">CSS三种style</h1>   <!--h1是需要进行样式改变的内容-->
  1. **内部样式：**可以写在html文件的任何位置
<style>
    h1{
        color:red\green\blue\yellow......
    }
</style>

**注：虽然它可以写在html文件中，但它仍然属于css的范畴，所以不能再该代码块中不能使用html注释，只能使用css注释：//

3.**外部样式： **链接式和导入式

  • 链接式：实现代码写在css文件中，html代码中只管引用（ 当前常用）
h1{
     color:red\green\blue\yellow......
  }

<link rel="stylesheet" href="css/style.css">
  • 导入式：代码位置与链接式一样
h1{
     color:red\green\blue\yellow......
  }

<style>
    @import url("css/style.css");
</style>

两者的区别：

​ 链接式是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；而导入式属于CSS范畴，只能加载CSS；

而导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页 面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷，而链接式会提前加载完CSS文件就不具有这样的缺陷。

对于较大网站，为了便于维护，可能会希望把所有的css样式分类别放到几个css文件中，这样如果使用链接式引入，就需要 几个语句分别导入css，如果要调整css的文件分类，就需要同是调整HTML文件。这对于维护工作来说，是一个缺陷。如果使用导入式，则可以只引进一个总的css文件，在这个文件中再导入其他独立css文件;而链接则不具备这个特性

三、选择器

1、基本选择器

  1. 标签选择器 标签{}

    标签选择器会选择这个html代码中所有这个标签（例如：a、h、p…）的元素

  2. 类选择器 .类名{} //类名中文，英文都可以，符号、数字都不行。最好以英文命名为主，中文命名容易出现乱码

    只改类名相同的元素，可以跨标签使用，比标签选择器更灵活

    //类名可以同时命名多个， class=“类名1 类名2”；

  3. ID选择器 #id名{} //id名的命名与类名的命名相同

    id具有全局唯一性，只能改相应id的元素

三种选中器的优先级：id选择器 > 类选择器 > 标签选择器

/*基本选择器*/
a{
    color: red;
}
.color{
    color: #78e645;
}
#颜色{
    color: #2e28fc;
}

<!--基本选择器的测试-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选择器的学习</title>
    <link rel="stylesheet" href="css/基本选择器.css">
</head>
<body>
<h1>测试标签选择器</h1>
<a href="测试网页.html">点击跳转1</a><br>
<a href="测试网页.html">点击跳转2</a>
<h1>测试类选择器</h1>
<p>p1</p>
<p class="color">p2</p>
<p>p3</p>
<h1>id选择器的测试</h1>
<h2 >标题一</h2>
<h2 >标题二</h2>
<h2 id="颜色">标题三</h2>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iXxt94Bt-1655373020012)(https://s2.loli.net/2022/04/04/MvfwkbAlrDJn2xa.png)]

  1. 通配符选择器 *{}

    选中页面中所有标签

拓展：

.a.b{             //表示class属性中既包含a类名，又包含b类名才会生效     
    color:red;     
}
.a,.b{//当然这种方式来写标签选择器也是可以的
    color:red;     //表示对class属性中只要含有这两中类名其中一个就生效
}                  //同理，当用两个标签 p,h{}来表示时，则{}中的操作对p和h标签同时生效

/*当一个或多个相同的选择器同时选中一个元素时，且操作相同，只有最后选择器中的操纵生效；*/
p{
    color:red;
}
p{
    color:green;//p标签中的文字最终会使绿色
}

2、高级选择器

1.层次选择器

  1. 后代选择器 标签1+空格+标签2{}

    标签1与标签2只要具有从属关系1操作就能生效（标签1不生效，其次当标签1是body时与标签选择器作用等价）

    /*只改变了ol标签里面所用的p标签，不包括li*/
ol p{
    background: #ff0d3c;
}

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高级选择器的学习</title>
    <link rel="stylesheet" href="css/高级选择器.css">
    <p>p4</p>
    <li><p>p3.3</p></li>
</head>

<body>
<p>p1</p>
<p>p2</p>
<ol>
    <li><p>p3.1</p></li>
    <li><p>p3.2</p></li>
    <li><a href="">点击跳转</a></li>
</ol>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gamD74zQ-1655373434079)(https://s2.loli.net/2022/04/04/N8XZO3rjEPekGKx.png)]

  1. 子选择器 标签1>标签2{}

    标签1和标签2必须具有直接从属关系2操作才能够生效

    body>p{
    background: #ff0d3c;
}

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NdJ7Zl54-1655373020013)(https://s2.loli.net/2022/04/04/niZbRgM1WNqrFQu.png)]

  2. 相邻兄弟选择器 .类名 “+” 标签{}

    只对标记类名的同代3的下面的相邻标签生效 //被标记类名的标签不生效，生效的标签类型要与+后面的标签类型相同

    .color + p {
    color: red;
}

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f4uMdsDU-1655373020013)(https://s2.loli.net/2022/04/04/ALJfOUZGkvucqYb.png)]

  3. 通用(相邻兄弟)选择器 .类名 ~ 标签名{}

    对标记类名的同代的下面的所用标签生效 //被标记的标签不生效，下面的同代且同类型标签全部生效

    .color ~ p {
    color: #ff3958;
}
.color~li{
    color:aqua;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rwHO45Rk-1655373489725)(https://s2.loli.net/2022/04/04/c74PojiClQ5J1AY.png)]

2.结构伪类选择器

父级标签+空格+子代标签:元素位置的修饰{} 或 子代标签:nth-child(){} 或 **子代标签:nth-of-type(){} ** //只改变子代标签

什么是伪类？

/*选中body标签的子代标签中的第一个标签，且是p标签才生效*/
body p:first-child{        
    background: red;
}
/*相应的还有last-child*/
/*选中li的父级标签,然后选中它的第二个子代标签，且第二个子标签必须也是li标签才生效*/
li:nth-child(2){
    color: #5eff4b;
}
p:nth-child(3){/*3按标签计数。第3个标签*/
    background: orangered;
}
/*选中li的父级标签，然后选中它的第二个子代P标签（li的父级标签的子代标签中要存在两个p标签）*/
li:nth-of-type(2){/*2按li标签计数，第2个li标签*/
    background: blue;
}
image-20220205211326006

拓展：

超链接伪类选择器:

a:hover{/*鼠标悬浮在链接上显示的颜色*/ 这个是重点
    color:red;
}
a:active{/*鼠标点击时链接显示的颜色*/
    color:green;
}
a:link{/*链接未被访问时显示的颜色，访问后立马返回原来（如果开始未设置就回到默认的颜色，有设置就回到设置的颜色）的颜色*/
    color:blue;
}
a:visited{/*链接访问后显示的颜色*/
    color:orange;
}
很多选择器是可以套用的，如属性选择器和伪类选择器
a[class="abc"]:hover{
    color:green;
}
a:nth-of-type(1):actice{//伪类选择器和伪类选择器
    color:blue;
}
3.属性选择器

标签[属性名=属性值]{} //属性值的匹配可以用正则表达式

a[id]{/*所用a标签只要含有id这个属性就可以生效*/
    color:red;
}
a[class=color]{/*所有a标签中它的class属性中有且仅有color,就生效*/
    color:red;
}
a[class*=color]{/*所有a标签中只要它的class属性含有color这个属性值，就生效*/
    color:red;
}

拓展：

在css的正则表达式中：
1)属性名=属性值：表示绝对等于，属性名一定是只含有该属性值的
例如：对于class="color 颜色"时，采用class=color时是不生效的
2)属性名*=属性值：表示包含，属性名只要含有该属性值就能生效
上诉class*="color",可以生效（当然直接 标签[class]一样生效）
3)属性名^="字符"：表示该属性名含有的属性值是以该字符开始的
4)属性名$="字符"；表示该属性名含有的属性值是以该字符结束的

在css中，initial（初始）、inherit（继承）、unset（未设置）、revert（还原）这四个关键字可以应用于所有的CSS属性

详情看这里

四、网页的美化

为什么要美化网页？

  • 有效传递网页的信息

  • 吸引更多的用户

  • 凸显页面的主题】

  • 提高用户的体验

1、字体

约定俗成都是用 span 标签来突出重点的字，用 div 标签来操作一段代码块，实际上这两个标签没有任何的实际意义

  1. font-style:字体风格

  • normal: 文本正常显示

  • italic: 文本斜体显示

  • oblique: 文本倾斜显示

  1. **font-weight:字体粗细 **
属性值含义
normal默认系统的粗细
bold加粗字体
bloder更粗的字体
lighter比默认的字体更细
inherit继承父级标签的字体粗细
100~ 900300为lighter，400为normal，700为bold，900为bolder

注：当在css代码中，两个相同的选择器同时选中一个属性时，只有最有一个选择器生效

p{
    font-weight: lighter;
}
p{
    font-weight: normal;
}p{
    font-weight: bolder;/*只生效这个*/
}
  1. font-size:字体大小

font-size的属性值分为三种：预定义关键字4、绝对单位5、相对单位6

  • **预定义关键字有 ：**xx-small、x-small、small、medium、large、x-large、xx-large、inherit（继承父级元素的大小）、initial（默认大小，相当于16px）等

  • **绝对单位：**pt( point 点 )，1pt 相当于 1/72in)、in(英寸)、cm(厘米)、mm(毫米)等。

    pt与px的区别有哪些？

  • **相对单位：**绝对尺寸有px( pixel 像素)、em (emphasize)、ex、%

    px:是根据屏幕像素点来确定的。这样不同的显示分辨率就会使相同取值的 px 单位所显示出来的效果截然不同。

    em:表示元素的字体高度，它能够根据字体的 font-size 属性值来确定单位的大小。

    一个 em 等于一个 font-size 的属性值。如果设置font-size: 12pt，则line-height: 2em就会等于30pt。如果设置 font-size 属性的单位为 em，则 em 的值将根据父级标签中的父元素中 font-size 的属性值来确定。如果父级标签中的 font-size属性

    p{
    font-size:10px;
    line-hight:3em;/*此时行高(行的间距)为30px(默认行高是18px)*/
 }

    ex:单位根据所使用的字体中小写字母的高度作为参考。

    在实际使用中，浏览器将通过 em 的值除以 2 得到 ex 的值

    %:是一个相对单位值。百分比值总是通过另一个值来计算，一般参考父对象中相同属性的值。例如，如果父元素宽度为 500px，子元素的宽度为 50%，则子元素的实际宽度为 250px。

    注：使用预定义关键字有两大缺陷：一是可选择范围太小；二是不同厂商对每个关键字对应的字体大小的精确值可能各不不同，导致在不同浏览器下，文本的大小可能不同。因此，不推荐使用预定义关键字来定义字体的大小。

  1. font-family: 字体样式 (种类) //可以设置两种字体，英文和中文。阿拉伯数字是属于英文字

可以中文选楷体，宋体等等，同样的英文也有很多字体,详细可以看这里

1、2、3、4可以直接用一个font来写//用一个font设置时，需要全部齐全

font：oblique(斜体，字体风格)   blod(粗，字体粗细) 20px(字体大小)/50px(行高) Arial(字体样式);

注：行高单独用line-height来设置时，需要写在font属性的后面才会生效

2、文本

  1. 颜色的调制

    颜色可以通过单词、十六进制的数、函数来调制

    • 单词和相应的十六进制数表示：有red（#ff0000）,green（#00ff00）,bule（#0000ff）,yellow（#ffff00）, black（#ffffff）,white（#000000）,purple（#800080）,orange（#FFA500）

    • 当然也可以直接用三位十六进制数来调制颜色，但是能够调制的颜色相对六位十六进制较少，常见的八种:
      红色(red,#f00)、绿色（green,#0f0）、蓝色(blue,#00f)、黄色(yelow,#ff0)、靓紫色(#f0f)、浅绿色的(aqua,#0ff)、黑色、白色

    • 函数调制有两种：rbg( , , ) 和 rbga( , , , )

      rbg函数是对应六位十六进制调色的，每一位数是十进制，取值范围是：0~255，ff换算成十进制就是255，rbg(255,0,0)就是红色（red）,其他的同理都可以进行转换；

      rbga函数相对与rbg函数多了最后一个参数，多出来的参数是用来调制透明度的，范围是：0~1

    颜色的选取（例如：color和background等属性）都可以通过上述三种方法，各有各的存在道理，通常调色可以直接用鼠标在调色盘上来进行，但是比较精确的调色还是需要使用这三种方法

  2. 文本的排版和修饰

    • text-align:center 文本左右居中

    • 行高（line-height）大于或等于文本的高度(height) 文本上下居中

      一行放不下这个文本时，它会换一行，此时，两行文本把它的行高平分成三等分，换n行就分n+2等分

    • 图片后面的文字居中 图像标签{vertical-align:middle;}

    span,img{
    color:red;
    vertical-align: middle;
}
注意：

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ShnSuCUe-1655373020014)(https://s2.loli.net/2022/04/04/kQRPfb8DezpOHWn.png)]

    • text-indent:文本缩进 //一般以em为单位

      .a{
    font-size:32px;/*其他文本没有设置font-size,默认为16px,所以相对其他文本它退后了四个字的位置*/
    font-indent:2em;/*被类名a标记的文本，相对自己向后退两个字的位置。*/
}

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5W5VJrWU-1655373020015)(CSS3.assets/GrzhQ5EvmqfWy7Z.png)]

    • text-decoration 文本修饰

      • underline:下划线
      • line-through:中划线
      • overline:上划线

    • text-shadow 文本阴影 //阴影颜色 水平偏移 垂直偏移 阴影半径

      水平偏移：偏左取负数，偏右取正数 //一般在css中，位置的移动都是遵循：上负下正，左负右正

      垂直偏移：偏上取负数，偏下取正数

      阴影半径：0px ~ (阴影的模糊程度随着阴影半斤的增加而增加，一般到五十就几乎看不到阴影了）

    • 超链接去下划线：

      a{
    text-decoration:none;
}

3、列表

list-style: 列表样式

  • none：去掉列表前的标记（例如：有序列表前的1、2、3……无序列表前的圆点……）

  • disc：将列表前的标记变为 实心圆（列表前的标记默认为实心圆）

  • circle：将列表前的标记变为 空心圆

  • square：将列表前的标记变为 实心方块

  • decimal：将列表前的标记变为相应位置的 序号

  • initial：默认标记（对列表前的标记不做改变）

4、背景图像应用及渐变

1. 背景

  1. background-color:背景颜色 //也可以直接用background来选颜色
  2. background-position: 左右移动 上下移动 背景图片所处的位置
    • background-position-x:只左右移动
    • background-position-y：只移动上下移动
  3. backgroud-imgage:url(“图片地址”) 背景图片设置 //默认是平铺满
  4. background-repeat 平铺方式
    • background-repeat:no-repeat 不平铺（只显示一张图片）
    • background-repeat:repeat-x 水平平铺
    • background-repeat:repeat-y 垂直平铺
  5. backgroud-size: 20px (背景图宽度) 10px(背景图高度) 背景图片大小的设置

1、2、3、4都是可以写在一个background里面的

/*背景颜色  背景图片 背景图片的位置 平铺方式 */
div{
    background:red url("") 200px(向右移动200个像素单位)  100px(向下移动100个像素单位)  no-repeat;
}

想设置一个背景 ，首先要先确定背景的宽度（width）和高度（height），否则默认的背景会很小，如果此时背景图片又很大，则背景只能装下图片的上面一部分。

在这里插入图片描述

2. 渐变

渐变调试网站——>Grabient

五、盒子模型

  1. 盒子模型的概念

在这里插入图片描述

网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模型都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模型。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。 -----摘自百度

  1. 边框

    • boder:1px solid red; 边框的粗细 边框的样式（虚线还是实线） 边框的颜色

      border中也有一些属性可以直接调某一个方向上的边框的粗细，样式，颜色，例如：

      • border-left\border-right 就是调左右边框的粗细
      • border-left-color\borer-right-color

    • border-style:边框样式

      solid:实线 dashed:虚线 none:无边框（默认）……

    • border- color:边框颜色

    • boder-radius:边框弧度

      • 此处填四个数,分别表示，左上角，右上角，右下角，左下角（取值非负）

        当元素块是等高，可以设置borer-radius：50%， 使边框变成圆形(可以用来调头像框)，相应的可以调出半圆

    • box-shadow: 盒子阴影

      box-shadow:10px（右正左负） 10px（下正上负） 2px（阴影半径） red（）阴影颜色; //与文本阴影类似

    • border-image:边框图片（可以图片围绕边框，一般边框距要设置的大一些才能体现）

    详细可以看这里

  2. 外边距和内边距

    位于边框外面，通常默认是白色透明的，外边距的部分不受背景颜色控制，一些属性就有一些默认值，例如：

    bod属性会自带外边距为8，h标签也会自带外边距……

    • margin，padding

      • 当填写四个数字时，表示：上（外、内）边距，右（外、内）边距，下（外、内）边距，左（外、内）边距

      • 当填两个数字时，表示：上下一起取的（外、内）边距 左右一起取的（外、内）边距

      ​ margin:0,auto;可以直接让元素左右对齐 //auto属性是自适应，自己左右居中，当然直接写两个auto也可以

      • 当填一个数字时，表示：上下左右的（外、内）边距
      • 当然也是有一些专门的属性来调某一个方向的边距 margin-/padding-

    • 盒子模型中元素大小的计算：margin+border+padding+content（文本内容的大小，width,height调content的宽高）

      • 元素的总宽度计算公式是这样的：

        总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

      • 元素的总高度最终计算公式是这样的：

        总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

六、浮动

  1. 标准文档流

    不采用特殊定位，和其他排列方法的，默认的排列规则（从左至右，从上至下）。//一般默认的在背景框中的元素都属于标准文档流

    详情

  2. display 用来设置元素的样式

    • block: 块级元素

      • 总是以一个块的形式表现出来，占领一整行。若干同级块元素会从上之下依次排列
      • 可以设置任何方向的内外边距，以及高度宽度
      • 块级元素如果不设置宽度，会自动撑满父级的 width 区域；高度不设置，会被内 容自动撑开高度
      • 可以包含其他的块级元素和行内元素

    • inline: 行内元素

      • 不占用一整行，只有当该行装不下行内元素内时才会换行

      • 只能设置左右两个方向的内外边距

      • 行内元素不可以设置高度、宽度，其高度一般由其字体的大小来决定，其宽度由内容的长度控制

      • 可以包含行内元素

    • inline-block:

      设置了inline-block属性的元素既具有block元素可以设置width和height属性的特性，又保持了inline元素不换行的特性。

    • none: 不显示该元素

  3. float 浮动(不是标准的文档流)

    浮动的元素会和父级元素分层，左右浮动时，直到遇到外边框或其他浮动元素才会停止（背景这个层级的行内元素会被无视，块级元素照样独占一行）

在这里插入图片描述

float:left\right;/* 左\右浮动 */
clear:left\right;/*清除左\右浮动，让浮动的元素重新回到背景框中*/
clear:both;/*清除左右浮动*/

实验

  1. 父级边框塌陷四种解决方案

    标准文档流中，父级框（我称它为背景框）的大小，不去特意设置，它会由内部元素自由撑开，当我们浮动其中某个元素时，他就完全脱离了标准文档流，不属于父级框中的元素了，若它比其他未浮动的元素都大，他就会超脱出父级框，之后若清除浮动，也不会重新回到父级框中。

​ 父级边框塌陷问题：如何让浮动的元素仍然在父级框里面

  • 直接给父级边框赋一个初始值，初始值只要够大，就不会让浮动的元素溢出 //该方法虽然可以用，但不推荐使用

  • 在父级标签的后面添加一个清除浮动的div空标签

    <div class="clear"></div>  /*空的div标签*/

.clear{
    clear:both;
    margin:0;
    padding:0;
}

    个人理解：浮动元素的特性，因为浮动元素遇到另一个浮动元素会停止，当我们在父级标签后加一个清除浮动，前面父级标签中浮动的元素遇到它会受到挤压，从而做到撑开父级框，解决父级框塌缩的问题

  • overflow

    用来规定当内容溢出元素框时所触发的事件（需要干哪些事情）

    属性值含义
    visible默认
    hidden超过父级框的其余内容是不可见的
    auto未超过就继续待在父级框中，超过就按scroll方式
    scroll超过父级框的其余内容可以通过滚动条进行查看
    inherit继承父级元素的overflow属性的值

    在父级元素中添加一个 overflow：hidden （父级框不设置宽高）就能让父级边框包含清除浮动后的元素

在这里插入图片描述

个人理解：超过父级框的其他内容不可见，但是浮动是需要显示的，两者相互妥协（应该需要看底层代码），浮动的元素就只能回到父级框中，父级框又没有设置宽高就被挤进来的浮动元素给撑开了

  • 在父级标签中添加一个伪类 //推荐使用

    #father:after{/*这里是对父级标签标记了一个id名father*/
    content:'';
    display:bolck;
    clear:both;
}

    个人理解：这个方法和增加一个空的div标签是一样的原理，只是这个以代码的形式来实现

七、定位

position:

属性值含义特点
relative相对定位(1)相对于自己原来在标准流的位置移动 (2)原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它 (3)为脱离了标准流
absolute绝对定位(1)父级未定位，相对浏览器定位 (2)父级定位，相对父级元素位置移动 (3)脱离了标准流
fixed固定定位(1)相对于浏览器定位 (2)脱离了标准流
static默认定位什么都不干

拓展：

相对定位和绝对定位不能通过:margin:auto来实现定位居中，可以通过left:50%来调节居中

八、显示被覆盖的内容

  1. z-index: 元素层级设置，可以让被覆盖的元素显示出来

  2. 透明度：

    • opacity：n; //调制透明度 n取0~1
    • filter：alpha(opacity=n) //n取0~100

九、动画

1、trasition 过渡

通常和:hover搭配使用

  • property：应用过渡的CSS属性的名称；
  • duration：过渡效果花费的时间；
  • timing-function：过渡效果的时间曲线；
  • delay：效果开始之前需要等待的时间；

image-20220515220226069

  • ease：默认值，逐渐变慢
  • linear：匀速
  • ease-in：加速
  • ease-out：减速
  • ease-in-out：先加速，后减速

image-20220519000853410

一般直接使用:trasition:过渡时间;所有属性：属性名称写all

2、transform 变形

  • translate：移动 注：①对行内标签不生效 ②移动不影响其他盒子的位置

    //以浏览器窗口左上角为原点，对于X向右为正，对于Y向下为正，对于Z向外为正
trasform:traslate(x,y);
trasform:traslateX(x);
trasform:traslateY(y);
trasform:traslateZ(z);
trasform:traslate3d(x,y,z);
//一般x,y单位是px,当单位是%时，是相对自己移动的，可以用来对盒子进行居中

    总结：如果两个盒子都在标准流中，移动的盒子覆盖不移动的，两个都移动，后移动的覆盖先移动的

    对于traslate3d()来讲，一般是需要搭配透视属性：perpective来一起使用的

    透视的原理：模拟人的眼睛，近大远小，注意：必须写在需要透视元素的父级标签上

    perpective用来设置视距，当视距固定式，通过改变z轴的数值来改变视距，视距越远物体显示越小，视距越近显示越大，当视距小到一定程度，物体会不显示

    一般而言再实战中大部分是通过Z轴来改变视距的

  • rotate：旋转

    trasform:rotate(xdeg);
//x>0时，顺时针旋转；x<0,逆时针旋转
trasform:roate2d(xdeg,ydeg);
trasform-origin:left bottom;//围绕左下角旋转，默认是中心旋转的：50% 50% <=>center center 也可以用像素

    rotateX(xdeg);

    绕X轴旋转

    rotateY(ydeg);

    绕Y轴旋转

    rotateZ(zdeg);

    和2D旋转是一样的，因为Z轴是屏幕到眼睛的轴

    综合写法：rotate3d(xdeg,ydeg,zdeg);

  • scale：缩放

    scale(x,y);
//x,y可以取小时或者整数都可以，x表示宽的放大比例，y表示高的放大比例
scale(x);//表示宽高同时按比例放大

  • transform-origin：设置旋转中心 （默认是元素中心）

    tranform-orign:left bottom;//旋转中心是左下角
中心的表示法：center center <=> 50% 50% <=>xpx ypx(也可以用像素来表示,x表示hieght的一半，y表示width的一半)

综合写法：transform translate() rotate() scale

  • transform-style：3D转换

    要想有立体效果要搭配透视属性perpective，同时该属性需要写给父级，然后给子级添加3D转换

    • flat：子元素不开启3D立体空间（默认是不开启的）
    • perserver：子元素开启3D立体空间

3、keyframe

  • keyfram相关属性：

image-20220518233857756

  • 动画的使用：

    <!--定义动画-->
@keyframes 动画名称{
    0%{//动画开始，0%等价于from
        
    }//0%~25%是动画的第一阶段，同时也是动画第一阶段的时间占比：25%*动画总时长
    25%{
        
    }
    ...
    100%{动画结束，100%等价于to
        
    }
}

    //跑起来的小粉块
<!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>Document</title>
    <style>
        @keyframes moved {
            0% {
                transform: translateX(0px);
            }
            25% {
                transform: translate(1000px, 0px);
            }
            50% {
                transform: translate(1000px, 400px);
            }
            75% {
                transform: translate(0px, 400px);
            }
            100% {
                transform: translate(0px);
            }
        }    
        div {
            height: 100px;
            width: 100px;
            background-color: pink;
            animation-name: moved;
            /* 调用动画 ,必填*/
            animation-duration: 8s;
            /* 动画持续时间，必填 */
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

  • 综合写法：animation:动画名称 动画持续时间 动画运动曲线 动画开始时间 动画播放次数 动画结束后的状态;

4、steps

表示分布完成动画，有了steps就不用写动画的速度了

<!--文字一个一个地出现-->
·<!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>Document</title>
    <style>
        @keyframes flash {
            0% {
                width: 0px;
            }
            100% {
                width: 208px;
            }
        }
        
        h3 {
            overflow: hidden;
            white-space: nowrap;/*强制让文字在一行显示*/
            font-size: 26px;
            color: aqua;
            animation: flash 8s steps(8);
            overflow: hidden;
        }
    </style>
</head>
<body>
   <div>
        <h3>欢迎来到知识汲取者的博客</h3>
    </div>
</body>
</html>
CSS3
CSS3基本概念和作用
CSS3引入方式
行内方式
内部方式
外部方式
选择器
基本选择器
标签选择器
类选择器
id选择器
高级选择器
层次选择器
后代选择器
子代选择器
相邻兄弟选择器
通用相邻兄弟选择器
结构伪类选择器
属性选择器
网页的美化
字体
文本
列表
背景和渐变
盒子模型
浮动
定位
相对定位
绝对定位
固定定位
显示被覆盖的内容
动画

  1. 从属关系：标签1的作用范围涵盖了标签2的作用范围，则标签2是标签1的后代，它们具有从属关系 //哈哈，这是自定义的 ↩︎

  2. 直接从属关系：标签2的上一级就是标签1，则标签2是标签1的子代，它们就具有直接从属关系 ↩︎

  3. 同代：两个或两个以上的标签，父标签是同一个，它们就是同代 //有点类似Java中的父类子类，可以这么理解 ↩︎

  4. 预定义关键字：在idea中选中一个属性后，按空格一般会提示一些值，那些值就是预定义关键字，是提前就已经定义好了的,它有点像C语言中的预定标识符，一般是能够见名知意的，如：scanf,printf等等 ↩︎

  5. 绝对单位：单位的大小是固定的，不会随着其他属性值或设备的改变而改变 ↩︎

  6. 相对单位：单位大小不是固定的，它所设置的对象受屏幕分辨率、可视区域、浏览器设置以及相关元素的大小等多种因素影响。 ↩︎

知识汲取者
关注
  • 19
    点赞
  • 踩
  • 195
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
专栏目录
CSS3圆圈悬浮旋转菜单特效代码
03-20
CSS3圆圈悬浮旋转菜单,旋转特效,css3,旋转菜单,圆圈悬浮,菜单导航,css3旋转.
【全面】CSS3新增了哪些新特性？
有事儿私信。
09-19 1501
CSS3 是 CSS (Cascading Style Sheets) 的第三个主要版本，引入了许多令人兴奋的新特性和功能。在本文中，我们将介绍 CSS3 中一些重要的新增特性，并提供相应的代码示例。
CSS3知识总结
weixin_51109349的博客
12-15 1739
CSS3什么是css3浏览器前缀css3选择器边框圆角渐变径向渐变线性渐变文本和盒子阴影文字换行CSS3字体css3 背景倒影滤镜过渡2D装换3D转换动画1.指定动画2.使用动画flex布局多媒体查询怪异盒子多列布局 什么是css3 CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的新功能。 目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了， IE10以后也开始全面支持CSS3了。 最需要注意的问题是各个浏览器
CSS3全屏3D画布图片切换特效特效代码
03-20
CSS3全屏3D画布图片切换特效是一款基于JS+CSS3实现的带左右按钮的控制全屏图片切换代码。
css3官方帮助文档中文版
07-18
css3官方帮助文档中文版
CSS3详解
clover_page的博客
04-12 3802
CSS3详解 一、CSS3 1-1、基本概念 层叠样式表(Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言 CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力 1-2、发展历程 CSS1.0：网页基本样式 CSS2.0：DIV（块）+ CSS，提出HTML与CSS结构分离的思想，网页变得简单，
Css3详解
Zheng_xinle的博客
08-30 7151
Css3 一、什么是Css3? “CSS3是CSS（层叠样式表）技术的升级版本，是CSS2的升级版本，3只是版本号，它在CSS2.1 的基础上增加了很多强大的新功能。CSS3原理同CSS，是在网页中自定义样式表的选择符，然后在网页中大量引用这些选择符。” 二、Css3可以做什么？ css3可以使用的图片和脚本来实现的效果 比如：圆角、图片边框、文字阴影和盒阴景、渐变、个性化字体、多图片背景、过渡、动画、多栏布局、媒体查询等 Css3动画 一、Css3动画 CSS3 可以创建动画，它可以取代许多网
css_css3新增属性
qq_57226103的博客
04-13 1331
w3c提出的某个css属性，再被浏览器正式支持前，浏览器厂商会根据浏览器内核，使用私有前缀来测试该属性，浏览器正式支持改属性后，就不需要该前缀了，Chrome、Safari和Edge浏览器私有前缀。动态伪类选择器、目标伪类选择器、UI伪类选择器、语言伪类选择器、结构伪类选择器、否定伪类选择器、伪原素选择器。表格单元格(table、thead、tbody、tfoot、th、td、tr、caption)、column-span为all原素(即使该原素没有包裹在多列容器中)、绝对定位、固定定位原素、
H5新增的属性、样式
qq_40137713的博客
05-28 488
-新增元素 说明 新增元素 说明 viode 表示一段视频并提供播放的用户界面 audio 表示音频 canvas 表示位图区域 source 为video和audio提供数据源 track 为video和audio指定字母 svg 定义矢量图 code 代码段 figure 和文档有关的图例 figcapton 图例的说明 main ti...
CSS3(上)CSS3是CSS（层叠样式表）技术的升级版本.md
08-21
CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了 CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多 栏布局等模块 [1] 。 CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创新， 因此通过采用模块方法，CSS3规范里的元素能以不同速度向前发展，因为不同的浏览器厂商只支持给定 特性。但不同浏览器在不同时间支持不同特性，这也让跨浏览器开发变得复杂 。
HTML5+CSS3网站设计基础教程_动手实践源代码
08-01
HTML5+CSS3网站设计基础教程_动手实践源代码
css3参考手册
05-19
css3参考手册，走过路过不要错过哈。css3参考手册 css3参考手册
HTML5+CSS3入门基础知识
12-29
HTML5+CSS3入门基础知识
CCS+CSS3入门
09-26
CSS设计指南（第3版）(CSS入门)+图解CSS3核心技术与案例实战(CSS3入门)
CSS3入门课堂随堂笔记.zip
01-23
CSS3入门课堂笔记，希望对大家有所帮助，有所收获！！
html5和css3入门到精通
04-10
CSS3部分主要介绍了CSS3概述，CSS选择器，文本、字体与颜色，背景和边框，2D变形，设计动画，网页布局、用户界面以及CSS3的其他新特性。 内容涵盖了HTML5+CSS3的所有重要特性，通过大量实际案例对HTML5+CSS3的重要...
CSS3入门与基础
04-09
CSS3入门与基础
css3 3d 轮播
最新发布
10-23
CSS3 3D 轮播是一种通过 CSS3 技术实现的网页轮播效果，与传统的2D轮播相比，它可以在网页中创建出更加生动和具有立体感的轮播效果。 CSS3 3D 轮播原理是利用 CSS3 的 transform 属性，通过给定元素的旋转和平移等变换参数，使其在3D空间中移动。通常情况下，我们可以通过 CSS3 的 translateZ() 函数来设置元素在z轴方向上的平移，从而使元素在3D空间中产生纵深的效果。 实现CSS3 3D 轮播，首先需要创建一个容器元素，然后将需要轮播的内容放置其中，通过 CSS3 3D 变换属性设置元素的初始位置和动画效果。可以利用 CSS3 的 transform 属性中的 rotateX(), rotateY() 和 translateZ() 函数来设置元素的旋转和平移效果，通过设置 transition 属性来产生动画效果，达到轮播的效果。 此外，还可以结合 JavaScript 来实现一些进阶功能，例如自动播放、手动控制等。通过 JavaScript，我们可以控制轮播容器的 transform 属性，以及监听用户的操作，实现自动轮播和手动控制。 总而言之，CSS3 3D 轮播是利用 CSS3 技术，通过设置元素的 3D 变换属性，以及动画效果实现的一种网页轮播效果，可以为网站带来更加生动和立体的展示效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

知识汲取者

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值