CSS 样式介绍(五)

1. css 精灵技术(sprite)
  • css 精灵技术(sprite):将多个小背景图片合成一个大的背景图片(精灵图)返回回来,利用background-position去定位自己需要的图片,精灵技术是为了减少服务器的请求次数,减少服务器压力。
2. 滑动门核心技术
  • 核心技术:就是利用css精灵(主要要背景位置)和盒子padding撑开宽度,以便能适用不同的字数的导航栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        /*滑动门技术*/
        a {
            display: inline-block;
            height: 33px;
            /*千万不能给宽度,写死宽度不对的,我们要推拉门*/
            background: url(ao.png) no-repeat;
            padding-left: 15px;
            margin-left: 100px;
            color: #fff;
            text-decoration: none;
            line-height: 33px;
        }

        a span {
            height: 33px;
            display: inline-block;
            background: url(ao.png) no-repeat right;
            /*span 不能给高度 利用padding挤开 要span 右边的圆角,所以背景位置要右对齐*/
            padding-right: 15px;
        }

        a:hover span {
            color: red;
        }

        
    </style>
</head>
<body>
    <a href="#">
            <span>首sdds页</span>
    </a>

    <a href="#">
            <span>公司简介</span>
    </a>
    <!-- 总结:1. a设置背景左侧,padding撑开合适宽度. -->
    <!-- 2. span 设置背景右侧,padding 撑开合适宽度 剩下由文字撑开宽度 -->
    <!-- 3. 之所以a 包含 span 就是因为整个导航都是可以点击的。 -->
</body>
</html>
4. 伪元素选择器
  • 伪类选择器 就是选取对象。而伪元素选择器本质上就是插入一个元素(标签 盒子)只不过是行内元素 span a,所以要通过display: inline-block转换。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .demo::before { /*伪元素选择器*/
            content: "小狗";
            background-color: pink;
            border: 1px solid red;
            width: 100px;  /*默认设置宽高无效,要转为行内块或者块级元素*/
            height: 100px; 
            display: inline-block;
            /*伪类选择器 就是选取对象。而伪元素选择器本质上就是插入一个元素(标签 盒子)只不过是行内元素 span a,所以要通过display: inline-block转换*/
        }

        .demo::after { /*伪元素选择器*/
            content: "时代大厦狗";
            background-color: pink;
            border: 1px solid red;
            width: 100px;  
            height: 100px; 
            display: inline-block;
        }

        .demo1 {
            width: 100px;
            height: 100px;
            display: inline-block;
            background-color: blue;
            position: relative;
            margin: 100px auto;
        }

        .demo1:hover::before { /*鼠标经过之后 前面插入一个伪元素*/
            content: "";
            width:100%;
            height: 100%;
            display: block;
            border: 2px solid red;
            left: 0;
            top: 0;
            position: absolute;  /*要伪元素不占位就要用绝对定位*/
            box-sizing: border-box; /*把padding 和 border 都放width里面了*/
        }
        
    </style>
</head>
<body>
    <div class="demo">
        是sdds
    </div>

    <span class="demo1">
        时代大厦
    </span>
</body>
</html>
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; /*鼠标经过暂停动画 ,离开继续开始*/
}

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 857评论 0 10
  • W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的...
    青春前行阅读 777评论 0 5
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 18,481评论 1 40
  • $HTML, HTTP,web综合问题 1、前端需要注意哪些SEO 2、 的title和alt有什么区别 3、HT...
    Hebborn_hb阅读 3,065评论 0 18
  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 654评论 0 6