姜玉琪_20210113-姜玉琪
知识点总结：
1、transform
transform 是 css3 的属性，该属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放， 移动，倾斜等。
2、transition
transition 属性设置元素当过渡效果，四个简写属性为：
transition-property 指定CSS属性的name，transition效果 transition-duration transition效果需要指定多少秒或毫秒才能完成 transition-timing-function 指定transition效果的转速曲线 transition-delay 定义transition效果开始的时候
transition-timing-function 常用的值有：
3、动画
动画属性可以逐渐地从一个值变化到另一个值，比如尺寸大小、数量、百分比和颜色 定义语法：
@keyframes animationName{
from {}
to {}
}
4、例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>翻转</title>
<style type="text/css">
.box{
/* 居中显示 */
margin: 200px auto;
width: 300px;
position: relative;
transition: all .2s linear;
/* 保留 3D 效果 */
transform-style: preserve-3d;
perspective: 800px;
}
.box:hover{
transform: rotateY(180deg);
}
.front,.back{
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
border-radius: 50%;
font-size: 40px;
text-align: center;
line-height: 300px;
}
.front{
z-index: 1;
background-color: green;
}
.back{
background-color: blue;
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="box">
<div class="front">云创动力</div>
<div class="back">IT特种兵</div>
</div>
</body>
</html>
5、例子二：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航栏</title>
<style type="text/css">
ul > li {
/* 相对定位 */
position: relative;
/* 列表尺寸 */
width: 150px;
height: 30px;
/* 去掉 列表 前的点 */
list-style: none;
/* 浮动到一行 */
float: left;
/* 距离左边元素 15 像素 */
margin-left: 15px;
/* 鼠标样式 修改为 手指 */
cursor: pointer;
/* 文字居中显示 */
text-align: center;
/* 纵向居中 */
line-height: 30px;
/* 字体加粗 */
font-weight: bold;
/* 保留3d效果 */
transform-style: preserve-3d;
/* 过渡效果 */
transition: all 1s linear;
}
ul > li:nth-child(1){
margin-left: 0;
}
ul > li:hover{
transform: rotateX(90deg);
}
.top, .bottom{
width: 150px;
height: 30px;
/* 绝对定位 */
position: absolute;
top: 0;
left: 0;
}
.top{
background-color: #ccc;
transform: translateZ(15px);
}
.bottom{
background-color: lightyellow;
/* 旋转 */
transform: translateY(15px) rotateX(-90deg);
}
</style>
</head>
<body>
<ul>
<!-- (li>div.top+div.bottom)*5 tab -->
<li>
<div class="top">云创动力</div>
<div class="bottom">首页</div>
</li>
<li>
<div class="top">云创动力</div>
<div class="bottom">首页</div>
</li>
<li>
<div class="top">云创动力</div>
<div class="bottom">首页</div>
</li>
<li>
<div class="top">云创动力</div>
<div class="bottom">首页</div>
</li>
<li>
<div class="top">云创动力</div>
<div class="bottom">首页</div>
</li>
</ul>
</body>
</html>
6、例子3：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>相册</title>
<style type="text/css">
body{
perspective: 1000px;
}
.box{
/* 相对定位 */
position: relative;
width: 280px;
height: 200px;
/* 居中 */
margin: 200px auto;
/* 保留3d 效果 */
transform-style: preserve-3d;
transform: rotateX(-20deg);
animation: rotatu 6s linear infinite;
}
.box:hover{
/* 动画暂停 */
animation-play-state: paused;
}
.box>div{
/* 绝对定位 */
position: absolute;
top: 0;
left: 0;
width: 280px;
height: 200px;
background-image: url(img/2.jpg);
background-size: cover;
}
.box>div:nth-child(1){
transform: translateZ(350px);
}
.box>div:nth-child(2){
transform: rotateY(60deg) translateZ(350px) ;
}
.box>div:nth-child(3){
transform: rotateY(120deg) translateZ(350px) ;
}
.box>div:nth-child(4){
transform: rotateY(180deg) translateZ(350px) ;
}
.box>div:nth-child(5){
transform: rotateY(240deg) translateZ(350px) ;
}
.box>div:nth-child(6){
transform: rotateY(300deg) translateZ(350px) ;
}
@keyframes rotatu{
from{
transform: rotateX(-20deg) rotateY(0deg);
}
to{
transform: rotateX(-20deg) rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
7、布局：
CSS页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者 主视口/窗口的位置。在这将涉及更多关于页面布局技术的细节：
正常布局流
正常布局流(normal flow)是指在不对页面进行任何布局控制时，浏览器默认的HTML布局方式。
display 属性
弹性盒子
网格
浮动
定位
CSS 表格布局
多列布局
（1）浮动
float 属性最初只用于在成块的文本内浮动图像，但是现在它已成为在网页上创建多列布局的最常用 工具之一。
（2）清除浮动
所有在浮动下面的自身不浮动的内容都将围绕浮动元素进行包装，如果 没有处理这些元素，就会变得很糟糕。
clear 属性，当你把这个应用到一个元素上时，它主要意味着"此处停止浮动"——这个元素和源码中后 面的元素将不浮动，除非将一个新的 float 声明应用到此后的另一个元素。
clear 可以取三个值：
left ：停止任何活动的左浮动
right ：停止任何活动的右浮动
both ：停止任何活动的左右浮动
心得体会：
老师讲的例子很有用，有利于知识的掌握！
近期评论