css3

原创 2016年08月30日 19:27:09

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>



相关文章推荐

css3、html5、js笔记(传智播客)

  • 2017年11月20日 14:52
  • 36.29MB
  • 下载

CSS3秘笈 第3版

  • 2017年11月23日 22:32
  • 110.95MB
  • 下载

【CSS3】多款炫酷鼠标悬停图文动画效果

演示效果:HTML代码如下:
  • zuncle
  • zuncle
  • 2017年03月17日 17:24
  • 883

HTML5+CSS3+jquery应用之美

  • 2017年11月15日 10:35
  • 72.94MB
  • 下载

CSS3 工具推荐(不断更)

收集一些实用的CSS工具,不断更新中,请持续关注。 一、代码生成工具 1.CSS Matic CSSmatic是一个非营利性的 CSS 工具,目前包含4个很有用的工具,分别是:支持各种...
  • whqet
  • whqet
  • 2013年05月14日 14:05
  • 4347

纯css3编写的小车

  • 2017年11月08日 13:26
  • 1KB
  • 下载

css3制作立方体旋转

  • 2017年10月31日 16:27
  • 756KB
  • 下载

使用css3将一个div水平和垂直居中显示

使用css3将一个div水平和垂直居中显示 方案一: div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】, 代码两个关键点:1.上下左右均0位置定位; ...

CSS3自行车动画特效

  • 2017年10月31日 16:25
  • 4KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3
举报原因:
原因补充:

(最多只允许输入30个字)