子曰:温故而知新,可以为师矣。 《论语》-- 孔子
一、新增基本选择器
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> 伪元素 </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
必会知识就说到这,各位看官食用愉快。