css3基础点（1）

作者: 前端_凯伦 | 来源:发表于2017-01-03 22:50 被阅读0次

css3基础点（1）
1 CSS3 基础认知、选择器
前端基础搬运工-H5C3模块
《图解CSS3》学习记录（01-概述）
CSS3 属性/transition、animation 配合J
css3开发商务滑动垂直侧边栏
各个阶级的前端必须掌握的基本技能汇总
关于H5-CSS3(4)
CSS3笔记
css3渐变:线性和径向

css3选择器

  属性选择器         IE6以下不兼容
        li[class]       有属性
        *li[class=abc]  属性和值是否相等    "abc"
        li[class~=abc]  包含              "abc ab"
        li[class^=abc]  首字母
        li[class$=abc]  尾字母
        li[class|=a]    以值开头的元素
        li[class*=abc]  字符串中有值
  伪类选择器
        *obj:nth-child(1)       选择某一个

        obj:nth-child(odd)      奇数
        obj:nth-child(even)     偶数

        obj:nth-child(n)        全部
        obj:nth-child(2n)       几倍数
        obj:nth-last-child(2)   从后往前数

        obj:first-child         第一个
        obj:last-child          最后一个

        input:focus             获取焦点
        p:only-child            父级下只能存在一个元素
        div:empty               空元素

        input:enabled           可用
        *input:disabled         不可用 

        ::selection             选择的文本样式
        *:root                  根元素 html

*css3新增的样式

    # 圆角
        border-radius
            50%     正圆   单位都可以用
            一个值         四个方向
            两个值     左上/右下 右上/左下
            三个值         左上 右上/左下    右下
            四个值     左上 右上 右下 左下  顺时针

    # transition:1s all ease;
        1s      运动时间
        all     运动样式
        ease    运动类型

    # 浏览器规则
        chrome              谷歌
            -webkit-
        firefox             火狐
            -moz-
        ie                  IE
            -ms-
        opera               欧朋
            -o-
        不加前缀            标准

    # 目的：移动端开发
        -webkit-        兼容

    # 文字阴影
        text-shadow:1px 1px 2px #000;
            x
            y
            模糊度
            阴影颜色
例子：

    <style>
        div {
            -webkit-text-stroke: 2px red;
            font-family: "微软雅黑";
            font-size: 50px;
            color: #fff;
        }
    </style>

    <body>
    <div>div</div>
    </body>

    # 颜色表示方法
        rgba(0,0,0,0.1)
            r   red
            g   green
            b   blue
            a   alpha
    # 文字描边
        -webkit-text-stroke:2px red;
            描边宽度
            描边颜色
例子：
<style>
    div {
        -webkit-text-stroke: 2px red;
        font-family: "微软雅黑";
        font-size: 50px;
        color: #fff;
    }
</style>

<body>
<div>div</div>
</body>


    #块阴影
        box-shadow:0px 0px 10px 10px #000 inset;
            x
            y
            模糊度
            扩充阴影值
            颜色
            内阴影
例子：
<style>
        div {
            width: 200px;
            height: 200px;
            background: #ccc;
            box-shadow: 0px 0px 10px 10px #000 inset;
        }
</style>

<body>
    <div></div>
</body>

    #渐变
        线性渐变
            background:-webkit-linear-gradient(left,red,green)
            left top right bottom /45deg 角度
            red起始颜色
            green结束颜色
例子：
    <style>
        div {
            width: 200px;
            height: 200px;
            background: -webkit-linear-gradient(-45deg, red, green);
        }
    </style>

    <body>
    <div></div>
    </body>


        # 重复渐变
            background:-webkit-repeating-linear-gradient(-45deg,red 0,red 10%,blue 10%,blue 20%);

例子：
    <style>
        div {
            width: 40px;
            height: 200px;
            background: -webkit-repeating-linear-gradient(-45deg, red 0, red 10%, blue 10%, blue 20%);
        }
    </style>
    <body>
    <div></div>
    </body>


        # 径向渐变
            background:-webkit-radial-gradient(red,green);

        # 普通元素可编辑
             contenteditable="true"
    # 蒙版
        -webkit-mask:url(../img/meizi.jpg) no-repeat x y;
    # 背景图大小
        background-size:width height;  px
            contain         以最小值为准
            cover           以最大值为准
    # 多个背景图
        background:url,url,url,url;

# 背景图生效位置
    background-origin:border-box;   边框生效位置
    background-origin:content-box;  内容生效位置
    background-origin:padding-box;  默认位置
# 文本开切位置
    -webkit-background-clip:text;
    color:rgba(0,0,0,0);    配合使用
