一文带你掌握 CSS3 必会知识点

最新推荐文章于 2024-01-20 22:42:41 发布

苍猫不是猫

最新推荐文章于 2024-01-20 22:42:41 发布

阅读量505

点赞数 3

分类专栏：前端文章标签： css3 css html

本文链接：https://blog.csdn.net/wild_onlyking/article/details/106249483

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

子曰：温故而知新，可以为师矣。《论语》-- 孔子

一、新增基本选择器

1. 子元素选择器

子元素选择器只能选择某元素的子元素。
语法格式：父元素 > 子元素。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子元素选择器</title>
<style type="text/css">
section > div {
	color: #f00;
}
</style>
</head>
<body>
<section>
	<article><div>article里面的文字</div></article>
	<div>article外面的文字</div>
</section>
</body>
</html>

2. 群组选择器

群组选择器是将具有相同样式的元素分组在一起，每个选择器之间使用逗号隔开。
语法格式：元素1，元素2，… 元素n。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>群组选择器</title>
<style type="text/css">
section > article,
section > aside,
section > div {
	color: #f00;
	margin-top: 10px;
	background: #abcdef;
}
</style>
</head>
<body>
<section>
	<article>article</article>
	<aside>aside</aside>
	<div>div</div>
</section>
</body>
</html>

3. 属性选择器

对带有 指定属性 的HTML 元素设置样式。
使用 CSS3 属性玄子琪，你可以只指定元素的某个属性，或者你还可以同时指定元素的某个属性和其对应的属性值。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Attribute</title>
<style type="text/css">

a[href] {text-decoration: none;}

/*
Element[attribute = "value"]   选择所有使用attribute="value"的元素
Element[attribute ~= "value"]  选择attribute属性包含单词'value'的元素
Element[attribute ^= "value"]  选择attribute属性值以'value'开头的所有元素
Element[attribute $= "value"]  选择attribute属性值以'value'结尾的所有元素
Element[attribute *= "value"]  选择attribute属性值包含'value'的所有元素
Element[attribute *= "value"]  选择attribute属性值以'value'或以'value-'开头的元素
*/

