CSS3学习

//首先CSS3的简介，过渡。
-webkit-transition: all 2s;/*低版本chrome和safie*/
            -moz-transition: all 2s;/*低版本火狐*/
            -o-transition: all 2s;/*低版本欧朋*/

            /*JS里面不支持 -- ，横杠去掉，字母变大写MoZtransition*/

//CSS3属性选择器
//CSS3新增自定义属性，aa是自定义属性。也可以替换成class

p[aa]//选中p元素并且类名为aa的元素

p[aa='k']//P元素类名为aa，类值为kk

p[a~='old']//指定类名，类值是一个词列表，且包含old

p[aa^='g']//类名开头为g

p[aa$='d']//类名结束为d

p[aa*='n']//属性只要包含n字符就会被选中

p[aa|='n']//类名是n||类名是 n-XX格式

//CSS3结构选择器
//even偶数，add奇数。也可以用2n来表示偶数。选择器是从0开始计数

p:nth-child(i)//找到p标签第i个子元素，并且元素类型为p

div>p:nth-of-type(odd)//计算方式为同类型

p:nth-last-child(1)//last

p:first-child{//=== nth-child(1)
 p:last-child

p:first-of-type//=== nth-child(1)
h1:last-of-type

p:empty//p元素不包括任何子节点，包括文本节点

h3:only-of-type//h3父元素仅有一个子节点，且类型为h3.

h4:only-child//h4的父元素仅为一个子节点，且类型为h4.

//下面是伪类和伪元素
//这段代码很奇怪，现在不理解

        div{
            width: 200px;
            height: 200px;
            background-color: black;
            color: whitesmoke;
            font-size: 66px;
            line-height: 200px;
            text-align: center;
            display: none;

        }
        div:target{/*target代表点击a的时候，上面产生的哈希值*//*表示突出显示活动的 HTML 锚*/
            display: block;
        }

<a href="#div1">div1</a>
<a href="#div2">div2</a>
<a href="#div3">div3</a>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>

input:enabled//表示选中可输入状态的元素

input:disabled//表示选中不可输入状态的元素

input:checked//表示选中状态的元素

p~h1//选中p元素后面的h1[同级元素]

p:first-letter//选中p元素内第一个文字

P:first-line//选中p元素内第一行文字

p::selection/按下鼠标选择文字的时候会激活。使用的属性只有bg与color

p:before{//p文字最前面
    content:'秒味';
    background-color:red;
    border:1px solid #000;

}

p:after//p元素最后面

h1:not(.h2)//选中！(class==='h2')的h2元素

//还有rgba属性
direction:rtl; ||ltr；//设置文字排版
unicode-bidi://设置文字排列方向

box-shadow: 水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影;
/*box-shadow: 10px 10px 10px 10px skyblue inset;*/

text-shadow: 0px 2px 10px red,5px 5px 10px green;
            /*左右偏移量 上下偏移量 模糊距离 模糊颜色*/

-webkit-text-stroke:2px red ;//文字描边，只有webkit浏览器才支持

/*文本强制不换行，默认是换行的*/
            white-space: nowrap;
            /*超出边框隐藏*/
            overflow: hidden;
            /*文字溢出显示省略号*/
            /*这个是省略的意思*/
            text-overflow: ellipsis;

盒模型响应式布局

box-sizing:border-box;

background: -webkit-linear-gradient(right,red 0, blue 100%);//渐变属性

/*这个是倒影属性  目前只支持webkit内核的浏览器*/
            /*第一个参数有above|below|left|right 第二个参数是两者之间的距离*/
            -webkit-box-reflect: right 10px -webkit-linear-gradient(bottom,rgba(0,0,0,1) 0, rgba(0,0,0,0) 100%);

//-webkit-box-reflect:方向 倒影间隔 倒影样式设置

//结合背景图像生成可拖拽文档
resize:both;属性规定可由用户调整元素大小的属性
overflow: auto;//需要两条结合在一起使用

新的UI方案课件

/*圆角半径*/
            border-radius: 10px 20px;/*指的是对角*/
            /*
            如果是一个值，那么 top-left、top-right、bottom-right、bottom-left 四个值相等。

如果是两个值，那么 top-left和bottom-right相等，为第一个值，top-right和bottom-left值相等，为第二个值。

如果是三个值，那么第一个值是设置top-left，而第二个值是 top-right 和 bottom-left 并且他们会相等,第三个值是设置 bottom-right。

如果是四个值，那么第一个值是设置 top-left， 而第二个值是 top-right 第三个值 bottom-right 第四个值是设置 bottom-left
            */

/*x轴半径，y轴半径。比较常见的椭圆*/
        border-radius: 100px/150px;

            //边框背景
            width: 200px;
            height: 200px;
            border: 20px solid #000;
            /*图片地址，
             border-image-slice: 20 20 20 20; //指定边框图像上，右，下，左内测偏移量。作用就是把边框图像切成9个区域：4个角、4边区域和一个中间部位，前辈们都谦虚称作9宫格，但是我悄悄跟你说哦

            */

            /*对于这个元素来说，其实也是分为了九个格子。而图片也是分为了九个格子*/
            border-image: url("../border.png");
            border-image-slice: 27 27 27 27 ;
            border-image-width: 20px;
            /*border-image-repeat: repeat;*/

            /*stretch 拉伸
            repeat 重复
            round 平铺
            */

            /*
            三种包括
            border-image-source: ; //引入图片
            border-image-slice: ; // 切割图片
            border-image-width: ; //边框背景宽度
            border-image-repeat: repeat; //图片排列方式


            */


            /*
            border-image-slice: 27;指定了上，右，下，左图片内容的偏移量。（偏移的是图片）
            关于这个元素的详尽解释： 他的作用是将边框分割为九宫格的形式，而图片也是被分为了九宫格。然后就匹配啦
            */


/*多边框颜色只支持在火狐下面实现*/
            -moz-border-left-colors: red pink green;

            /*线性渐变*/
            background-image: -webkit-linear-gradient(left ,pink 0%,red 100%);
            // -webkit-linear-gradient(渐变方向[方向||deg],pink 0%,red 100%);
            background-image: -webkit-linear-gradient(left ,pink 0%,red 100%);
background-image:-webkit-linear-gradient(left,red 0%,red 30%,green 30%,green 70%,blue 70%);//设置无偏差的颜色

            background-image: -webkit-repeating-linear-gradient(left,red 0px,blue 30px) ;//表示颜色平铺渐变

颜色平铺渐变

//还有多重背景，加逗号就可以啦

            /*ellipse表示椭圆*/
            /*circle表示圆*/
background: -webkit-radial-gradient(/*50px*/ top,circle,red,black);//径向渐变
background: -webkit-radial-gradient(50px 100px,red,black);//径向渐变

//设置背景图的大小。cover:width&&height都铺满，contain:只满足一个
background-size: 100px 200px;//cover[覆盖],contain[包含]

//背景基点设置。
background-origin: content-box;//参数:padding-box||content-box||border-box;
//背景裁切
background-clip: border-box;//设置从哪个地方开始显示，区域的都变成了白色
其中，有一个非常好玩的属性
-webkit-background-clip:text;//文字后面显示background,其余是白色[webkit,firefox,opera都已支持]

//此外还有一个遮罩效果
-webkit-mask: url(../mask.png) no-repeat;//设置背景图片都取反 n== 透明||不透明。使用mast的图片===(!n)；//主流浏览器已实现

遮罩效果

过渡和2D变换

transition:过渡属性 过渡时长 运动速度 延迟时间;
transition:width 2s, height 2s,background-color 5s;//经常与hover连用
**可以使用贝塞尔曲线**

//过渡没完成一条属性，就会触发 一次事件transition

    function addEnd(obj,fn){
        /*发生在过度完成之后*/
        obj.addEventListener('WebkitTransitionEnd',fn,false);/*在chrome下*/
        obj.addEventListener('transitionend',fn,false);/*在标准浏览器*/
    }

//2D变换
transform: rotateY(300deg);//rotateX||rotateY||rotateZ//旋转

transform: skew(30deg,90deg);//表示斜切 (X,Y)。父元素切过来，子元素还需要再切过去。

transform: scale(1.3,0.5);//X轴与Y轴缩放

transform: translate(100px,200px);//位移(X轴,Y轴，3D变换中还有Z轴)

transform-origin:0px 100px;//这个是变化基点。参数可以是方向和数值

-webkit-transform: matrix(1,0,0,1,100,200);//martix

3D变换笔记

-webkit-transform-style: preserve-3d;//建立3D空间
-webkit-perspective: 800px;//建立景深

perspective-origin: center center;//从哪个方向观看。参数是数值或者方向[X轴,Y轴]

/*运动总时间 延迟时间  关键帧的名字 运行状态 重复次数 */
            /**/
            animation: 2s 1s move ease-in infinite;

            animation-play-state: paused;//设置播放模式running

            animation-direction:alternate;/*alternate 倒序播放。[偶数次是倒回来]。normal是正常播放*/

          animation-fill-mode
        none: 不做任何改变
            forwards: 让元素结束状态保持动画最后一帧的样式
            backwards: 让元素等待状态的时候显示动画第一帧的样式
            both: 让元素等待状态显示动画第一帧的样式, 让元素结束状态保持动画最后一帧的样式

//动画执行结束会触发一个动画事件

function addEnd(obj,fn)
    {
        obj.addEventListener('webkitAnimationEnd',fn, false);
        obj.addEventListener('animationend',fn, false);
    }

a:link{*/
            /*color: green;*/
        /*}*/
        /*a:visited{*/
            /*color: green;*/
        /*}*/
        a:hover{
            color: orange;
        }
        a:active{
            color: pink;
        }

//江哥

/*a:link{*/
            /*color: green;*/
        /*}*/
        /*a:visited{*/
            /*color: green;*/
        /*}*/
        a:hover{
            color: orange;
        }
        a:active{
            color: pink;
        }

transition:过渡属性 过渡时长 运动速度 延迟时间;

transform:rotate(45deg);//代表旋转 translate(100px, 0px);//代表平移 scale(1.5,0.5)//代表缩放 (X,Y)


transform-origin: 200px 0px; //表示形变中心点

perspective: 500px;

box-shadow: 水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影;
/*box-shadow: 10px 10px 10px 10px skyblue inset;*/

animation
animation-fill-mode
        none: 不做任何改变
            forwards: 让元素结束状态保持动画最后一帧的样式
            backwards: 让元素等待状态的时候显示动画第一帧的样式
            both: 让元素等待状态显示动画第一帧的样式, 让元素结束状态保持动画最后一帧的样式

背景尺寸属性：background-size: 具体px 与% contain宽或者高填满内容  cover高和宽分别填满内容


background-origin: padding-box;border-box;content-box;
background-image: url("images/animal1.png"),url("images/animal2.png"),url("images/animal3.png");