CSS 样式介绍（五）

作者: 走在路上的小二 | 来源:发表于2019-06-08 01:28 被阅读1次

CSS 样式介绍（五）
CSS3基础
1. css入门基础知识-选择器
css 前端第二剑客
03-CSS3
学习CSS,这些内容你都知道了吗？
Web开发 | CSS 介绍 & 使用总结 (二)
CSS基础
CSS01
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; /*鼠标经过暂停动画 ，离开继续开始*/
}