CSS 样式介绍（五）

1. css 精灵技术（sprite）

• css 精灵技术（sprite）：将多个小背景图片合成一个大的背景图片(精灵图)返回回来，利用background-position去定位自己需要的图片，精灵技术是为了减少服务器的请求次数，减少服务器压力。

2. 滑动门核心技术

• 核心技术：就是利用css精灵（主要要背景位置）和盒子padding撑开宽度，以便能适用不同的字数的导航栏

    
    
    


    
            首sdds页
    

    
            公司简介
    
    
    
    

4. 伪元素选择器

• 伪类选择器 就是选取对象。而伪元素选择器本质上就是插入一个元素（标签 盒子）只不过是行内元素 span a，所以要通过display: inline-block转换。

    
    
    


    

        是sdds
    

    
        时代大厦
    

4. css3过渡属性

• transition:(transition-property)要过度的属性 (transition-duration)花费时间 (transition-timing-function)运行曲线 何时开始;
• transition-timing-function:linear 均速， ease 渐渐慢下来, ease-in 加速. ease-out 减速,ease-in-out 先加速后减速

.transitionDemo {
    width: 100px;
    height: 100px;
    display: block;
    background-color: pink;
    transition: width 0.5s linear 0s,
    height 0.5s linear 0.5s;
    transition: all 0.5s; /*所有属性都要变化用all就行*/
    /*transition 写在div 里面 ，不要写在hover里面*/
    margin-bottom: 500px;

} 

.transitionDemo:hover {
    width: 200px;
    height: 200px;
}

5. 位置移动及旋转属性

.div1 {
    width: 200px;
    height: 200px;
    background-color: pink;
    transform: translateX(100px); /*水平移动100像素*/
    /*translate移动距离 如果是% ，不是以父亲宽度为准，以自己的宽度为准*/
    transform: translateX(50%);/* 走div盒子自己宽度 200px的一半 就是100px*/
    position: absolute; 
    left: 50%;
    /*top: 50%;*/
    transform: translateX(-50%); /*水平居中*/
    /*transform: translateY();*/
    /*transform: translate(-50%, -50%); /*水平垂直居中*/
}


img.demo1 {
    margin: 200px;
    transition: all 0.6s;
    transform-origin: center center; /*默认中心点旋转*/
    transform-origin: left top;
    /*transform-origin: 20px 10px;*/
        }

img.demo1:hover {
    transform: rotate(180deg); /*旋转180度*/
}

img.demo2 {
    margin:  0 auto;
    display: block;
    transition: all 2s;
    transform-origin: center center; /*默认中心点旋转*/

}

img.demo2:hover {
    transform: rotateX(180deg);

}


h2 {
    /*transform: translated3d(x,y,z)；x 和 y 可以是px 可以是%， z 只能是px*/
    margin: 100px;
    transform: translate3d(0, 50px, 0);
    transition: all 0.8s;
}

h2:hover {
    transform: translate3d(0, 0, 0);
}

6. css3动画animation属性

• **animation: 动画名称 动画时间 运动曲线 何时开始 播放次数(infinite无线循环) 是否反方向;(normal reverse alternate) **

.animation1 {
    width: 100px;
    height: 100px;
    margin: 50px;
    background-color: blue;
    animation: go 5s ease 0s infinite;
}

/*@keyframes 动画名称 {}  定义动画*/
@keyframes go {

 /*from {
    transform: translateX(0);
 }
 */
 0% { /*等价于from*/
    transform: translate3d(0, 0, 0);
 }

 25% {
    transform: translate3d(800px, 0, 0);
 }

 50% {
    transform: translate3d(800px, 400px, 0);
 }

 75% {
    transform: translate3d(0, 400px, 0);
 }

 100% { /*等价于 to*/
    transform: translate3d(0, 0, 0);
 }

 /*to { 
    transform: translateX(600px)
 }*/
}

.animation1:hover {
    animation-play-state: paused; /*鼠标经过暂停动画 ，离开继续开始*/
}