CSS3 笔记

 伪元素/伪对象选择器 ::/:

                不在html结构中,在结构外
                不是一个元素==>如果是元素,在结构中是能够看的
                所以说伪元素结构外的扩展
           1.E::before
                在E元素之前添加内容
                使用伪元素添加内容--content:'内容';---没有任意特殊含义的行内标签
          2.E::after

                在E元素之后添加内容

        1.border-radius 圆角
              px  %
                  设置值得方式:可以给多个值,每个值之间用 分割   左上 右上 右下 左下
                    border-radius:50px;
                    border-radius:50px 100px; 左上和右下是50px 右上和左下是100px
                    border-radius:10px 50px 100px; 左上 右上 右下 左下和右上是一样的
                    border-radius:10px 50px 80px 100px; 左上 右上 右下 左下
             设置圆
                    现有一个正方形--半径是正方形边长的一半
                    如果是%,那么50%~100%都是圆
        2.边框阴影
                    box-shadow 边框阴影
                    box-shadow:水平方向的位置  垂直方向的位置  模糊距离  颜色;
                    如果一个px值: 缺少模糊举例
                    如果少给两个值:报错
                    如果缺少颜色:默认黑色
                    可以使用,链接两组值  box-shadow: 10px 10px 10px black,-10px -10px 10px gold;
           网页上的坐标轴:
                             往右是x轴的正值

                             往下是y轴的正值

css3渐变 background的一个属性/方法

                    颜色值至少为2个,可以为多个,每个值之间用,逗号分隔
        1. 线性渐变
                    linear-gradient(值)
                    语法:background:linear-gradient();
                    方向值可以改变--默认从上到下

                    to top/to bottom默认/to left/to right,写在linear-gradient第一个参数值

background: linear-gradient(to bottom,pink,cyan,yellowgreen,red,black,white,purple,blue,orange);

        2. 径向渐变
                    radial-gradient(值);

                        从中心点向外进行一个平缓的过渡

background: radial-gradient(purple,pink,cyan,blue,white,orange,yellow,green,darkred,gray);

         3. 文本阴影

                    text-shadow:水平阴影 垂直阴影 模糊距离  颜色;

/*文本阴影*/
text-shadow: 5px 5px 5px rgba(128,128,128,.5);
text-shadow: 5px 5px 5px rgba(128,128,128,.5),-5px -5px 5px rgba(255,192,103,.5);

        4 . 过渡 transition
                  在一定以时间内进行平稳的渡过
              定义:
                    参数1: 过渡时间:多长时间完成过渡效果
                              1s/ms  1s=1000ms  transition 1s;  写在hover中的内容都发生过渡
                    参数2: 过渡属性
                             不写默认过渡全部属性--all全部

                             transtion:1s width;    

transition: 3s background,5s width,1s height;

       5.  过渡 transition
                 在一定以时间内进行平稳的渡过
            定义:
                   参数1: 过渡时间:多长时间完成过渡效果
                              s/ms  1s=1000ms  transition 1s;  写在hover中的内容都发生过渡
                   参数2: 过渡属性
                             不写默认过渡全部属性--all全部
                              transtion:1s width;
                   参数3: 过渡方式
                             ease 减速 默认
                             linear 匀速
                             ease-in 加速
                             ease-out 减速(与默认的类似)
                             ease-in-out 先加速后减速
                             贝塞尔曲线 http://cubic-bezier.com/#.17,.67,.83,.67
                    参数4: 延迟时间
                             s/ms   1s=1000ms

                            当过渡时间与延迟时间同时存在时,第一个时间为过渡时间,第二个时间为延迟时间

transition: 1s ease-in;
transition: 1s ease-out;
transition: 1s ease-in-out;
transition: 1s cubic-bezier(.24,1.36,.95,-1.2) 2s;
transition: 1s 1s background ,1s width 2s; /*多组值同时存在时,两组时间不能挨着*/
transition: 1s 3s all;

      6. webkit内核有效 谷歌,safir中有效
                文字描边
                        -webkit-text-stroke
                        参数1:描边大小

                        参数2:描边颜色

/*文字描边*/
-webkit-text-stroke: 1px pink;
color: #fff;
/*过渡*/
transition: 1s;

 2D装换 transform :想要装换什么效果就是用什么函数

        1. rotate(度数) 旋转
                单位: 度数  deg
                正值:顺时针旋转

                负值:逆时针旋转

transform: rotate(30deg);
transform: rotate(60deg);
transform: rotate(90deg);
transform: rotate(180deg);
transform: rotate(360deg);
transform: rotate(3600deg);
transform: rotate(-45deg);

        2. skew(度数)倾斜
                按照一定的角度进行倾斜
                单位 度数 deg
            一个值:
                默认沿着x轴倾斜一定角度
                transform:skew(30deg);
                    正值:往左倾斜了x度
                    负值:往右倾斜x度
            两个值:
                transform:skew(30deg,60deg);
                第一个值为x轴,第二个值为y轴
            skewX x轴倾斜

            skewY y轴倾斜

/*倾斜*/
 transform: skew(30deg);
 transform: skew(45deg);
 transform: skew(60deg);
 transform: skew(90deg);
 transform: skew(360deg);
 transform: skew(-360deg);
 transform: skew(0deg,30deg);
 transform: skew(0deg,60deg);
 transform: skew(0deg,90deg);
 transform: skew(0deg,180deg);
 transform: skew(45deg,45deg);
 transform: skew(90deg,90deg);
 /*transform: skew(30deg,30deg);*/

 transform: skewY(45deg);
 transform: skewX(45deg);

   3. scale(倍数) 缩放
            单位 倍数  没有单位
            一个值
                transform:scale(2); 宽,高一起放大2倍
            两个值
                transform: scale(1,2); 第一个值为宽的缩放倍数,第二个值为高的缩放倍数
            整数 正常方法
            负数 反过来放大
            0~1之间是缩小
            >1是放大
       scaleX 宽缩放

       scaleY 高缩放

transform: scale(2);
transform: scale(1,2);
transform: scale(3,2);
transform: scale(-3,2);
transform: scale(-2);
transform: scale(1,.5);
transform: scale(0);

transform: scaleX(2);
transform: scaleY(.1);

    translate(值) 位移
              单位: px
                  一个值 x轴移动
                  两个值 第一个值为x轴,第二个值为y轴
            translateX x轴位移

            translateY y轴位移

.box:hover .div2{
    transform: translate(50px);
    transform: translate(100px,100px);
}
.box:hover .div3{
    transform: translate(-50px,100px);
    transform: translate(100px,-200px);
}
.box:hover .div4{
    transform: translateX(100px);
    transform: translateY(100px);
}

       transform 2d合并

                执行顺序:先写后执行,后些的先执行

.box:hover .div1{
    transform: translate(100px,100px) scale(2);
}
.box:hover .div2{
    transform: scale(2) translate(100px,100px);/*先进行位移,效果更准确*/
}