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新特性,让文本在父布局垂直居中显示

做一个小项目,有这样一个需求,站点的标题栏显示标题的时候,想让标题在父布局中居中显示,就像如下 在css3之前有这样一个属性可以控制文本的显示效果text-align : center但实际前框并不...
  • u013922681
  • u013922681
  • 2016年04月23日 14:19
  • 3976

如何创建纯CSS3下拉菜单

本节教程中我们将介绍如何只使用css3创建一个漂亮的导航下拉菜单,兼容所有主流浏览器,包括ie7,ie8当然在ie7/8浏览器中一些css3特性就不支持了,比如圆角,但是整个菜单还是可以很好地显示滴。...
  • dyllove98
  • dyllove98
  • 2013年05月25日 15:00
  • 5157

css3高级属性

css3高级属性
  • haihiaandtongtong
  • haihiaandtongtong
  • 2017年03月03日 15:11
  • 257

2-面试题-HTML5+CSS3(前端常见面试题带答案 )

HTML5+CSS3常见面试题目 1.    SGML(标准通用标记语言)和HTML(超文本标记语言),XML(可扩展标记语言)和HTML的之间有什么关系?                  ...
  • u013418331
  • u013418331
  • 2016年11月13日 11:31
  • 7409

css3实现冲击波效果

近日,很多浏览器按钮点击会出现以下冲击波效果,出于好奇,参考网上的资料,将这个效果研究实现下。         实现思路: 观察波由小变大,涉及的css3属性变化有width,height,l...
  • u014029186
  • u014029186
  • 2016年11月07日 15:33
  • 788

CSS3代码编写规范及注意要点

CSS3编码规范及注意要点 语法: 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法。为选择器分组时,将单独的选择器单独放在一行。为了代码的易读性,在每个声...
  • sinat_34719507
  • sinat_34719507
  • 2016年12月27日 01:43
  • 1819

常用的css3新特性总结(工作中不断更新中)

1:CSS3阴影 box-shadow的使用和技巧总结 参考CSS3阴影 box-shadow的使用和技巧总结 2:实现多行文本超出显示…(火狐浏览器不支持) display:-webkit-bo...
  • yangjidaimin
  • yangjidaimin
  • 2016年11月20日 22:36
  • 1715

css3--display:table-cell

display:table-cell   1、和vertical-align:middle合用  实现不管是两行文字还是一行文字都居中对齐 相当于把其他标签 变成td标签 td里 margin失效 可...
  • sevenbblythelulu
  • sevenbblythelulu
  • 2015年09月14日 16:13
  • 617

【CSS3】变形--缩放 scale()

缩放 scale()函数 让元素根据中心原点对对象进行缩放。 缩放 scale 具有三种情况: 1、 scale(X,Y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放) ...
  • happyhaojie
  • happyhaojie
  • 2016年02月24日 15:41
  • 525

用css3动画来实现物体上下跳动的效果

用几行简单的代码实现上下跳动的效果: html部分 (我就先放了一张图片) css部分: * { margin: 0; ...
  • yx_cos
  • yx_cos
  • 2017年05月15日 14:48
  • 3836
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3
举报原因:
原因补充:

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