CSS之第五天绽放
这些都是新内容，觉得好陌生，要多练才行
1、background-origin 背景原点，必需保证背景是background-repeat为no-repeat。
如：html：<div class=”img”></div>
css: .img{width=”300px”;
height=”250”;
padding=”50px”;
background:url(...)no-repeat;
border:50px dashed #ccc;
background-origion:content-box;
background-position:center center;
}
2、background-clip 背景的显示区域
如：html：<div class=”img”></div>
Css:将上面background-origin;替换成background-clip:padding-box;即可。
3、background-size背景尺寸>
如：html:<div class=”d1”></div>
Css: .d1{background:url(...) no-repeat;
background-size:80px 60px;
}
4、background：背景色 背景图片 背景平铺方式 背景定位
如body{background:#EDEDED url(...) no-repeat 50% 30px;}
5、多重背景
如：html:<div class=”img”></div>
css: .img{width:720px;
height:461px;
background:url(...) no-repeat center center/30% 30%,url(...);
}
6、list-style-type 项目符号
如： ul{list-style-type:*}
*可以是实心圆disc、空心圆circle、实心方块、不显示none、阿拉伯数字decimal、小写罗马数字lower-roman、大写罗马数字upper-roman。
7.list-style-image 自定义项目符号
如：ul{list-style-image:url(...)}
8、transform 变形样式
如：html：<div class="circle-box"></div>
CSS：
2D平移translate()：
.circle-box {
width: 100p x;
height: 100px;
border-radius: 10px;
background-color: #808080;
/* 移动x,y */
/*transform: translate(100%, 100%);*/
/* 移动x */
/*transform: translateX(200%);*/
/* 移动Y */
transform: translateY(200%);
}
2D旋转 rotate():
.circle-box {
width: 100px;
height: 100px;
border-radius: 10px;
background-color: #808080;
transform-origin: 0 0;
transform: rotate(15deg);
}
2D缩放 scale():
.circle-box {
width: 100px;
height: 100px;
background: #000000;
transition: all .3s ease-in;
}
.circle-box:hover {
transform: scale(1.1, 1.1);
}
斜切扭曲 skew():
.circle-box {
width: 100px;
height: 100px;
background: #000000;
transition: all .3s ease-in;
}
.circle-box:hover {
transform: skew(10deg, 10deg);
}
3D位移translate3d():
.circle-box{
width: 80px;
height: 46px;
background-color: #e4ff00;
position:absolute;left: 473px;top:232px;
transition:all .3s ease-in;
}
.circle-box:hover{
transform:translate3d(67px,89px,156px);
}
9、过渡动画transition：
如：html：<div class="circle-box"></div>
CSS：
.circle-box {
width: 100px;
height: 100px;
background: #000000;
/*transition-property: width,height;
transition-duration: .3s;
transition-timing-function: ease-in;
transition-delay: 1s;*/
transition: all .3s ease-in 1s;
}
.circle-box:hover {
width: 200px;
height: 200px;
}
