CSS-随记css3

小球从左到右匀速

让一个小球在2s之内匀速从左边移动到页面右边并且停留在页面右边

<div class="ball"></div>

.ball {
            position: relative;
            animation: move 2s linear;
            width: 200px;
            height: 200px;
            background-color: skyblue;
            border-radius: 100px;
            animation-fill-mode: forwards;
        }

        @keyframes move {
            0% {
                left: 0;
                top: 0;
            }

            100% {
                left: 100%;
                top: 0;
            }
        }

三角形的实现

		/* 直角三角 */
        .box {
            width: 0;
            height: 0;
            border: 10px solid;
            border-color: transparent transparent red red;
        }

        /* 上三角 */
        .top {
            width: 0;
            height: 0;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
            border-bottom: 30px solid pink;
        }

        /* 下三角 */
        .bottom {
            width: 0;
            height: 0;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
            border-top: 30px solid yellow;
        }

        /* 左三角 */
        .left {
            width: 0;
            height: 0;
            border-top: 30px solid transparent;
            border-bottom: 30px solid transparent;
            border-right: 30px solid lightsalmon;
        }

        /* 右三角 */
        .right {
            width: 0;
            height: 0;
            border-top: 30px solid transparent;
            border-bottom: 30px solid transparent;
            border-left: 30px solid lightcoral;
        }

zoom和scale

面试时候被问到了这两个的区别，但是并没有了解过，所以现在来针对性的了解一下。
首先，这两个都是可以进行缩放的，看例子
首先来看一下scale

下面是使用scale进行缩放之后的盒子

下面是使用zoom进行缩放之后的盒子

得出总结：

• zoom是左上角缩放，scale是默认中心缩放。
• scale可以通过transform-origin来改变缩放焦点。
• zoom缩放只可以是证书，scale可以是负数。
• scale缩放之后仍然会占据文档流。zoom会引起整个页面的重绘。
• zoom缩放之后，用js获取仍然是缩放前的宽高，scale缩放之后，用js获取是缩放之后的宽高。

border渐变

.box{
			     width: 100px;
			     height: 100px;
			     border:10px solid #ddd;
			     /* border-image: -webkit-linear-gradient(#ddd,#000) 30 30;
			     border-image: -moz-linear-gradient(#ddd,#000) 30 30; */
			     border-image: linear-gradient(#ddd,#000) 20 30;
			}

.box{
				width: 200px;
				height: 200px;
				background-image: linear-gradient(to right,pink,skyblue);
			}

线性渐变：在一条直线上从一个颜色过渡到另一个颜色
background-image: linear-gradient( 角度 , 颜色);