1、渐进线
background: linear-gradient(to right,red 90%,yellow);
background: radial-gradient(at center,rgba(0,0,0,0.2),rgba(0,0,0,0.8));
-webkit-box-reflect:below 10px linear-gradient(to bottom,rgba(0,0,0,0) 40%,rgba(0,0,0,0.4) 70%,rgba(0,0,0,0.7))
2、倒影
box-reflext
三个参数:第一个是倒影显示在元素的什么位置,below(下),above(上),right,left,
第二个参数:倒影和原图中间的间距
第三个参数:渐变(通常这里对透明度做一个渐变操作
文字倒影:水平方向:给个宽度,能够承载原文字和倒影
p{-webkit-box-reflect: right 10px;width: 100px;margin-left: 100px;}
3、过度
div{width: 200px;height: 200px;background: red;
/*transition-property: all;*/
/*transition-property:选择属性,一旦写了某个具体的属性,
只有在这个属性值发生变化的时候才会用过度的形式
* */
/*transition-duration: 4s;*/
/*过度持续的时间*/
/*transition-delay: 1s;*/
/*延时执行*/
/*transition-timing-function: cubic-bezier(0.12, 0.96, 0.3, 1.02);*/
/*贝塞尔曲线*/
/*速度曲线*/
transition: all 3s cubic-bezier(1,2.01,.68,.24) 1s; //第一时间是动画时间 第二时间是延时时间
}
/*过度:就是元素一个元素从一种状态过度到另一种状态*/
div:hover{margin-left: 600px;background: yellow;}
4、2D
#main{transform-style: preserve-3d;perspective: 1000px;}
div{width: 200px;height: 200px;background: red;
border: 1px solid black;
/*设置变形的基准点*/
/*transform-origin: center;
transform-origin: left center;
transform-origin: 40% 50%;*/
transition: all 1s ease-in-out;
transform-origin: center;
backface-visibility: hidden;
}
div:hover{transform: rotateX(180deg);}
/*变形:transform
transform包括各种变形:translate,translateX,translateY(移动,px值)
scale,scaleX,scaleY(缩放,就写一个数,比例)
rotate,rotateX,rotateY,rotateZ(旋转,数度数单位deg)
skew,skewX,skewY(倾斜deg)
* */
html：
<main id='main'>
<div>阿斯顿发生的发生的发生的发sdf</div>
</main>
