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

选择器属性选择器:div : 标签选择器 id : ID选择器 class : 类选择器 div .p : 交集选择器 div p : 后代选择器 div>p : 子代选择器 div+p : 相邻选择...

继续学习-CSS3页面美化之静态美化

之前的网页通过修改,使用了HTML5的元素后,我们进行页面美化。 这篇文章先进行页面的静态部分美化。话不多说,先上图: 已经很好看了是不是?怎么实现的?别着急,慢慢来。 1.将标题通过:...

精选:深入理解 Docker 内部原理及网络配置

网络绝对是任何系统的核心,对于容器而言也是如此。Docker 作为目前最火的轻量级容器技术,有很多令人称道的功能,如 Docker 的镜像管理。然而,Docker的网络一直以来都比较薄弱,所以我们有必要深入了解Docker的网络知识,以满足更高的网络需求。

CSS3(三)—— CSS3背景

CSS3 背景 CSS3 包含多个新的背景属性,它们提供了对背景更强大的控制。 在本章,您将学到以下背景属性: background-sizebackground-originbackgroun...

继续学习-CSS3页面美化之让页面动起来

继昨日的美化一轮以后,页面也是蛮好看的了。但是还缺乏些动态响应。今天带来的是CSS3的动态响应。由于CSS3对于动画和变形这一部分,某些浏览器支持不好(IE),所以这里仅仅是使用Chrome来写的,使...

css3

CSS3发展史简介 HTML的诞生 20世纪90年代初 1996年底, CSS第一版诞生 1998年5月 CSS2正式发布 2004年 CSS2.1发布 CSS3的发布 200...

css3

.wrapper > * {padding: 10px;flex: 1 100%;} 还有.main { order: 2; }中的order:2是什么用的啊,后面的数字有什么意思嘛? > 是相邻的...

CSS3

CSS3边框1、CSS3边框 圆角效果 border-radius border-radius是向元素添加圆角边框。(1)圆角效果 这里采用了统一设置半径为20px的圆角。 /*...

css3

文字卡片 div.card{   width: 250px;   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 06px 20px 0 rgba(0, 0, ...

CSS3

CSS3一些属性

css3

css3新特性:CSS3 模块CSS3 被划分为模块。其中最重要的 CSS3 模块包括:选择器 框模型 背景和边框 文本效果 2D/3D 转换 动画 多列布局 用户界面 一.CSS3 边框通过 CSS...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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