a[href="#"] {color: #f00}
a[class~="two"] {color: #ff0;}
a[href^="#"] {color: #0f0;}
a[href$="#"] {color: #00f;}
a[href*="#"] {color: #0ff;}
a[href|="#"] {color: #f0f;}
</style>
</head>
<body>
<a href="attribute.html">attribute</a>
<a href="#">attribute</a>
<a class="one two" href="#">attribute</a>
<a class="two three" href="#">attribute</a>
<a href="#1">attribute</a>
<a href="#2">attribute</a>
<a href="#3">attribute</a>
<a href="#4">attribute</a>
<a href="1#">attribute</a>
<a href="2#">attribute</a>
<a href="3#">attribute</a>
<a href="4#">attribute</a>
<a href="1#1">attribute</a>
<a href="2#2">attribute</a>
<a href="3#3">attribute</a>
<a href="4#4">attribute</a>
<a href="#-1">attribute</a>
<a href="#-2">attribute</a>
<a href="#-3">attribute</a>
<a href="#-4">attribute</a>
</body>
</html>

4. 相邻兄弟元素选择器

相邻兄弟选择器可以选择 紧接在另一元素后的元素，而且他们具有一个相同的父元素。
语法格式：元素 + 兄弟相邻元素。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相邻兄弟元素选择器</title>
<style type="text/css">
section > div + article {
	color: #f00;
}
</style>
</head>
<body>
<section>
	<div>article外面的文字</div>
	<article><div>article里面的文字</div></article>
	<article><div>article里面的文字</div></article>
</section>
</body>
</html>

5. 通用兄弟元素选择器

选择某元素 后面 的 所有 兄弟元素，而且他们具有一个相同的父元素。
语法格式：元素 ~ 后面所有兄弟相邻元素。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通用兄弟选择器</title>
<style type="text/css">
section > div ~ article {
	color: #f00;
}
</style>
</head>
<body>
<section>
	<article><div>article里面的文字</div></article>
	<div>article外面的文字</div>
	<article><div>article里面的文字</div></article>
	<article><div>article里面的文字</div></article>
	<article><div>article里面的文字</div></article>
	<article><div>article里面的文字</div></article>
	<article><div>article里面的文字</div></article>
</section>
</body>
</html>

二、伪类选择器

1. 动态伪类

这些伪类并不存在与 HTML 中，只有当用户和网站交互的时候才能体现出来。
锚点伪类： :link :visited
用户行为伪类：:hover :active :focus

2. UI元素状态伪类

我们把 “:enabled”、":disabled"、":checked" 伪类称为UI元素状态伪类。

3. CSS3结构类

我们把 CSS3 的 :nth 选择器也称为 CSS3 的结构类。

写法	说明
Element:first-child	选择属于其父元素的 `首个子元素` 的 `每个Element 元素`。
Element:last-child	选择属于其父元素的 `最后一个子元素` 的 `Element` 元素。
Element:nth-child(N)	选择器匹配属于其父元素的第 N 个子元素，`不论` 元素的类型。其中 n 是一个简单表达式，取值从 0 开始计算。n 取值为 odd 时，匹配下标是奇数，n 取值为 even 时，匹配下标是偶数。
Element:nth-last-child(N)	匹配属于其元素的第 N 个子元素的 `每个元素`，无论元素类型，从 `最后一个子元素` 开始计数。
Element:nth-of-type(N)	匹配舒服父元素的 `特定类型` 的第 N 个子元素的每个元素。
Element:nth-last-of-type(N)	匹配属于父元素的 `特定类型` 的第 N 个子元素的每个元素，从 `最后一个子元素` 开计数。
Element:first-of-type	匹配属于其父元素的特定类型的 `首个子元素` 的每个元素。
Element:last-of-type	匹配属于其父元素的特定类型的 `最后一个子元素` 的每个元素。
Element:only-child	选择器匹配属于其父元素的 `唯一` 子元素的每个元素。
Element:only-of-type	选择器匹配属于其父元素的 `特定类型` 的 `唯一` 子元素的每个元素。
Element:empty	选择匹配 `没有` 子元素的每个元素。
:not(Element/seletor)	匹配非指定 `元素/选择器` 的每个元素。

三、伪元素

1. Element::first-line

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First-Line</title>
<style type="text/css">
div {width: 500px;margin: 0 auto;}
/*对第一行文本起作用，只能作用于块元素*/
div::first-line {color: #f00;font-weight: bold;}
</style>
</head>
<body>
<div>大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！</div>
</body>
</html>

2. Element::first-letter

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First-Letter</title>
<style type="text/css">
div {width: 500px;margin: 0 auto;font-size: 12px;}
/*用于向文本的首字母设置特殊样式*/
div::first-letter {color: #f00;font-size: 24px;font-weight: bold;}
</style>
</head>
<body>
<div>大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！大家好，欢迎来到谷歌！</div>
</body>
</html>

3. Element::before 和 Element::after

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>after</title>
<style type="text/css">
div {
	width: 300px;
	height: 100px;
	border: 1px solid #000;
}
/*在元素内容前面插入新的内容*/
div::before {
    content: "我在内容的前面";
}
/*在元素后面插入新的内容*/
div::after {
	content: "我在内容的后面";
}
</style>
</head>
<body>
<div>&nbsp;伪元素&nbsp;</div>
</body>
</html>

四、CSS3 圆角

border-radius：一个最多可指定四个 border-*-radius 属性的符合属性，这个属性允许你为元素添加圆角边框。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>border</title>
   <style>
       div{
           width: 800px;
           height: 300px;
           border: 5px solid red;
           margin: 0 auto;
           border-radius: 50%;
       }
   </style>
</head>
<body>
<div></div>
</body>
</html>

五、CSS3 盒阴影

box-shadow ：可以设置一个或多个下拉阴影的框。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BoxShadow</title>
<style type="text/css">
div {
	width: 800px;
	height: 300px;
	background: red;
	margin: 0 auto;
    /*
       50px:  水平阴影的位置。允许负值。
       30px:  垂直阴影的位置。允许负值。
       10px :  模糊距离。
       10px :  阴影的尺寸。
       inset: 将外部阴影 (outset) 改为内部阴影。
    */
	box-shadow: 50px 30px 10px 10px yellow inset;
}
</style>
</head>
<body>
<div>欢迎来到谷歌！</div>
</body>
</html>

六、CSS3 背景

<style type="text/css">
 /*background: color position size repeat origin clip attachment image;
   color:颜色
   position:位置
   size:大小
   repeat：是否重复显示
   origin：规定 background-position 属性相对于什么位置来定位。
   clip:规定背景的绘制区域。
   attachment:如何设置固定的背景图像
   image:背景图像
*/
 background: #abcdef url('./img/bg1.jpg') no-repeat center center;
            background-size: 50%;
            background-origin: content-box;
            background-clip: content-box;
            background-attachment: fixed;
</style>

七、CSS3 渐变

渐变（gradients）可以在两个或多个指定的颜色之间显示平稳的过渡。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>渐变</title>
<style type="text/css">
div {
    /*从上到下（默认情况）*/
    background: linear-gradient(red, blue);
    /*从左到右*/
	background: linear-gradient(to right, red , blue);
    /*对角*/
    background: linear-gradient(to right bottom, red, yellow, blue);
    /*使用角度
    角度是指水平线和渐变线之间的角度，逆时针方向计算。
    0deg将创建一个从下到上的渐变，90deg将创建一个从左到右的渐变。
    */
    background: linear-gradient(135deg, red, yellow, blue);
    /*颜色结点分布*/
    background: linear-gradient(90deg, red 10%, orange 15%, yellow 20%, green 50%, blue 70%, indigo 80%, violet 100%);
    /*径向渐变：从起始点到终点颜色从内到外进行圆形渐变（从中间想外拉）
    */
    background: radial-gradient(red 50%, blue 70%);
    /*径向渐变 设置形状（默认椭圆 ellipse）*/
    background: radial-gradient(circle, red, blue);
    /*径向渐变 重复渐变*/
    background: repeating-radial-gradient(red 0%, blue 10%, red 20% );
}
</style>
</head>
<body>
<div></div>
</body>
</html>

八、CSS3 文本效果

1. 文本阴影

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text-shadow</title>
<style type="text/css">
h1 {
    /* 水平偏移 竖直偏移 模糊距离（至少为0） 颜色*/
	text-shadow: 5px 5px 5px red;
}
</style>
</head>
<body>
<h1>text-shadow</h1>
</body>
</html>

2. 文本换行

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--自动处理换行-->
<title>word-break</title>
<style type="text/css">
h1 { width: 800px; margin: 10px auto; background: #abcdef; }
h1:nth-child(1) { word-break: normal; }
h1:nth-child(2) { word-break: break-all; }
h1:nth-child(3) { word-break: keep-all; }
h1:nth-child(4) { word-break: normal; }
h1:nth-child(5) { word-break: break-all; }
h1:nth-child(6) { word-break: keep-all; }
h1 > span { color: red; }
</style>
</head>
<body>
<h1><span>word-break: normal;</span><br>Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life.</h1>
<h1><span>word-break: break-all;</span><br>Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life.</h1>
<h1><span>word-break: keep-all;</span><br>Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life.</h1>
<h1><span>word-break: normal;</span><br>将梦想悬挂于枝头，在夏季的丰盛中饱满，绽放；为梦想披星戴月，刷新生命的温度。那些因梦想蜕变了的灵魂，历经时光坎坷，痛苦挣扎，依然在枝头放歌，温暖了生命如花的影子。前世，储蓄梦想；今生，演绎铿锵。</h1>
<h1><span>word-break: break-all;</span><br>将梦想悬挂于枝头，在夏季的丰盛中饱满，绽放；为梦想披星戴月，刷新生命的温度。那些因梦想蜕变了的灵魂，历经时光坎坷，痛苦挣扎，依然在枝头放歌，温暖了生命如花的影子。前世，储蓄梦想；今生，演绎铿锵。</h1>
<h1><span>word-break: keep-all;</span><br>将梦想悬挂于枝头，在夏季的丰盛中饱满，绽放；为梦想披星戴月，刷新生命的温度。那些因梦想蜕变了的灵魂，历经时光坎坷，痛苦挣扎，依然在枝头放歌，温暖了生命如花的影子。前世，储蓄梦想；今生，演绎铿锵。</h1>
</body>
</html>

3. 单词或URL换行

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--   允许长单词或url地址换行到下一行-->
<title>word-wrap</title>
<style type="text/css">
h1 { width: 800px; margin: 10px auto; background: #abcdef; }
h1:nth-child(1) { word-wrap: normal; }
h1:nth-child(2) { word-wrap: break-word; }
h1:nth-child(3) { word-wrap: normal; }
h1:nth-child(4) { word-wrap: break-word; }
h1 > span { color: red; }
</style>
</head>
<body>
<h1><span>word-wrap: normal;</span><br>bababadalgharaghtakamminarronnkonnbronntonnerronntuonnthunntrovarrhounawnskawntoohoohoordenenthurnuk</h1>
<h1><span>word-wrap: break-word;</span><br>bababadalgharaghtakamminarronnkonnbronntonnerronntuonnthunntrovarrhounawnskawntoohoohoordenenthurnuk</h1>
<h1><span>word-wrap: normal;</span><br>这个字是由100个字母组成的。就出现在爱尔兰作家乔埃斯(James Joyce 1882-1942)作品《芬尼根守灵夜》(Finnegans Wake)的扉页，象征代表亚当和夏娃。（http://www.bababadalgharaghtakamminarronnkonnbronntonnerronntuonnthunntrovarrhounawnskawntoohoohoordenenthurnuk.com）</h1>
<h1><span>word-wrap: break-word;</span><br>这个字是由100个字母组成的。就出现在爱尔兰作家乔埃斯(James Joyce 1882-1942)作品《芬尼根守灵夜》(Finnegans Wake)的扉页，象征代表亚当和夏娃。（http://www.bababadalgharaghtakamminarronnkonnbronntonnerronntuonnthunntrovarrhounawnskawntoohoohoordenenthurnuk.com）</h1>
</body>
</html>

4. 文本最后一行如何对齐

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text-align-last</title>
<style type="text/css">
h1 { width: 700px; margin: 10px auto; background: #abcdef;
	/*text-align: justify;*/
}
h1:nth-child(1) { text-align-last: auto; }
h1:nth-child(2) { text-align-last: left; }
h1:nth-child(3) { text-align-last: right; }
h1:nth-child(4) { text-align-last: center; }
h1:nth-child(5) { text-align-last: justify; }
h1:nth-child(6) { text-align-last: start; }
h1:nth-child(7) { text-align-last: end; }
h1:nth-child(8) { text-align-last: initial; }
h1:nth-child(9) { text-align-last: inherit; }
h1 > span { color: red; }
</style>
</head>
<body>
<h1><span>text-align-last: auto;</span><br>将梦想悬挂于枝头，在夏季的丰盛中饱满，绽放；为梦想披星戴月，刷新生命的温度。<br>那些因梦想蜕变了的灵魂，历经时光坎坷，痛苦挣扎，依然在枝头放歌，温暖了生命如花的影子。<br>前世，储蓄梦想；今生，演绎铿锵。</h1>
<h1><span>text-align-last: left;</span><br>将梦想悬挂于枝头，在夏季的丰盛中饱满，绽放；为梦想披星戴月，刷新生命的温度。<br>那些因梦想蜕变了的灵魂，历经时光坎坷，痛苦挣扎，依然在枝头放歌，温暖了生命如花的影子。<br>前世，储蓄梦想；今生，演绎铿锵。</h1>
<h1><span>text-align-last: right;</span><br>将梦想悬挂于枝头，在夏季的丰盛中饱满，绽放；为梦想披星戴月，刷新生命的温度。<br>那些因梦想蜕变了的灵魂，历经时光坎坷，痛苦挣扎，依然在枝头放歌，温暖了生命如花的影子。<br>前世，储蓄梦想；今生，演绎铿锵。</h1>
<h1><span>text-align-last: center;</span><br>将梦想悬挂于枝头，在夏季的丰盛中饱满，绽放；为梦想披星戴月，刷新生命的温度。<br>那些因梦想蜕变了的灵魂，历经时光坎坷，痛苦挣扎，依然在枝头放歌，温暖了生命如花的影子。<br>前世，储蓄梦想；今生，演绎铿锵。</h1>
<h1><span>text-align-last: justify;</span><br>将梦想悬挂于枝头，在夏季的丰盛中饱满，绽放；为梦想披星戴月，刷新生命的温度。<br>那些因梦想蜕变了的灵魂，历经时光坎坷，痛苦挣扎，依然在枝头放歌，温暖了生命如花的影子。<br>前世，储蓄梦想；今生，演绎铿锵。</h1>
<h1><span>text-align-last: start;</span><br>将梦想悬挂于枝头，在夏季的丰盛中饱满，绽放；为梦想披星戴月，刷新生命的温度。<br>那些因梦想蜕变了的灵魂，历经时光坎坷，痛苦挣扎，依然在枝头放歌，温暖了生命如花的影子。<br>前世，储蓄梦想；今生，演绎铿锵。</h1>
<h1><span>text-align-last: end;</span><br>将梦想悬挂于枝头，在夏季的丰盛中饱满，绽放；为梦想披星戴月，刷新生命的温度。<br>那些因梦想蜕变了的灵魂，历经时光坎坷，痛苦挣扎，依然在枝头放歌，温暖了生命如花的影子。<br>前世，储蓄梦想；今生，演绎铿锵。</h1>
<h1><span>text-align-last: initial;</span><br>将梦想悬挂于枝头，在夏季的丰盛中饱满，绽放；为梦想披星戴月，刷新生命的温度。<br>那些因梦想蜕变了的灵魂，历经时光坎坷，痛苦挣扎，依然在枝头放歌，温暖了生命如花的影子。<br>前世，储蓄梦想；今生，演绎铿锵。</h1>
<h1><span>text-align-last: inherit;</span><br>将梦想悬挂于枝头，在夏季的丰盛中饱满，绽放；为梦想披星戴月，刷新生命的温度。<br>那些因梦想蜕变了的灵魂，历经时光坎坷，痛苦挣扎，依然在枝头放歌，温暖了生命如花的影子。<br>前世，储蓄梦想；今生，演绎铿锵。</h1>
</body>
</html>

4. 规定当文本溢出包含元素时发生的事情

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text-overflow</title>
<style type="text/css">
h1 { width: 700px; margin: 10px auto; background: #abcdef; overflow: hidden; }
h1:nth-child(1) { text-overflow: clip; }
h1:nth-child(2) { text-overflow: ellipsis; }
h1:nth-child(3) { text-overflow: '>>'; }
h1 > span { color: red; }
</style>
</head>
<body>
<h1><span>text-overflow: clip;</span><br>bababadalgharaghtakamminarronnkonnbronntonnerronntuonnthunntrovarrhounawnskawntoohoohoordenenthurnuk</h1>
<h1><span>text-overflow: ellipsis;</span><br>bababadalgharaghtakamminarronnkonnbronntonnerronntuonnthunntrovarrhounawnskawntoohoohoordenenthurnuk</h1>
<h1><span>text-overflow: '>>';</span><br>bababadalgharaghtakamminarronnkonnbronntonnerronntuonnthunntrovarrhounawnskawntoohoohoordenenthurnuk</h1>
</body>
</html>

九、CSS3 转换

让元素在一个坐标系中变形。这个属性包含一系列变形函数，可以移动，旋转，和缩放元素。
在这里插入图片描述

<style type="text/css">

/*水平方向沿X轴正方向平移100px*/
div > img {transform: translateX(100px);}
/*竖直方向沿Y轴正方向平移100px*/
div > img {transform: translateY(200px);}
/*水平200px，竖直100px*/
div > img {transform: translate(200px, 100px);}
/*z轴上平移200px*/
div > img {transform: translateZ(200px);}
/*3D平移*/
div > img {transform: translate3d(200px, 200px, 200px);}


/*水平方向缩小0.5*/
div > img {transform: scaleX(.5);}
/*竖直方向缩小0.5*/
div > img {transform: scaleY(.5);}
/*横向缩小50%，纵向缩小50%*/
div > img {transform: scale(.5, .5);}
/*z轴缩小50%*/
div > img {transform: scaleZ(.5);}
/*3D缩小*/
div > img {transform: scale3d(.5, .5, .5);}


/*斜切15度，x方向逆时针*/
div > img {transform: skewX(15deg);}
/*斜切15度，y方向逆时针*/
div > img {transform: skewY(15deg);}
/*斜切15度，x，y方向逆时针*/
div > img {transform: skew(15deg, 15deg);}


/* 在x轴上旋转45度*/
div > img {ransform: rotateX(45deg);}
/* 在y轴上旋转45度*/
div > img {transform: rotateY(45deg);}
/* 在z轴上旋转45度*/
div > img {transform: rotateZ(45deg);}
div > img {
    /*
    前三个值：0：不做改变，1:改变
    如果三个方向都改变，数值可以在0.01 到 1 之间改变
    */
	transform: rotate3d(1, 1, 1, 45deg);
}
/*改变旋转基点*/
div > img {
	transform: rotate3d(1, 1, 1, 45deg);
	transform-origin: left top 0;
}
</style>

十、CSS3 过渡（Transition）

允许 css 的属性值在一定的时间区间内平滑地过渡。
在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变 css 的属性值。

1. 所有属性

属性	说明
transition-property	检索或设置对象中的参与过渡的属性
transition-duration	检索或设置对象过渡的时间
transition-timing-function	检索或设置对象中过渡的动画类型
transition-delay	检索或设置对象延迟过渡的时间

2. transition-property 属性值

属性值	说明
transition-property:none	没有属性改变
transition-property:all	所有属性改变（默认值）
transition-property:property	元素属性名

3. transition-timing-function 属性值

属性值	说明
transition-timing-function:linear	线性过渡。
transition-timing-function:ease	平滑过渡
transition-timing-function:ease-in	由慢到快
transition-timing-function:ease-out	由快到慢
transition-timing-function:ease-in-out	由慢到快在到慢

<style type="text/css">
div:hover { cursor: pointer; transform: rotate(180deg);
    -webkit-transition: transform 2s ease-in-out 1s;
       -moz-transition: transform 2s ease-in-out 1s;
        -ms-transition: transform 2s ease-in-out 1s;
         -o-transition: transform 2s ease-in-out 1s;
            transition: transform 2s ease-in-out 1s;
}
</style>

十一、CSS3 动画（Animation）

使元素从一种样式逐渐变化为另一种样式的效果。

使用 @keyframes 创建动画

<style type="text/css">
@keyframes myfirst
{
 from   { transform: rotateX(0deg);   }
 25%    { transform: rotateX(45deg);  }
 75%    { transform: rotateX(315deg); }
 to     { transform: rotateX(360deg); }
}

@-moz-keyframes myfirst /* Firefox */
{
 from   { transform: rotateX(0deg);   }
 25%    { transform: rotateX(45deg);  }
 75%    { transform: rotateX(315deg); }
 to     { transform: rotateX(360deg); }
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
 from   { transform: rotateX(0deg);   }
 25%    { transform: rotateX(45deg);  }
 75%    { transform: rotateX(315deg); }
 to     { transform: rotateX(360deg); }
}

@-o-keyframes myfirst /* Opera */
{
 from   { transform: rotateX(0deg);   }
 25%    { transform: rotateX(45deg);  }
 75%    { transform: rotateX(315deg); }
 to     { transform: rotateX(360deg); }
}
</style>

将创建的动画绑定到某个选择器上：

<style type="text/css">
div{
animation: myfirst 5s;
-moz-animation: myfirst 5s;	/* Firefox */
-webkit-animation: myfirst 5s;	/* Safari 和 Chrome */
-o-animation: myfirst 5s;	/* Opera */
}
</style>

动画全部属性
在这里插入图片描述
动画每个属性对应值的说明

属性值	说明
animation-iteration-count:1	默认值一次，循环一次
animation-iteration-count:infinite	无限次循环

属性值	说明
animation-direction: normal	正常方向
animation-direction:reverse	反方向
animation-direction: alternate	动画先正常运行再反方向运行，并持续交替
animation-direction: alternate-reverse	动画先反运行再正方向运行，并持续交替

属性值	说明
animation-fill-mode:none	默认值。不设置对象动画之外的状态
animation-fill-mode:forwards	设置对象状态为动画结束时状态
animation-fill-mode:backwards	设置对象状态为动画开始时状态
animation-fill-mode:both	设置对象状态为动画开始或结束时状态

属性值	说明
animation-play-state:paused	指定暂停动画
animation-play-state:running	默认值，指定正在运行的动画

动画属性简写

<style type="text/css">

div > .inner { background-image: url(images/circle_inner.png);
    -webkit-animation: circle_inner linear 10s infinite;
            animation: circle_inner linear 10s infinite;
}

@keyframes circle_inner {
    from { transform: rotateX(0deg);   }
    to   { transform: rotateX(360deg); }
}
</style>

写在文末

纸上得来终觉浅，绝知此事要躬行。《冬夜读书示子聿》-- 陆游

好了，关于 CSS3 必会知识就说到这，各位看官食用愉快。

码字不易，如果本篇文章对您哪怕有一点点帮助，请不要吝啬您的点赞，我将持续带来更多优质文章。

苍猫不是猫

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
一文带你掌握 CSS3 必会知识点

子曰：温故而知新，可以为师矣。《论语》-- 孔子一、新增基本选择器1. 子元素选择器子元素选择器只能选择某元素的子元素。语法格式：父元素 > 子元素。<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>子元素选择器</title><style type="text/css">section > d.
复制链接

扫一扫