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;

            }

CSS之第五天绽放

标签：

原文地址：http://www.cnblogs.com/han201388/p/5772516.html