伪类
:hover :focus :foucswithin
我们给任何选择器加上冒号就叫做我们的伪类,这种伪类的存在的意义是什么?
他会凭空去多出来元素或者选择其他的元素?其实是不会.
.box{
width: 100px;
height:100px;
background-color: black;
}
.box:hover{
background-color: green;
/*打开控制台,页面的结构不会发生改变,元素也不会发生增加或者减少.*/
}
<div class="box"></div>
**伪类核心 **
页面中的元素,状态发生改变,会有不同的样式
状态发生改变:初始状态 ==> 结束状态
状态时是什么?
比如这个Hover要么我鼠标处于悬浮状态,要么我鼠标没有处于悬浮状态.
与之对应我们还有样式还有初始样式 ===> 结束样式
当我们悬浮到这个盒子的时候背景颜色由黑色变为了红色.
伪类选择器是以冒号开始的选择器,描述元素当前所处的状态,这时候想个问题;
如果我们把冒号以及后面的hover删除后会出现什么?
然后盒子的的颜色就变成了绿色,不管加没加上hover,都是对盒子的样式进行描述
所以简单说.
当我们不写伪类选择器之后,他会变成普通的选择器.现在我们重新去写.
.box{
width: 100px;
height:100px;
}
/*现在我有一个需求,当我鼠标放在ul上面时我想要让li元素变成绿色*/
.box .list li:hover{
color:green;
}
/*把:hover去掉,可以看出这个本质上还是对li设置样式,
还是是对li设置样式,加上了hover之后也是对这个li设置样式.
所以说去掉伪类选择器它会变成一个普通的选择器,选中的元素和之前的是一样的.*/
<div class="box">
<ul class="list">
<li>111</li>
<li>222</li>
</ul>
</div>
.box .list li:hover;
.box .list:hover li;
这两个选择器是不是相同的选择器,选中的元素相不相同?选中的元素是相同.
但因为我们选中的条件不一样,最后呈现的效果也会不一样.
第一个选择器做了什么?
第一个首先选中类名为box下面的.list,.list下面的li.
当我鼠标放在这个li标签的时候我们将这个li里面的字体颜色变为绿色.
换而言之也就是这个样式我们是针对li这个元素去设置的.当鼠标放在自己的li上面才会变成绿色.
第二个选择器是当鼠标放在.list也就是ul的时候,这个条件就触发了.
只是我们是对里面的li进行样式设置.
ul是一个大盒子,只要我们鼠标进入这个大盒子,里面的所有lii的字都会变成绿色;*/
理解方式:学会翻译,下意识从左往右读
<div class="box">
<ul class="list">
<li class="item">
<a href="">我是a</a>
<p>p1</p>
<p>p2</p>
</li>
</ul>
</div>
.box > list > li.item > a:hover + p + p{
color: green;/*此时当我们鼠标放在a标签,p2变成了绿色*/
}
li.item是什么意思?
li是不是一个选择器,它叫标签选择器, .item他是一个类名选择器,
标签和类名都是选择器,这两个中间没有空格,所以他们是一个并列条件.
这里只有一个元素,标签名是li类名是item,所以我们简写成li.item,这个精确了我们选择的范围
介绍常见的的伪类选择器(介绍元素/标签的状态)
- :link 链接未被访问时
/*没有访问过的a标签的样式*/
a:link{
color: orange;
}
- :visited: 被访问过的,当我们a标签被访问过了之后,他会触发伪类选择器
a:visited{
color: green;
}
- :focus 当链接和Input被使用tab键选中或激活时
a:focus{
background-color: skyblue;
}
- :active 元素被激活时
a:active{
color: green;/*鼠标按下去未抬起就是激活状态*/
}
- :active适用于很多标签 除了a标签,input,div标签同样适用
div:active{
background-color: red;
}
<div>1111</div>
我们甚至可以做一些很神奇的操作
div{
width: 100px;
height: 100px;
background-image: url(1.jpg);
transition: .3s;
}
div:active{
width:500px;
height:500px;
background-color: red;/*会影响布局,加一些数字可以看到*/
}
<div></div>
- checked 被勾选的状态(适用于input type=“checkbox/radio” )
.checkbox:checked{
width: 100px;
height:100px;
}
<input type="checkbox" class="checkbox">
/*这个和刚才的active有什么区别?
active需要你鼠标不停的按住,鼠标按下去才能出现效果,鼠标抬起来就没有效果了.
然而这个input你只要点击一次就有效果了,这就是一个非常强大的进步.*/
.checkbox:checked +.box{
width:700px;
height:400px;
background-color:skyblue;
}
<input type="checkbox" class="checkbox">
<div class="box"></div>
/*点击图片放大和缩小*/
.box{
width: 100px;
height: 100px;
background-image: url(1.jpg);
transition: 0.5s;
}
.checkbox{
position: absolute;
margin: 0;
width:100px;
height:100px;
opacity: 0;
}
.checkbox:checked~.box{
width: 500px;
height: 500px;/*按下checkbox*/
}
.checkbox:checked{
width: 500px;
height: 500px;
}
<input type="checkbox" class="checkbox">
<div class="box"></div>
checkbox状态开启和状态关闭(单个区块)
radio(多个区域,选中一个,别的就不选中)
这里就可以去完成一个有意思效果
有三块区域正常颜色都为天蓝色,我点击哪一块就变成粉色,点击另一块其他块恢复天蓝色,这块又变成粉色.
<ul class="list">
<li>
<input type="radio" name="box">
<div class="box"></div>
</li>
<li>
<input type="radio" name="box">
<div class="box"></div>
</li>
<li>
<input type="radio" name="box">
<div class="box"></div>
</li>
</ul>
ul{
list-style: none;
}
.list > li {
position: relative;
}
.list > li > input{
position: absolute;
opacity: 0;
margin: 0;
width: 100px;
height: 100px;
}
.list > li > .box {
width: 100px;
height: 100px;
background-color: skyblue;
transition: .5s;
}
.list input:checked + .box {
background-color:pink;
}
:first-line 首行文本状态，只能用于块级元素
.par{
width: 40px;
}
.par:first-line{
color: pink;
}
<p class="par">我要忘了你的样子</p>
:first-letter 首行首字，只能用于块级元素
.par:first-letter{
font-size: 40px;
}
::selection 被选中的文本的样式修改
.par::selection{
color:red;
background-color: green;
/*其实伪类选择器都是两个冒号,一个冒号就是简单写法,这个可能没兼容好,强制规定*/
}
- :not(select)反选
ul>li:not(:first-child){
color: red;/*除了第一个其他全部变为红色*/
}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
div:not(.box){
color: skyblue;
}
<div class="box">1</div>
<div>2</div>
<div>3</div>
结构性伪类选择器
选择器可以选择特定(类名)的元素,结构性伪类选择器可以通过序号来进行选择.
- nth-child 根据序号进行选择 优先按照序号选中元素,再判断类型(优先序号)
.list>li:nth-child(1){
color: red;
/*nth是第n个的意思，child是儿子的意思
根据序号进行选择.
这里表示选中ul下面的li. 第一个子元素且为li的元素
这里可以写2n表现2的倍数会被选择,3n表示3的倍数,这里写n+1表示的是所有元素,没有倍数默认从0开始把 所有元素选中*/
}
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
咋们来看看另外一种情况
li:nth-child(2){
color: purple;
}
/*2和5都变成了紫色,因为在我们没有规定父元素的情况下，页面中所有的li元素都会选中.
因此这里我们不但选中了ul下排在第二个并且是li的元素.
同时也选中了div下排在第二个并且是li的子元素.*/
/*如果要解决这种情况，得限制下li的选择范围*/
ul > li:nth-child(2){
color: purple;/*这时只有2变为了紫色*/
}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div>
<li>4</li>
<li>5</li>
<li>6</li>
</div>
**第一种写法：an+b / an-b **
例如:2n+1 n会从0开始每次加1，因此2n+1的结果是：n为0时，2n+1=0*2+1=1；n为1时，2n+1=3
第二种写法: an 例如: 2n 选中所有满足2的倍数的子元素
第三种写法：Odd(符合条件的奇数子元素) / even选中所有满足条件的偶数子元素
- **nth-of-type 根据序号进行选择 **
- 忽略其他类型的标签,只看目标标签,直接给第几个染色.
- 优先类型
- 看起来和nth-child一样,一样的数字选中也行,但是还是有所区别的
nth-of-type精准识别，什么叫精准识别呢？我们来看一下：
<ul>
<li>1</li>
<p>1.1</p>
<li>2</li>
<li>3</li>
</ul>
<div>
<li>4</li>
<p>1.1</p>
<li>5</li>
<li>6</li>
</div>
<style>
li:nth-of-type(2){
color: orange;/*2和5都变为了橘色*/
}
ul > li:nth-of-type(2){
color: orange;
/*2变为橘色，它能找到所有子元素里的li，并且找到第二个li，不管它前面有没有其他元素*/
}
</style>
- :nth-last-child(),:nth-last-of-type ()倒数，支持公式
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div>
<li>4</li>
<li>5</li>
<li>6</li>
</div>
li:nth-last-child(1){
color: orange;/*3和6同时变为橘色*/
}
ul > li:nth-last-child(1){
color: orange;/*3变为橘色*/
}
属性选择器
- [attr]用的中括号[],
学完JS之后你们会非常喜欢它.因为我们去访问属性都是用中括号.
之前我们给一个元素加样式的方式是通过class，id或者标签名来选中这个元素.
除此之外我们还可以使用这个属性来选中元素给它添加样式。
.box{color: pink;} /*这个叫做简写*/
li[class="box"]{
color: pink;
}/*这样依然能够去选中*/
<ul>
<li class="box">1</li>
<li>2</li>
<li>3</li>
</ul>
<div>
<li>4</li>
<li>5</li>
<li>6</li>
</div>
自由度很高,可以只通过属性名去选中
input[type="submit"]{ color: pink;}/*input元素*/
input[name]{
color: pink;/*只有有name属性的input才会被选中*/
}
<input type="submit" name="box">
<input type="submit">
<!--首先我们可以使用属性名称来选中元素-->
<style>
div[class]{/*选中所有有class的div*/
color: pink;/*1和2都变为粉色*/
}
[class]{/*选中所有有class属性的元素*/
color: pink;/*1、2、3全变为粉色*/
}
</style>
<div class="main">1</div>
<div class="container">2</div>
<p class="box">3</p>
[attr^=""]`属性值以谁开头(模糊搜索)
1. li[class="box"]{/*这样不能选中以box作为类名开头的*/
color:red;
}
2. li[class^="box"]{
color:red;
/*^表示以什么开始,这里表现以box开始,以后我们去学正则表达式就会说到*/
}
3. li[class^="b"]{
color:red;/*也能选中*/
}
<ul>
<li class="box1">1</li>
<li class="box2">2</li>
<li class="smallbox1">3</li>
<li class="smallbox2">4</li>
<li class="smallbox3">5</li>
</ul>
<li class="smallbox1 box3">3</li>
li[class^="box"]{
color:red;
}
/*能不能去选中第三个元素,这里是不能去选中的.
这里是因为属性选择器选择的时候,不能按照普通的class/id这种东西划分.
大家可以把smallbox1 box3看成是属性值 这个属性值整体是以smallbox1开头,所有没有办法去 选中box3*/
[attr~=""]属性中包含某值：
<li class="smallbox1 box3">3</li>
li[class~="box3"]{
color: orange;/*3变为橘色，因为他有box3的类名值*/
}
我们来说以什么结束, ‘ [ a t t r `[attr ‘[attr=""]`属性值以谁结尾
li[class$="1"]{
color:red;/*此时第一个元素变成了红色*/
}
比如我们写在中间呢?[attr*=""]属性值中包含某个字符
a[href*="baidu"]{
background-color: orange;
/*百度和百度网盘的颜色变为了橘色，因为只有这两个标签的href属性里有baidu*/
}
a[href*=".com"]{
color: green;/*三个a标签的字体都变为了绿色，因为他们的href属性里都有.com*/
}
<div>
<a href="https://www.baidu.com">百度</a>
<a href="https://pan.baidu.com">百度网盘</a>
<a href="https://www.google.com">谷歌</a>
</div>
伪元素
大家看到伪元素一定会想到伪类.
伪类表示元素所处的一种状态,用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的.
比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。
而伪元素表示为假的元素,难道页面还会有假的元素吗?
伪元素用于创建一些不在文档树中的元素，并为其添加样式。
虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。
如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。
伪元素和伪类的区别：
伪类的操作对象是文档树中已有的元素.
而伪元素则创建了一个文档树外的元素.使用css创建的标签
因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。
:before :after
<p class="yunmu">云牧说 你好我好大家好</p>
<p class="students">同学们说:谢谢,你也好</p>
<p class="yunmu">云牧:天气不错</p>
<p class="students">:同学们说:天气不错</p>
/*所有的p标签主语都需要写出来,每一次写一个p标签手动添加主语还是挺麻烦.
那我这个`云牧说`这个字想要变一下颜色或者调大一点,可能我们还要单独写一个span把`云牧说` 包裹.
这里如果我们要加上一些导语和引语的时候,需要专门添加span.
其实重要的部分是云牧说后面的内容,前面只是一个解释说明是谁说的.
我们现在就给大家抛出一个问题,有没有更好的办法解决写元素部分公共的部分*/
什么是伪元素,
由CSS生成的元素就是伪元素
.yunmu::before{
content: "云牧说:"
}
/*页面此时也有云牧说这个字,但是在html结构中有没有云牧说这个字.
也就是云牧说这个字不是由html生成而是由css生成的*/
:before伪元素的特性
在选中元素正文内容之前插入一段文本
打开控制台,这个伪元素是一个什么类型的元素,他是一个行内元素看computed,
其实这里其实不止插入一段文本,而是在选中元素正文内容之前插入行内元素
.yunmu::before{
content: "云牧说:";
color:pink;
background-color:green;
border:1px solid red;
/*我们甚至可以去写文字颜色,背景颜色边框等,我们可以把伪元素完全当成行内元素*/
}
.yunmu::before{
width:100px;
heigth:100px
}/*不能设置宽高*/
before写完了我们来聊另一个需求.
我给大家剖析下我这个人,我喜欢在说话聊天结束之后添加摸摸哒.那我怎么解决这个需求
.yunmu:after{ content: "摸摸哒" }
:before和:after 最大的区别是一个在正文内容之前,一个在正文内容最后
拓展:
**它既然是一个行内元素,我们能不能把它变为一个块元素 **
可以变成块元素说明可以支持display, 不光可以支持display还可以去支持float和position.
这就相当于游览器每一个标签都默认送你了两个小盒子, 用来做css样式的拓展
页面中存在很多无意义的标签是不友好的
但是不是每个标签都存在before/after,这个盒子必须放得下内容,这个盒子必须是双标签*
单标签没有内部:就没有办法在内部创建before和after
.inner{
width: 100px;
height: 100px;
background-color: yellow;
}
.yunmu:before{
content: "云牧说"
}
.yunmu::after{
content: "摸摸哒"
}
<div class="yunmu">
<div class="inner"></div>
/*此时说明伪元素遇到块级元素,块级元素独占一行,这两行文本各自在上下两行把位置给占下来了*/
</div>
content的意义
content:是伪元素文本所在的区域
.yunmu:before{
content: "云牧说";
display:block;
width: 100px;
height: 100px;
background-color: pink
/*如果把content删掉伪元素就消失了,这里我们是不是证明我们一定要在content里面添加文本啊?
其实不是的.这里其实可以去推断content这条属性必须存在*/
}
.yunmu:before{ content=""}/*这个元素盒子依然存在*/
当不需要文本时,请写"",如果删除content样式,伪元素会消失
content:"";表示激活伪元素
我们再来看下定位position,大家肯定会想到绝对定位和相对定位,
我们但凡谈到绝对定位,我们往往会去想当前盒子所在的层级关系,我们来想想我们的伪元素的层级在哪里?
在我们选中元素之中.
A元素的伪元素在A元素的子元素的层级中.不是兄弟关系,而是父子关系
A(父) 伪元素(子)
假如我们伪元素想参照当前的盒子定位
伪元素:positon:absolute;
当前元素:position:relative;
但是我们写代码写的飘一点,我们给伪元素添加absolute,给当前元素的父级添加相对定位,这就是我们定位的知识了.
面试:如果问你伪元素和伪类的特点与区别
伪元素其实是凭空生成的一个元素,使用双冒号.
伪类:某种状态的原来的元素,使用单冒号
比如我们原来的元素鼠标悬浮上去改变样式,那我们就用伪类去表示它,只是元素处于第二状态
3d动画
3d立体空间 css3的属性,让我们非常简单的开发3d的应用
反观我们的2dtransform只是在平面上进行操作.
电脑上游览器绘制的不是真正的3d,而是游览器模拟出来的3d,是3d空间在屏幕当中的投影
我们的双眼是怎么看见立体空间的?
1.双眼,物体呈现的画面左右不同
2.大脑:近大远小(景深),绘画领域:透视法则
如果我们能够模拟这样的效果,我们就可以欺骗我们的大脑,让大脑以为这是一个真实的3D空间,最终我们可以实现3D效果
如何出现3d的盒子,
- 一个普通的盒子旋转(rotate),绕着我们的X轴或Y轴进行旋转.上面我们旋转默认是绕着Z轴旋转
规定:立体空间坐标系
提到立体空间坐标系,就是我们的三维空间,
X轴和Y轴和以前一样
但是多出来一条Z轴.
**Z轴是什么(**画个图)
由屏幕到用户眼睛的轴为Z轴
这意味在离用户远的位置(Z轴负方向)上的元素,在屏幕上看起来应该小一些.
离用户近的位置则应该大一些.
而绕着X或Y轴旋转,也会导致元素某一部分变大,其余部分变小.
.box{
width: 300px;
height: 300px;
margin: 200px auto;
background-color:skyblue;
transform:rotate(45deg);
}
/*rota默认是绕着rotateZ轴旋转的,那我们想让看到立体效果是不是得换个轴.
我们也可以让盒子绕着X轴和Y轴进行旋转,
Y轴旋转是不是有点像是我们去翻书,然后把这本书翻开,是不是绕着我们Y轴进行旋转?*/
我们将rotateZ改成rotateY
.box{transform:rotateY(45deg)}
/*这个盒子变窄变瘦了,没有一个立体效果?为什么呢?
这是因为我们虽然写了rotateY,它确实绕着Y轴去旋转,
你可以想象一下我们竖直站在书的上面的去看这本书,绕着中心轴去翻,宽度会变窄.
所以单纯一个周的变换只会导致元素变窄,体现不会任何三维旋转*/
- 所以让盒子绕着Y轴旋转,一般是看不到立体效果的,要像看到立体效果,必须要有景深(近大远小)的概念.
perspective:npx;距离盒子远处去进行观察,定义透视
恰当的距离一般是600px-1000px,1000px大概20厘米的距离就差不多.
这样的话确定用户距离这个元素有多远.
离得越近,变化越大.离得越远,变化越小.
默认是无穷远,所以不会发生明显的变化.
.box{
transform:rotateY(45deg)
perspective: 1000px;
}
/*还是看不到我们的3d效果,这是为什么?
这是因为我们现在所去观察这个盒子,你不要直勾勾去看这个盒子.
这里我们去看这个盒子的时候,游览器做了一个规定,默认情况下我们是眼睛贴着盒子去看.
所以你看盒子每一处都是一样大的,所以它不具备这样的一个立体空间的效果.
所以有句话叫做不识庐山真面目,只缘身在此山中.
当你脱离了这个平面站在一定距离就能去观察到它的全貌.
我们就需要有一个观察的位置和视角,距离盒子这个平面空间Z轴远处去观察,才能去看到立体效果*/
perspective:npx;距离盒子远处去进行观察,一般加到父级盒子上,在父级盒子中观察子盒子的立体效果
body{
perspective: 1000px;
/*此时打开开发者继续旋转,这有没有一种感觉,它好像变形了.
这里好像是我们在看立体盒子的某一个侧面,这就是我们立体盒子绕着Y轴去进行旋转,
现在中心点到一条边上是不是父级宽度的一半150px. */
}
我们要去聊一下中心点在中间,
中心点到前面一条边的距离是不是150px,假如我站在300ox的距离去观察,这样效果是不是更明显了,
这是游览器通过一些计算让我们看上去有立体的效果,我们去写200px它就离我们越来越近了,
假如我们去写150px,这张纸绕转90deg了之后像不像刚好从我们的眼前划了过去.
我们还可以写transform:rotateX
.box{transform:rotateX(45deg)}/*绕着X轴的中心点去进行旋转*/
透视原点
默认情况下,假定观察者的视线与应用透视元素相交于元素的中心.
用术语来说,这意味着"消失点"在元素的中心.
可以通过perspective-origin来修改消失点的位置.
该属性与transform-origin类似,可以接受x/y坐标值(带关键字top,left.right.bottom),百分比或者长度值.
当为元素定义 perspective-origin 属性时，其子元素会获得透视效果，而不是元素本身，它是和perspective属性一起使用的，而且只影响 3D 转换元素
<div class="wrap">
<div class="son1"></div>
<div class="son2"></div>
</div>
.wrap{
perspective:1000px ;
perspective-origin: 0 0;
width: 600px;
height: 600px;
background-color: tomato;
margin: 100px auto;
}
.son1{
width: 200px;
height: 200px;
background-color: turquoise;
transform: rotateX(40deg);
}
.son2{
width: 200px;
height: 200px;
background-color: green;
}
3d物体的制作方式
- 旋转物体 绕着X/Y轴进行旋转.
- 站在父级的空间去进行观测,并且有一定的视距perspective.
做一个立方体这么搞
一个立体体有几个面,6个面(上下左右前后)
我这六个面本质是不是都是六个正方形?
上下左右前后都是一个绝对的正方形.所以我们就用六个正方形去制作.
<div class="cube">
<div class="small">上</div>
<div class="small">下</div>
<div class="small">左</div>
<div class="small">右</div>
<div class="small">前</div>
<div class="small">后</div>
</div>
/*一个大盒子里面有六个小盒子分别代表正方体的六个面*/
接着我们来写CSS样式
首先设置最外层大盒子的样式.
.cube {
position: relative;
width: 300px;
height: 300px;
margin: 180px auto 0;
perspective: 1000px;
/*视距:设置的就是观察点（类似于眼睛）距离我们的3D元素的距离。
一般设置1000px大概就是我们眼睛到屏幕的距离*/
}
接着设置子元素的样式.
.cube .small {
position: absolute;
/*把六个相同的盒子叠在一起*/
width: 300px;
height: 300px;
/*设置六个盒子的宽高*/
box-shadow: 0 0 10px #ccc;
/*盒子模糊半径10px,颜色#ccc;*/
font-size: 50px;
text-align: center;
line-height: 300px;
/*设置文字样式更有利于观察*/
perspective: 1000px;
/*给子元素添加视距*/
}
这时候分别移动六个面的Z轴形成正方体
.cube .small:nth-child(1) {
transform: rotateX(90deg) translateZ(150px);
}
/*上面:X轴旋转90deg,此时Z轴朝上,Z轴再平移150px即可*/
.cube .small:nth-child(2) {
transform: rotateX(-90deg) translateZ(150px);
}
/*下面:X轴旋转-90deg,此时Z轴朝下,Z轴再平移150px即可*/
.cube .small:nth-child(3) {
transform: rotateY(-90deg) translateZ(150px);
}
/*左面:Y轴旋转-90deg,此时Z轴朝左,Z轴再平移150px即可*/
.cube .small:nth-child(4) {
transform: rotateY(90deg) translateZ(150px);
}
/*右面:Y轴旋转90deg,此时Z轴朝右,Z轴再平移150px即可*/
.cube .small:nth-child(5) {
transform: translateZ(150px);
}
/*前面:直接朝着Z轴我们眼睛这条轴向前平移150px即可*/
.cube .small:nth-child(6) {
transform:rotateY(180deg) translateZ(150px);
}
/*后面:Y轴旋转180deg,此时Z轴朝后,Z轴再平移150px即可*/
此时3D盒子就已经出来了我们去让它旋转吧.
.cube {animation: roll 4s linear infinite;}
/*定义了一个roll的动画,时间4s匀速无限循环*/
我们去设置动画的具体效果吧.
@keyframes roll {
0% {
transform: rotateX(0deg) rotateY(0deg);
}
100% {
transform: rotateX(360deg) rotateY(360deg);
}
}
/*定义了roll动画的关键帧*/
这时候你会发现是一个扁的平面在旋转,不是我们正方体旋转,这是因为我们没有开启大盒子的3D空间
.cube {transform-style: preserve-3d;}
/*开启父级盒子的3d属性,能容纳子盒子*/
可是这时候又发现了为什么每个面都不一样大?因为这时候我们的视距还是在大盒子之上,相当于我们站在大盒子去看,这是我们就想单独站在每个小盒子上去看.
.cube .small { perspective: 1000px; }
这时候我们一个简单旋转的3D盒子就制作完成了
/*每个步骤的分解*/
@keyframes roll{
0%{
transform: rotateX(0deg) translateZ(0px)
}
50%{
transform: rotateX(90deg) translateZ(0px)
}
100%{
transform: rotateX(90deg) translateZ(150px)
}
}
@keyframes roll2{
0%{
transform: rotateY(0deg) translateZ(0px)
}
50%{
transform: rotateY(-90deg) translateZ(0px)
}
100%{
transform: rotateY(-90deg) translateZ(150px)
}
}
@keyframes roll3{
0%{
transform:rotateY(0deg) translateZ(0px);
}
50%{
transform:rotateY(-90deg) translateZ(0px);
}
100%{
transform:rotateY(-90deg) translateZ(250px);
}
}
@keyframes roll4{
0%{
transform:rotateY(0deg) translateZ(0px);
}
50%{
transform:rotateY(90deg) translateZ(0px);
}
100%{
transform:rotateY(90deg) translateZ(250px);
}
}
@keyframes roll5{
0%{
transform:rotateY(0deg) translateZ(0px);
}
100%{
transform:rotateY(0deg) translateZ(250px);
}
}
@keyframes roll6{
0%{
transform:rotateY(0deg) translateZ(0px);
}
100%{
transform:rotateY(0deg) translateZ(-250px);
}
}
perspective视角的位置问题
<ul>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
</ul>
ul{
list-style: none;
}
ul{
width: 800px;
height: 100px;
margin: 200px auto;
/*perspective: 500px 父级盒子添加视距,我们只是站在父级盒子一个点上去观察盒子.
大剧院,百叶窗*/
}
ul li{
float: left;
width: 100px;
height: 100px;
perspective: 500px;
/*对每个观测物体都添加特定的视角,从而解决单视角的问题 多个机位*/
}
ul li div{
width: 100px;
height: 100px;
margin-right: 10px;
border: 3px solid skyblue;
transform: rotateY(60deg);
}
盒子阴影
盒阴影属性介绍
盒阴影是CSS3中专门用来修饰元素边缘的，较之CSS2.1及之前的border，outline等属性，盒阴影既不会影响网页的整体布局，也能有更多的表现形式
我们可以简单的整个网页内容进行一个分析，网页的布局就如同是把一个个的瓷砖贴在地板上，用户则是永远趴在天花板上看下面的瓷砖
盒阴影属性详解
box-shadow：xOffset水平方向偏移 yOffset垂直方向偏移 burlLehgth阴影模糊距离 spread阴影缩放 color阴影颜色 outset 阴影显示方式;
- box-shadow 属性用于向盒子添加一个或多个阴影效果。
.wrap{
width: 200px;
height: 200px;
background-color: pink;
box-shadow：0px 0px 0 0 blue;
/*盒阴影:水平方向不偏移 垂直方向不偏移 阴影模糊程度为0 阴影缩放为0 阴影颜色为蓝色 外部显示阴影*/
/*看似没有任何效果，原因其实很简单，因为此时影子的大小与元素一致，而且没有给影子设置偏移，那么以用户的从上往下看的视角来看，元素的影子全部都被元素本身给遮挡住了
而元素的xOffset属性值的作用就是把这个影子在原来的位置上设置一个偏移，当Xoffset的值为正值时，影子向右偏移，xOffset为负值时，影子向左偏移*/
}
<div class="wrap"></div>
offset-x：阴影的水平偏移量。正数向右偏移，负数向左偏移。
offset-y：阴影的垂直偏移量。正数向下偏移，负数向上偏移。
blur：阴影模糊度，指的是完全颜色到消失颜色的一个长度.不能取负数。此值的显示效果就好像是在原来的影子周围加上了一条有模糊渐变效果的边框，它能使影子看上去更大并且具有朦胧的效果，即便在元素没有偏移的时候，因为影子本身更大了，所以也能在元素的周围看到一层朦胧的蓝色光圈
spread：阴影大小。正数阴影扩大（阴影大小大于盒子大小），负数阴影缩小（阴影大小小于盒子大小），0阴影与盒子同等大小。
color:影子的颜色，此处颜色可设置渐变色、英语单词、rgb、rgba、十六进制等，作用就是改变影子的颜色;默认黑色
inset表示添加内阴影，默认为外阴影outset。但是如果给盒阴影加上inset，则影子的显示就如同在元素的边缘向内部蔓延一般，此时影子的大小会遮盖部分元素的内容
多个阴影的写法
逗号隔开
box-shadow:10px 10px 10px 10px #ffcc33,-10px -10px 10px 10px #9933ff;
/*阴影的实例*/
<div class="wrap">
<div class="gradient"></div>
</div>
.wrap {
overflow: hidden;
position: relative;
width: 300px;
height: 300px;
margin: 100px auto 0;
background-color: skyblue;
border-radius: 10px;
transition: all .6s ease;
}
.gradient {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
transform: skew(-25deg);
background-image: linear-gradient(0deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.5), hsla(0, 0%, 100%, 0));
transition: all .6s ease;
opacity: 0;
}
.wrap:hover {
transform: translateY(-6px);
box-shadow: 0 0 20px 0 lightgreen;
}
.wrap:hover .gradient {
opacity: 1;
left: 120%;
}
滤镜
.wrap{
width: 400px;
height: 400px;
background: url(1.jpg) no-repeat center/cover;
margin: 30px auto;
transition: 0.5s
}
wrap:hover{
filter:brightness(1.5);/*亮度
当倍数值大于1的时候元素会变亮，小于1的时候元素会变暗
该属性的作用为调整元素当前的亮度，一般来说可以适用于鼠标悬浮到某元素时的提醒作用*/
}
<div class="wrap"></div>
对比度 filter:contrast(百分比);默认是100%
所谓对比度，简单理解的话就是一个区域里面每个颜色都会变得格外显眼，黑的更黑，白的更白
模糊 filter：blur（模糊半径）像素
给图像设置高斯模糊。模糊半径的值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；
灰色色阶 filter：grayscale(百分比)默认是0%
该属性的作用较为简单，就是将一个颜色复杂的区域改造成一个只有黑白二色的区域。圆括号里面的值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；
褐色色阶 filter：sepia(百分比)默认是0%
该属性的作用同上，都是将某个区域的颜色进行简化，该属性会将一个颜色丰富的区域变成一种老黑白照片效果，让图片有一种轻微泛黄的样子
饱和度filter：saturate（%）；转换图像饱和度。圆括号里面的值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。 若值未设置，值默认是1。随着饱和度的增加，颜色就会更“清楚”。饱和度越小，颜色就会越“淡”；
/*实例*/
<div class="wrap">
<div class="son1"></div>
<div class="son2"></div>
<div class="son3"></div>
</div>
body{
margin: 0;
background-color: black;
}
.wrap{
position: relative;
width: 600px;
height: 600px;
background-color:#000;
margin: 20px auto;
filter: blur(20px) contrast(30);
}
.wrap>div{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100px;
height: 100px;
background-color: #fff;
border-radius: 50%;
}
.son2{
transform: translate(-200px);
}
.son3{
transform: translate(200px);
box-shadow: 400px 0 0 #fff;
animation: move 1s linear infinite alternate;
}
@keyframes move{
from{
box-shadow: 400px 0 0 #fff;
}
to{
box-shadow: -800px 0 0 #fff;
}
}
遮罩
遮住一部分,只露出一部分表现效果
css3的属性,不重要,兼容性也不好,IE浏览器不支持,webkit内核的浏览器(包括chrome、safari、IOS、android)需要添加-webkit-前缀。要特别注意的是，firefox浏览器也支持webkit-mask属性
各种游览器对我们写出来的效果不一样.各种标准更新迭代也很快,对新标准的支持程度也不一.所以我你们要写出兼容性前缀要它更好的识别.
.box{
width: 300px;
height: 300px;
background:url("1.jpg") no-repeat center/cover;
margin: 100px auto 0;
-webkit-mask-image:linear-gradient(red,blue);
}
/*此时没有任何效果,打开控制台可以看到我们代码运行已经成功了.
可是为什么没有效果呢?此时我们就要去讲,遮罩用什么遮的呢?
我们要用transparent透明去遮住图片.
遮罩mask的功能就是使用透明的图片或渐变遮罩元素的背景*/
-webkit-mask-image:linear-gradient(red,transparent);
/*这就有点相当于我们滤镜了,我们去给背景添加一个颜色*/
body{ background-color: skyblue ;}
/*图片会穿过透明层,观察到后面的内容.
我们还可以写径向渐变去实现遮罩.*/
-webkit-mask-image:radial-gradient(red,transparent)
/*我们还可以去写写百分比.*/
-webkit-mask-image:radial-gradient(red 50%,transparent 50%);
/*外围一圈就完全被遮住了.*/
**ps:**遮罩可以用透明png图片实现去遮罩
遮罩mask是一个复合属性，
mask-image,默认值为none，值为透明图片，或透明渐变
mask-repeat,默认值为repeat，可选值与background-repeat相同
mask-position.默认值为0 0，可选值与background-position相同
mask-clip,默认值为border-box，可选值与background-clip相同
mask-origin,默认值为border-box，可选值与background-origin相同
mask-size,默认值为auto，可选值与background-size相同
阿里图标
-
顾名思义就是阿里巴巴开发的图标网站,免费为我们提供大量精美的图标的网站
-
将图标以字体的形式加载到自己的网站上.
-
这就是大企业的责任,要为社会提供有价值的东西,所以阿里图标是为中国开发者提供的便利性服务
-
总结
1.登录阿里巴巴矢量图标库
2,购物(添加到购物车)
3.添加到项目
4.直接下载
5.下载好的文件解压到你的项目中的iconfont文件里面
6.点击.html文件查看演示
阿里图标的强大之处在于我们挑选图标,我们生成项目,生成在线链接,直接用
继承
color:
font的属性:font-style, font-variant, font-weight, font-size/line-height, font-family
text-align;
text-indent;
line-height;
letter-spacing;字符间间距
word-spacing; 词间距
/*可被子元素继承*/
.father{
width: 500px;
height: 500px;
background-color:skyblue;
color: pink;
text-align: center;
text-indent: 10px;
line-height: 200px;
font-size: 50px;
letter-spacing: 5px;
}
.son{
width: 200px;
/*默认不给宽度,就是父级盒子的100%;这是块级盒子的特性,而不是继承而来的*/
height: 200px;
background-color: green;
}
<div class="father">
<div class="son">
我要忘了你的样子
</div>
</div>
-
a标签的color值不继承
<a href="#">大美不言</a> -
默认不继承的给属性加inhrit可以让他显示的继承.
.son{ height:inherit; background-color: purple; /*子元素跟父元素相同大小将其覆盖掉了*/ } -
子元素有的属性就不会去进行继承
.son{ font-size: 20px; text-align: right; } -
父级有先继承父级而不会去找爷爷
.son{ height: 200px; font-size: 20px; text-align: right; background-color: purple; } -
li的前面的小圆点也是继承而来,我们去清除也只需要去清除ul的样式即可.
ul{ list-style:none; }
代码复用(组件化)
-
一行代码可以多次利用,通过添加不同的css类名
我们之前如果要去浮动或者清除浮动
.father .son{
float:left;
}
.wrap .content{
float: left;
}
.wrap .content:after{
content: "";
display: block;
clear:both;
}
<div class="father">
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
</div>
<div class="wrap">
<div class="content"></div>
</div>
浮动
.fl{
float:left;
}
.fr{
float:right;
}
/*我们可以写一个浮动的类名,这个类就相当于工具类.
哪个元素需要浮动我就直接在其前面添加这个类名他就拥有了浮动的样式.*/
清除浮动
.clearfix:after{
content:"";
display:block;
clear:both;
}
我们单独去写一个css的样式用于不同html的复用
例如我们创建一个外部CSS文件引入,里面写的是小米的头部区域
<link rel="stylesheet" href="topbar.css">
你打开小米商城里别的链接,可以发现这个头部经常会用到.
我们不止可以在这个HTML页面使用,我们在写下一个页面的时候也可以把这个拿来使用.
其实无论是模块化开发还是组件化开发,强调的都是代码的复用性.
可以大幅提高工作效率,减少开发时长.你可以把别人的东西拿来使用,只需自己定义较少的部分.
swiper
轮播图:在有限的空间展示多张图片和文字;
- **我们看文档(操作手册)**是为了什么?
理解操作规范,思维设计理念
-
学框架,工具库的意义
-
帮助我们去高效正确的规范开发工具
-
合理复制粘贴不是坏事,可以提高我们的效率,
计算机很经典的法则:开源思想 :github
swiper本质上也是一个开源项目:
- 学习框架的过程
1.合理使用它
2.了解它的思想 vue:mvvm react:mvc
3.研究代码,底层实现(最重要)
4.创新 公司魔改框架
- 假如你下载好了框架
请在package文件夹找生成好的框架代码
- .css和.min.css的区别
.min.css 压缩版 清除了所有不需要的空格和换行
- 引入顺序
引入框架样式的时候,保证在自己写的样式前面,方便自己的样式覆盖它
引入框架js的时候,需要写在body标签结束之前,保证页面元素加载完成以及被解析
CDN引入
让页面加载的时候在线下载
CDN 资源服务器(缓存) 找最近的服务器去拿资源(重定向)
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
