冯娜_20210113冯娜
知识点总结
一、CSS3转换
1、元素的2D转换
transform:none;/*不进行转换*/
transform:translate(x,y);/*定义2dD转换，移动*/
transform:translate3d(x,y,z);/*定义3D转换*/
transform:tranlateX(value);/*使用x轴的值转换*/
transform:tranlateY(value);/*使用y轴的值转换*/
transform:scale(value);/*2D缩放*/
transform:scale3D(value1,value2,value3);/*3D缩放*/
transform:skew(x-angle,y-angle);/*沿着 X 和 Y 轴的 2D 倾斜转换*/
transform:rotate(angle);/* 2D 旋转，在参数中规定角度*/
transform:rotateX(angle); /*沿着 X 轴的 3D 旋转*/
transform:rotateY(angle); /*沿着 Y 轴的 3D 旋转*/
transform:rotateZ(angle); /*沿着 Z 轴的 3D 旋转*/
2、元素的过渡效果
（1）transition-property 指定CSS属性的name，transition效果
（2）transition-duration 需要指定多少秒或毫秒才能完成
（3）transition-timing-function 转速曲线
其值有：linear（匀速）、ease（先慢后快）、ease-in（以慢速开始）、ease-out（以慢速结束）、ease-in-out（以慢速开始和结束）
（4）transition-delay 定义transition效果开始的时候
3、案例：（翻转导航栏）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul>li{
position: relative;
list-style: none;
float: left;
margin-left: 15px;
width: 80px;
height: 30px;
text-align: center;
line-height: 30px;
}
ul>li:hover{
transform: rotateX(90deg);
transform-style: preserve-3d;
transition: all 1s linear;
/* transform: rotate3d(30deg,30deg,30deg); */
}
.box1,.box2{
position: absolute;
width: 80px;
height: 30px;
}
.box1{
background-color: #FAEBD7;
transform: translateZ(15px);
}
.box2{
background-color: #ADFF2F;
transform: translateY(15px) rotateX(-90deg);
}
</style>
</head>
<body>
<ul>
<li>
<div class="box1">云创动力</div>
<div class="box2">首页</div>
</li>
<li>
<div class="box1">云创动力</div>
<div class="box2">首页</div>
</li>
<li>
<div class="box1">云创动力</div>
<div class="box2">首页</div>
</li>
<li>
<div class="box1">云创动力</div>
<div class="box2">首页</div>
</li>
<li>
<div class="box1">云创动力</div>
<div class="box2">首页</div>
</li>
</ul>
</body>
</html>
二、动画
1、
@keyframes animationName{
from{}
to{}
}
2、属性
animation 所有动画属性的简写属性
animation-name;/*指定要绑定到选择器的关键帧的名称*/
animation-duration;/*设置动画将如何完成一个周期*/
animation-delay/*设置动画在启动前的延迟间隔*/
animation-iteration-count/*定义动画的播放次数 infinite 无限次*/
animation-direction/*指定是否应该轮流反向播放动画*/
animation-fill-mode/*规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放
时），要应用到元素的样式*/
animation-play-state/*指定动画是否正在运行或已暂停*/
3、案例：（相册）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
perspective: 1800px;
}
.box{
position: relative;
margin: 120px auto;
width: 500px;
height: 500px;
transform-style: preserve-3d;
animation: rotate 10s infinite linear;
/* border: 4px solid black; */
}
.box:hover{
animation-play-state:paused
}
.box1{
position: absolute;
top: 0;
left: 0;
width: 500px;
height: 300px;
background-image: url(img/k.jpg);
background-size: cover;
}
@keyframes rotate{
from{
transform: rotateX(-10deg) rotateY(0deg)
}
to{
transform: rotateX(-10deg) rotateY(360deg)
}
}
.box>.box1:nth-child(1){
transform: translateZ(450px) ;
}
.box>.box1:nth-child(2){
transform:rotateY(60deg) translateZ(450px) ;
}
.box>.box1:nth-child(3){
transform: rotateY(120deg) translateZ(450px) ;
}
.box>.box1:nth-child(4){
transform:rotateY(180deg) translateZ(450px) ;
}
.box>.box1:nth-child(5){
transform:rotateY(240deg) translateZ(450px) ;
}
.box>.box1:nth-child(6){
transform:rotateY(300deg) translateZ(450px) ;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
</div>
</body>
</html>
三、列表属性
1、list-style：none（无点）、disc（圆点）、circle（空心圆）、square（正方块）
四、布局
1、正常布局 流布局：浏览器渲染元素从上到下、从左到右
2、浮动布局：float布局
使用float布局会使浮动元素脱离正常的文档流，因为浮动元素在父元素中所占的面积的有效高度为0，会出现高度坍塌的问题，不可使用非浮动元素的外边距去填充与浮动元素之间的距离。
3、解决高度坍塌的方法：
（1）为该元素的父元素添加高度
（2）清除浮动:给不需要浮动的元素添加clear，清除浮动。若分不清清除左右浮动时，可以使用clear:both
心得体会
今天的收获也很多，主要练习了css3的转换和动画，还有float布局，以前使用float布局没有弄白清除浮动，写页面的时候费了不少的劲，有一次真的用了外边距去解决高度坍塌问题，后果一言难尽，相信以后不会这样处理该问题了。我还需要多练习css3和动画，空间立体感不强...
点赞
评论