过渡
弹性效果
//当在div悬停时 span发生改变
div: hover span{
//上边不发生改变 左右增加20px
margin:0 20px;
}
div span{
height: 50px;
width: 40px;
font-size: 30px;
text-align: center;
/*第一种写法(缩写)*/
transition: margin 2s;
/*第二种写法*/
/*transition-property: margin;*/
/*transition-duration: 2s;*/
}
/*被悬停的是ul ul中的li*/
ul:hover li{
}
/*被悬停的那个li*/
ul li:hover{
}
- 过渡的使用方法
1.修改相应属性
2.再回头给该元素添加过渡
2D转换
- 方法
- rotate（）
- translate()
- scale()
方法实用注意点在注释里面
/*加不加ul都没有问题*/
ul li:nth-of-type(2){
transform:rotate(45deg);
}
ul li:nth-of-type(3){
/*第一个参数是水平方向
第二个参数是垂直方向
*/
transform: translate(100px,0);
}
ul li:nth-of-type(4){
/*第一个参数是水平方向
第二个参数是垂直方向
注意点：
两个参数一样可缩写为一个，大于1放大，小于1缩小
*/
transform: scale(0.5,1);
}
ul li:nth-of-type(5){
/*1。如果同时写两个方法则用空格隔开
2。如果发生旋转则参考系发生旋转，再平移就不是水平平移而是相对平移*/
transform: rotate(30deg) translate(100px,0);
}
/*rotate的方法不会显示,因为被层叠掉了*/
transform: rotate(45deg);
transform: scale(0.5);
/*参数有三种形式
下面都表示左上角*/
transform-origin:0px 0px;
transform-origin:0% 0%;
transform-origin:left left;
transform:rotateX(45deg);
transform:rotateY(45deg);
transform:rotateZ(45deg);
/*依次为：水平 垂直 模糊度 阴影扩展 阴影颜色 内外阴影（默认为外阴影）
注意：1.阴影扩展是在原来的阴影的上下左右进行扩展
2.默认的颜色是盒子内部文字的颜色确定的
*/
box-shadow:h-shadow v-shaow blur spread color inset;
/*只有四个参数*/
text-shadow:h-shadow v-shaow blur color ;
动画
- 动画和过渡的相同点
- 过渡和动画都是给元素添加动画的
- 过渡和动画都是系统新增的一些元素
- 过渡和动画都需要满足三要素
div{
width: 100px;
height: 100px;
background-color: pink;
/*1.要执行的动画的名称*/
animation-name: xxx;
/*3.动画执行时长*/
animation-duration: 3s;
}
/*2.创建一个叫xxx的动画*/
@keyframes xxx {
from{
margin-left: 0;
}
to{
margin-left: 500px;
}
}
animation-name: xxx;
animation-duration: 3s;
/*动画执行的延迟时间*/
animation-delay: 2s;
/*执行时是以怎么的函数进行运动*/
animation-timing-function: linear;
/*执行的次数*/
animation-iteration-count:3;
/*执行的形式
1。normal 执行结束后又从起始点开始，默认
2。alternate 执行结束后以终点为起点返回*/
animation-direction: alternate;
/*告诉系统动画是运动还是暂停
running
paused*/
animation-play-state: running;
div{
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
left: 0;
top: 0;
animation-name: xxx;
animation-duration: 3s;
}
@keyframes xxx {
0%{
left: 0px;
top:0;
}
25%{
left: 300px;
top: 0;
}
50%{
left: 300px;
top: 300px;
}
75%{
left: 0;
top: 300px;
}
100%{
left: 0;
top:0;
}
}
/*1.backwards：决定动画等待状态的时候是否显示第一帧
2.afterwards：决定动画节俗状态的时候是否保持最后一帧
3.none：默认
4.both*/
animation-fill-mode:backwards;
div
{
/*animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;*/
/*简写的话只写名字和执行时间就好了*/
animation:myfirst 5s linear 2s infinite alternate running;
3D
- 让元素呈现3d效果
- 需要在其父元素添加（跟perspective相似）
transform-style: preserve-3d;
- 如果要得到长方体，直接通过scale让正方体拉伸一下就可以了
背景尺寸属性
- 设置背景图片的尺寸 background-size
/*分别是
1.用像素指明宽高
2.用百分比指明宽高
3.等比拉伸至覆盖
3.等比拉伸至图像完全显示*/
background-size: length|percentage|cover|contain;
background-size: 100px 100px;
background-size: 100% 100%;
background-size: cover;
background-size: contain;
- 相对于内容框来定位背景图像 background-origin
background-origin: padding-box(默认)|border-box|content-box;
- 规定背景的绘制区域 background-clip 属性
background-clip: border-box|padding-box|content-box;
/*也可以在里面添加其他的属性如：no-repeat left top*/
background-image:url(bg_flower.gif),url(bg_flower_2.gif);
background-repeat:no-repeat,no-repeat;
background-size:50px 50px, 50px 50px;
background-position: 50px 150px, 500px 50px;
css的书写格式
<div style="color: red"> </div>
<link rel="stylesheet" href=" ">
<style>
@import"xxx.css";
</style>
- 一般都使用外链样式 导入样式是css2.1的 所以有兼容问题 而且倒入样式先布置结构开始的界面会很丑
