2017年5月24号课堂笔记
2017年5月24号 星期三 晴 空气质量：优
内容：定位属性，CSS3动画
备注：5月25日补课堂笔记
一、定位属性
01.定位属性
仿写老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>定位属性</title>
<!--
position:定位属性
属性值：
01.static：默认值 位于页面中的最底层 离我们远
02.relative：相对定位
001.相对自身原来的位置 进行偏移
002.没有脱离标准文档流
003.位置发生变化后，原来的位置会保留！
03.absolute：绝对定位
001.脱离了标准文档流
002.位置发生变化后，原来的位置不会保留！
003.会以最近的一个父级元素为准！如果不存在，则以浏览器为准！
04.fixed：固定定位 位于页面中的最顶层 离我们近
001.相对于浏览器 进行偏移
-->
<style type="text/css">
*{
margin:0px;
padding:0px;
}
/*给所有的div设置高度和宽度*/
div{
height:50px;
width:50px;
}
/*分别给div设置不同的颜色*/
div:nth-of-type(1){
position:absolute;
left:36px;
background:red;
}
div:nth-of-type(2){
position:static;
background:green;
}
div:nth-of-type(3){
position:relative;
bottom: 20px;
background:yellow;
}
div:nth-of-type(4){
position:fixed;
left: 15px;
top:50px;
background:deepskyblue;
}
#a{/*第5个盒子*/
position:absolute;/*绝对定位子类*/
left:50px;
background:deeppink;
}
</style>
</head>
<body>
<div>第1个盒子
<div id="a">第5个盒子</div>
</div>
<div>第2个盒子</div>
<div>第3个盒子</div>
<div>第4个盒子</div>
</body>
</html>
02.z-index
仿写老师代码：
001.html代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>z-index属性</title>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>
<body>
<div id="content">
<ul>
<li><img src="image/maple.jpg" alt="香山红叶"/></li>
<li class="tipText">京秋魅力•相约共赏香山红叶</li>
<li class="tipBg"></li>
<li>时间：11月16日 星期六 8:30</li>
<li>地点：朝阳区西大望路珠江帝景K区正门前集合</li>
</ul>
</div>
</body>
</html>
002.css代码：
ul,li{
list-style: none;
margin: 0px;
padding: 0px;
}
#content{
width:350px;
}
/*背景颜色和文字*/
.tipText,.tipBg{
position:absolute;
top:108px;
height: 25px;
line-height: 25px;
width:331px;
}
.tipText{
color:white;
text-align: center;
z-index:1/*位于层叠的第一层*/
}
.tipBg{
background: black;/*背景颜色*/
opacity: 0.3;/*透明度*/
filter:alpha(opacity=30);/*解决浏览器的兼容性问题！IE低版本不支持opacity*/
}
二、CSS3动画
01、变形
仿写老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>transform的使用</title>
<style>
li{
list-style: none;
float: left;
width: 80px;
line-height: 40px;
background: rgba(242, 123, 5, 0.61);
border-radius: 6px;
font-size: 16px;
margin-left: 3px;
}
li a{
text-decoration: none;
color: #fff;
display: block;
text-align: center;
height: 40px;
}
li a:hover{
background: rgba(242, 88, 6, 0.87);
border-radius: 6px;
/*设置a元素在鼠标移入时向右下角移动4px，8px*/
/* transform: translate(4px,8px); 平移*/
/*鼠标放入 显示1.5倍的效果
transform: scale(1.5);*/
/* transform: skewX(15deg);只针对X轴
transform: skewY(15deg);只针对Y轴*/
/*transform: skew(15deg,-15deg);*/
transform:rotate(180deg);
}
</style>
</head>
<body>
<ul>
<li><a href="#">服装城</a></li>
<li><a href="#">美妆馆</a></li>
<li><a href="#">超市</a></li>
<li><a href="#">全球购</a></li>
<li><a href="#">闪购</a></li>
<li><a href="#">团购</a></li>
<li><a href="#">拍卖</a></li>
<li><a href="#">金融</a></li>
</ul>
</body>
</html>
02、照片墙
仿写老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>照片墙</title>
<style type="text/css">
div img:nth-child(even){
width:200px;
}
div img:nth-child(odd){
width:300px;
}
.box{
width:960px;
margin:200px auto;
position: relative;
}
.box img{
border:1px solid lightpink;
padding:10px;
position:absolute;
background:#fff;
/*过渡动画*/
transition: all 0.7s linear;
-moz-transition: all 0.7s linear ;/*火狐*/
-webkit-transition: all 0.7s linear ;/*谷歌chrome*/
}
.box img:hover{
/*提高层级*/
z-index: 1;
box-shadow: 5px 5px 5px purple;
transform: rotate(0deg) scale(1.5);
}
.box img:nth-child(1){
top: 0px;
left: 300px;
transform: rotate(-15deg);
}
.box img:nth-child(2) {
top:-50px;
left: 600px;
transform: rotate(-20deg);
}
.box img:nth-child(3) {
bottom: 0;
right: 0;
transform: rotate(15deg);
}
.box img:nth-child(4) {
bottom: 0;
left: 400px;
transform: rotate(-30deg);
}
.box img:nth-child(5) {
bottom: 0;
left: 0;
transform: rotate(-30deg);
}
.box img:nth-child(6) {
top: 0;
left: 0;
transform: rotate(20deg);
}
.box img:nth-child(7) {
top: 100px;
left: 700px;
transform: rotate(0deg);
}
.box img:nth-child(8) {
bottom: -20px;
right: 500px;
transform: rotate(30deg);
}
.box img:nth-child(9) {
top: 90px;
left: 550px;
transform: rotate(15deg);
}
.box img:nth-child(10) {
left: 180px;
top: 20px;
transform: rotate(-10deg);
}
</style>
</head>
<body>
<div class="box" id="box">
<img src="image/1.jpg" alt=""/>
<img src="image/2.jpg" alt=""/>
<img src="image/3.jpg" alt=""/>
<img src="image/4.jpg" alt=""/>
<img src="image/5.jpg" alt=""/>
<img src="image/6.jpg" alt=""/>
<img src="image/7.jpg" alt=""/>
<img src="image/8.jpg" alt=""/>
<img src="image/9.jpg" alt=""/>
<img src="image/10.jpg" alt=""/>
</div>
</body>
</html>
03、过渡动画
仿写老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>transition属性</title>
<style type="text/css">
div{
height:300px;
width:300px;
line-height: 300px;
text-align: center;
background: cornflowerblue;
/*transition: all 3s linear*/;
/*过渡属性
01. transition-duration:过渡需要多少时间 默认是秒
02. transition-timing-function:速度曲线
ease：开始和结束慢 中间快
linear:匀速
ease-in： 慢速开始
ease-out:慢速结束
ease-in-out:开始和结束慢
03.transition-delay: 过渡开始前等待的时间 默认是0s
04.transition-property: 需要过渡的css属性
transition:all 3s linear;
all：全部的css属性 包括 color,font-size,background.....
3s:过渡的事件
linear：速度曲线
*/
transition-property: transform,background; /*只对变形和背景颜色使用过渡*/
transition-delay:0.5s;/*触发事件立即过渡*/
transition-duration: 1s;/*完成过度需要的时间*/
transition-timing-function: linear; /*过渡的速度*/
}
div:hover{
background:purple;
font-size:30px;
transform:rotate(360deg);
}
</style>
</head>
<body>
<div>hello,sweetie</div>
</body>
</html>
04、动画
仿写老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>animation的使用</title>
<style type="text/css">
div{
width: 100px; /*宽度*/
height: 100px;/*高度*/
background: red;/*背景颜色*/
/*调用动画*/
animation:animates 3s linear infinite;
}
/*创建关键帧*/
@keyframes animates {
/*animates：关键帧名称*/
0% {
width: 0px;
transform: translate(50px, 0px);
}
25% {
width: 25px;
height: 150px;
transform: translate(150px, 0px) rotate(90deg);
}
50% {
width: 50px;
height: 300px;
background: pink;
transform: translate(300px, 0px) rotate(180deg);
}
75% {
width: 75px;
height: 150px;
background: yellow;
transform: translate(150px, 0px) rotate(270deg);
}
100% {
width: 100px;
transform: translate(50px, 0px) rotate(360deg);
}
}
</style>
</head>
<body>
<div>动画效果</div>
</body>
</html>
三、作业
01、Mindmanager笔记
001、Javascript基础
002、Javascript操作BOM对象
02、视频看完Javascript
四、老师辛苦了！