# 倒影
    -webkit-box-reflect:below 10px -webkit-linear-gradient(rgba(0,0,0,0) 40%,rgba(0,0,0,1));
        below   向下
        above   向上
        left    向左
        right   向右

        10px    间距c

例子：
    <style>
        img {
            margin-left: 300px;
            -webkit-box-reflect: left 10px -webkit-linear-gradient(rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 1));
        }
    </style>

    <body>
    ![](../img/2.jpg)
    </body>

# 滤镜
    -webkit-filter:blur(0px);

# 缩放大小
    resize:both;

# 缩放大小
    resize:both; overflow:hidden;

# 文本排序
    direction:rtl; unicode-bidi:bidi-override;

# 变形
    transform:
        rotate          旋转度数    deg
        translate(x,y)  平移像素    px
        scale(x,y)      缩放比例
        skew(x,y)       倾斜度数    deg
      变形样式是从后往前读
    transform:skew(30deg,10deg) scale(2,2) translate(100px,20px) rotate(45deg);

# 旋转控制中心点
    transform-origin:x y;
        left
        right
        top
        bottom
        20px 20px
例子：
   <style>
        div {
            width: 200px;
            height: 200px;
            background: red;
            float: left;
            margin: 10px;
            transition: .4s all ease;
        }

        div:nth-child(1) {
            transform-origin: left top;
        }

        div:nth-child(2) {
            transform-origin: right top;
        }

        div:nth-child(3) {
            transform-origin: right bottom;
        }

        div:nth-child(4) {
            transform-origin: left bottom;
        }

        div:nth-child(5) {
            transform-origin: 50px 0;
        }

        div:hover {
            transform: rotate(45deg);
        }
    </style>
    <script>

    </script>

    <body>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </body>

钟表
#景深
    800-1200
    transform:perspective(800px);
    perspective:800px;
例子：
     <style>
            * {
                margin: 0;
                padding: 0;
            }

            div {
                width: 200px;
                height: 200px;
                background: red;
                margin: 100px auto;
                transition: 1s all ease;
            }

            div:active {
                transform: perspective(800px) rotateX(-60deg);
            }
     </style>

    <body>
    <div></div>
    </body>

#3d     加给父级    不能继承
    transform-style:preserver-3d;

#变形
    transform:
        scale       X Y 
        rotate      X Y Z
        translate   X Y Z
        skew        X Y
例子：
     <style>
            body {
                overflow: hidden;
            }

            div {
                transform: skew(0deg, 0deg);
                transition: 1s all ease;
                width: 200px;
                height: 200px;
                background: red;
                margin: 200px auto;
            }

            div:hover {
                transform: skew(50deg, 50deg);
            }
        </style>

    <body>
    <div></div>
    </body>


#判断运动结束
    transitionend
    obj.addEventListener('transitionend',fn,false);

3d作品展示

    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        ul {
            position: relative;
            margin: 100px auto;
            width: 300px;
            height: 300px;
            transform-style: preserve-3d;
            transform: perspective(800px);
        }

        li {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: #399;
            border: 1px solid red;
            text-align: center;
            line-height: 300px;
            font-size: 50px;
            font-weight: bold;
            color: #fff;
            opacity: 0;
            transition: 1s all ease;
        }

        .l2 {
            transform: translate(-260px, 0) rotateY(45deg);
        }

        .l1 {
            opacity: 1;
            transform: translate(-180px, 0) rotateY(45deg);
        }

        .cur {
            opacity: 1;
        }

        .r1 {
            opacity: 1;
            transform: translate(180px, 0) rotateY(-45deg);
        }

        .r2 {
            transform: translate(260px, 0) rotateY(-45deg);
        }
    </style>
    <script>
        window.onload = function () {
            var oPrev = document.querySelector('.prev');
            var oNext = document.querySelector('.next');
            var aLi = document.querySelectorAll('li');
            var aClass = [];
            var bOk = false;

            for (var i = 0; i < aLi.length; i++) {
                aClass.push(aLi[i].className);
            }

            oPrev.onclick = function () {
                if (bOk)return;
                bOk = true;
                aClass.push(aClass.shift());
                change();
            };
            oNext.onclick = function () {
                if (bOk)return;
                bOk = true;
                aClass.unshift(aClass.pop());
                change();
            };

            function change() {
                for (var i = 0; i < aLi.length; i++) {
                    aLi[i].className = aClass[i];
                }
                //判断运动结束
                var oCur = document.querySelector('.cur');

                function transEnd() {
                    oCur.removeEventListener('transitionend', transEnd, false);
                    bOk = false;
                }

                oCur.addEventListener('transitionend', transEnd, false);
            }
        };
    </script>           
    

    <body>
    <input type="button" value="←" class="prev"/>
    <input type="button" value="→" class="next"/>
    <ul>
        <li class="l2">0</li>
        <li class="l1">1</li>
        <li class="cur">2</li>
        <li class="r1">3</li>
        <li class="r2">4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
    </body>

