1、transition(过滤效果)
四个属性:
transition-property
指定CSS属性的name,transition效果
transition-duration transition
效果需要指定多少秒或毫秒才能完成
transition-timing-function
指定transition效果的转速曲线注:
常用的值:
transition-delay
定义transition效果开始的时候语法:
transition: property duration timing-function delay;
例如:
transition:all 3s linear infinite; //全部的动画 过渡时间为3s 匀速 无限次
2、动画
1、定义动画:
@keyframes animationName{ from {} to {} }
2、使用动画
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
例如:
/* 定义动画 */ @keyframes fjl{ from{ transform:rotateY(0deg); } to{ transform:rotateY(360deg); } } /*使用动画*/ animation: fjl 20s linear infinite;
3、定位
3.1、静态定位
静态定位是每个元素获取的默认值
3.2、相对定位
相对定位与静态定位非常相似,占据在正常的文档流中,除了你仍然可以修改它的最终位置,包括让它与页面上的其他元素重叠。
给元素加上 position:relative; 并不会改变元素的位置,需要使用 top , bottom , left 和 right属性。
3.3、绝对定位
position:absolute; 生成绝对定位的元素,相对static定位以外的第一个父元素进行定位。绝对定位的元素不再存在于正常文档布局流中。
3.4、固定定位
fixed 固定定位,这与绝对定位的工作方式完全相同,只有一个主要区别:绝对定位固定元素是相对
<html>
元素或其最近的定位祖先,而固定定位固定元素则是相对于浏览器视口本身。3.5、z-index
提高样式层级
注:
z-index失效的情况:
1、父标签 position属性为relative;
2、问题标签无position属性(不包括static);
3、问题标签含有浮动(float)属性。
解决失效方法:
1、position:relative改为position:absolute;
2、浮动元素添加position属性(如relative,absolute等);
3、去除浮动
4、浮动——高度坍塌问题
所谓高度坍塌:
父元素的高度,默认被子元素撑开,此时如果子元素设置浮动,则会导致其完全脱离文档流,子元素脱离文档流将无法撑开父元素,导致父元素的高度丢失,就是我们说的高度塌陷问题。
问题:
父元素一旦高度塌陷,则它下边的元素会向上移动,导致整个页面的布局混乱!
案例:
想要的图:
得到却是:
原理:
在w3c标准(非IE6以下版本采用的是W3C标准)中,每一个元素会有一个隐藏的属性,即BFC(块级格式化上下文),该属性在默认情况下是关闭的。
注:
当BFC开启的时候回获得以下特性: 1.父级元素的内外边距不会与子元素重叠 2.开启后不会被浮动元素所覆盖 3.开启后可以包含浮动子元素
解决方法:
1、给父元素固定宽高
弊端:高度固定则不能让元素高度自适应了,不灵活 。
.box{ width:500px ; height: 200px; border:2px solid #000 ; background: #fcc; }
2、给父元素设置浮动,让其也脱离标准文档流
弊端:这种方法方便,但是对页面的布局不是很友好,不易维护。
.box{ width:500px ; border:2px solid #000 ; background: #fcc; float:left; }
3、给父元素overflow属性设置为hidden
弊端:只要里面的内容或者元素超出父元素以外,就会被隐藏
.box{ width:500px ; border:2px solid #000 ; background: #fcc; overflow: hidden; }
4、在浮动元素下方添加空div,并给该元素设置以下属性:
弊端:会添加很多空标记,增加结构负担,产生代码冗余 。
.空div的类名{ clear:both; height:0; overflow:hidden; }
5、给父元素添加display:table;
弊端:会改变当前元素的元素类型;
.box{ width:500px ; border:2px solid #000 ; background: #fcc; display: table; }
6、万能清除浮动法(推荐使用!!!)
在父元素中内容的最后添加一个伪元素
.box:after{ content:""; clear: both; display: block; height: 0; overflow: hidden; visibility: hidden; }
5、css3中的3D(照片墙效果)
重要属性:
/* 呈现3d 效果 */
transform-style: preserve-3d;
典型案例(照片墙效果):
body{
/* 视图距离 */
perspective: 2000px;
}
/* 定义动画 */
@keyframes fjl{
from{
transform:rotateY(0deg);
}
to{
transform:rotateY(360deg);
}
}
.box{
margin:0 auto;
width: 300px;
height: 300px;
/* border: 1px solid black ; */
position: relative;
/* 呈现3d 效果 */
transform-style: preserve-3d;
/* 使动画开始旋转 */
animation: fjl 20s linear infinite;
transform:rotateX(60deg);
}
.box:hover{
/* 暂停动画 */
animation-play-state: paused;
}
.box>div{
margin:150px auto;
/* border: red 1px solid; */
width: 300px;
height: 300px;
background-image: url(img/9.jpg);
/* 图片覆盖 */
background-size: cover;
position: absolute;
top: 0%;
left: 34%;
}
.box>div:nth-child(1){
transform: translateZ(450px);
}
.box>div:nth-child(2){
transform: rotateY(60deg) translateZ(450px) ;
}
.box>div:nth-child(3){
transform: rotateY(120deg) translateZ(450px);
}
.box>div:nth-child(4){
transform:rotateY(180deg) translateZ(450px);
}
.box>div:nth-child(5){
transform:rotateY(240deg) translateZ(450px);
}.box>div:nth-child(6){
transform:rotateY(300deg) translateZ(450px);
}
<!-- 容器 -->
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>