3d 立方体

   <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 300px;
            height: 300px;
            margin: 100px auto;
            position: relative;
            transform-style: preserve-3d;
            transform: perspective(800px);
            border-radius: 50%;
        }

        .box div {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 300px;
            font-size: 50px;
            border-radius: 50%;
        }

        .front {
            background: rgba(204, 102, 51, 0.5);
            transform: translateZ(150px);
        }

        .back {
            background: rgba(204, 102, 153, 0.5);
            transform: translateZ(-150px) rotateY(180deg);
        }

        .left {
            background: rgba(255, 102, 102, 0.5);
            transform: translate(-150px, 0) rotateY(-90deg);
        }

        .right {
            background: rgba(51, 255, 204, 0.5);
            transform: translate(150px, 0) rotateY(90deg);
        }

        .top {
            background: rgba(204, 102, 204, 0.5);
            transform: translate(0, -150px) rotateX(90deg);
        }

        .bottom {
            background: rgba(51, 102, 204, 0.5);
            transform: translate(0, 150px) rotateX(-90deg);
        }
    </style>
    <script>
        window.onload = function () {
            var oBox = document.querySelector('.box');

            var x = 0;
            var y = 0;
            var iSpeedX = 0;
            var iSpeedY = 0;
            var lastX = 0;
            var lastY = 0;
            oBox.onmousedown = function (ev) {
                var disX = ev.clientX - x;
                var disY = ev.clientY - y;
                document.onmousemove = function (ev) {
                    x = ev.clientX - disX;
                    y = ev.clientY - disY;
                    oBox.style.transform = 'perspective(800px) rotateX(' + -(y) + 'deg) rotateY(' + (x) + 'deg)';
                    iSpeedX = ev.clientX - lastX;
                    iSpeedY = ev.clientY - lastY;

                    lastX = ev.clientX;
                    lastY = ev.clientY;
                };
                document.onmouseup = function () {
                    document.onmousemove = null;
                    document.onmouseup = null;

                    oBox.timer = setInterval(function () {
                        iSpeedX *= 0.8;
                        iSpeedY *= 0.8;

                        x += iSpeedX;
                        y += iSpeedY;
                        oBox.style.transform = 'perspective(800px) rotateX(' + -(y) + 'deg) rotateY(' + (x) + 'deg)';

                        if (Math.abs(iSpeedX) < 1)iSpeedX = 0;
                        if (Math.abs(iSpeedY) < 1)iSpeedY = 0;

                        if (iSpeedX == 0 && iSpeedY == 0) {
                            clearInterval(oBox.timer);
                        }
                    }, 16);
                };
                return false;
            };
        };
    </script>

    <body>
        <div class="box">
            <div class="front">前</div>
            <div class="back">后</div>
            <div class="left">左</div>
            <div class="right">右</div>
            <div class="top">上</div>
            <div class="bottom">下</div>
        </div>
    </body>

css3基础点（1）
css3选择器 *css3新增的样式 3d作品展示 3d 立方体
1 CSS3 基础认知、选择器
1、CSS3基础认知： (1).CSS3是在CSS2基础上新增了很多强大的功能，其拆分了很多"独立模块"，迭代过程...
前端基础搬运工-H5C3模块
八、H5C3模块基础部分 1. CSS3有哪些新特性？ - [ ] 1. CSS3实现圆角（border-ra...
《图解CSS3》学习记录（01-概述）
CSS3规范重复了部分CSS的内容，并在其基础上进行了很多增补和修改。 CSS3新特征： 1、强大的CSS3选择器...
CSS3 属性/transition、animation 配合J
CSS3 扩展 webpack基础用法
css3开发商务滑动垂直侧边栏
知识点：盒子模型与css样式,CSS3选择器、CSS3伪元素画三角形，DIV+CSS布局基础，html性能优化与布...
各个阶级的前端必须掌握的基本技能汇总
「需要学习基础知识点」新手必打基础 HTML4\HTML5 CSS2\CSS3 ES5（原生 js 基本语法...
关于H5-CSS3(4)
关于H5-CSS3 1:CSS3基础运动:transition:1s all ease 2s; 高级运动 anim...
CSS3笔记
一、CSS3属性选择器什么是 CSS3在 CSS2 的基础上拓展、新增的样式 CSS3 发展现状移动端支持优于 ...
css3渐变:线性和径向
知识点： CSS3 渐变CSS3 线性渐变CSS3 径向渐变 CSS3 渐变渐变（gradients）可以在两个...