[持续更新]CSS3学习笔记(二)渐变&圆角&阴影&变换&动画
来源:互联网 发布:python cmd命令 编辑:程序博客网 时间:2024/05/17 05:17
1. 颜色模式
在网页中常见的颜色模式有:RGB,HSLA。
RGB 大家不陌生,分别代表red,green,blue。使用6位16进制数表示。#00FF00;
RGBA 就说多了一个Aplha透明通道。这个数值用0~1的数字来表示。rbga(255,255,255,0.3);
HSLA 分别代表色调Hue,饱和度Saturation,亮度Light,透明度Alpha。
但是在实际应用中,通常是HSLA调整颜色,之后转换成rbg的颜色模式表示。
在兼容方面:IE8及以下版本不支持HSLA颜色表示法。
IE6及之前的版本不支持RGBA的,可以使用IE特有的滤镜来添加效果。
如果是图片,指定透明度使用opacity属性,该属性值也是0~1的数。
.image{filter:Alpha(Opacity);/IE兼容代码/opacity:0.2}<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>
2. 渐变
CSS3中新增的渐变可以说是使用CSS来代替图片完成美化效果,减少图片使用。
渐变分为线性渐变(linear-gradient),和发射渐变(radial-grandient)。
线性渐变语法:
background:linear-gradient(方向,开始颜色,结束颜色);
方向默认是从上到下渐变,可以指定left/to right, 还可以指定角度0deg, 或者左下角bottom left等,颜色可以指定多个,还可以对每部分颜色指定宽度等;
background:linear-gradient(red,blue);background:linear-gradient(left,red,blue);background:linear-gradient(45deg,red,blue);background:linear-gradient(red,blue);background:linear-gradient(45deg,red,blue);background:linear-gradient(bottom left, red,blue);background:linear-gradient(left, red 15%,orange 15%,blue 70%);<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>
另外,该属性需要写明浏览器特有的标识,下面给出一个彩虹色的css渐变。
. linear-gradient { background:-webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet); background:-o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet); background:-moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet); background:linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);}<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>
放射渐变跟线性渐变差不多,第一个参数为中心店位置,默认为中心。
#radial-gradient { width: 300px; height: 300px; float: left; border-radius:50%; background:-webkit-radial-gradient(bottom left,red,orange,yellow,green,blue,indigo,violet); background:-o-radial-gradient(bottom left,red,orange,yellow,green,blue,indigo,violet); background:-moz-radial-gradient(bottom left,red,orange,yellow,green,blue,indigo,violet); background:radial-gradient(bottom left,red,orange,yellow,green,blue,indigo,violet);}<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>
在实际的工作中,渐变变得很有用。比如Bootstrap的按钮背景色就是渐变色,这样使得按钮有一种立体感,使人更容易点击。
3. 圆角和阴影
圆角属性:border-radius,该属性的值可以是像素,也可以是百分比。注意的是,当元素长宽比为1:1时,圆角值为50%即为原型,并且圆角值不会比50%更大。圆角的值不能超过长宽比的一半。
.radius {border-radius:20px;/4个角都是相同的值/-moz- border-radius:20px;/支持老版本FF/-webkit- border-radius:20px;/支持老版本webkit内核/}
也可指定4个角不同的圆角值。
.radius {border-top-left-radius:20px;/左上/border-top-right-radius:20px;/右上/border-bottom-left-radius:20px;/左下/border-bottom-right-radius:20px;/右下/}<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>
边框阴影跟之前讲的文字阴影很像。IE6~8不支持。
语法:box-shadow:{color 水平偏移垂直偏移 模糊距离 阴影尺寸 inset};
属性ps的同学可能会对这几个值比较熟悉,因为这些值也是ps中设置阴影的必须值。简单来说:
inset 内部阴影,可选为outset 外部阴影。决定阴影是对外还是对内。
水平偏移:阴影向右便宜的距离,负值表示向左。
阴影尺寸:就是阴影向外延伸出去的长度。
模糊距离:相当于是对阴影尺寸做了渐变,渐变长度就是设定的值。
另外,和边框不同的是,阴影是不占空间的。
3.变换和动画
CSS3中大家了解最多的要数其新增的变换和动画效果,新的属性可是实现以前只有javascript才能实现的效果,简化了网页编写的工作,提升了开发效率,当然也是十分的酷炫,而且节省流量。
1. 变换(transform)
transform属性有很多值:旋转(rotate),扭曲(skew),位移(translate),缩放(scale)。
1.1 rotate旋转变换
简单的2D旋转:会将元素按照中轴线顺时针旋转指定的角度。
.rotate { transform:rotate(20deg); -ms-transform:rotate(20deg);/* IE9 */ -moz-transform:rotate(20deg); -webkit-transform:rotate(20deg); -o-transform:rotate(20deg);}<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>
还可使用rotateX沿X轴向上旋转,rotateY沿Y轴向上旋转
.rotateX { transform:rotateX(20deg); -ms-transform:rotateX(20deg);/* IE9 */ -moz-transform:rotateX(20deg); -webkit-transform:rotateX(20deg); -o-transform:rotateX(20deg);}<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>
这里要注意的是,我们直观地感受就是在使用rotateX时,元素在纵向被压缩了,其实是元素的上半部分向内凹陷,下半部分向外突出形成的一种旋转效果。
复杂的3D效果:元素会沿着xyz轴构建向量,最后偏转一定角度。
rotate3d { transform:rotate3d(1,0,0,10deg); -ms-transform:rotate3d(0,1,0,10deg); -moz-transform:rotate3d(0,0,1,10deg); -webkit-transform:rotate3d(1,1,1,10deg); -o-transform:rotate3d(0,0,0,10deg);}<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>
这里需要理解下:rotate3d共接受四个值,前三个值分别代表xyz是否旋转,1代表旋转,0代表不旋转;最后一个是旋转的角度。例子中的transform:rotate3d(1,0,0,10deg);其实就等价于transform:rotateX(10deg);当xyz轴都旋转时,相当于整个模型旋转。
这个还是比较抽象,需要具有一定的空间想象力。
不懂的可以看看这个:
http://jingyan.baidu.com/article/d621e8da0aa7192865913f05.html
1.2 skew扭曲变换
用过ps的同学会对这些熟悉些:
.skew { transform:skew(30deg,10deg);}
该属性接受两个参数:第一个参数是元素的中轴线沿着当前的中轴线逆时针旋转的角度,元素的水平线不变,第二个参数正好相反。
也可使用skewX,和skewY单一方向变换。
该属性不支持3D效果。
1.3 scale比例缩放
按照比例缩放:
.scale { transform:scale(1.1,0.8);}
该段代码表示元素按照原尺寸分别在横向和纵向上放大到1.1,0.8倍。
也可使用scaleX,scaleY,scaleZ在单个方向上缩放,不过会造成拉伸,图像失真。
1.4 translate位移变换
translate就是平面上的xy轴位移
.translate { transform:translate(100px,200px);}<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>
也可使用translateX,translateY,translateZ,当方向位移。
2. 渐变(transition)
.transition { height: 200px; transition:height 1.0s;}.transition:hover { height: 500px;}
这个属性有点类似jquery的animaite属性,是一种简单的动画。
元素的高度200,当鼠标在其上悬停时高度变为500,这是一个瞬间的效果,用了该属性会是这个过程在1.0s内完成,这样我们看到的就是一个动画。
如果要同时改变多个属性,使用逗号隔开。
transition: width 1.0s, height 1.0s;
transition还可选择多种动画函数:
ease 逐渐变慢 默认;
linear 匀速
ease-in 加速
ease-out 减速
ease-in-out减速然后减速
cubic-bezier 自定义一个时间曲线
transition:all 0.5s ease-in-out 1s;/*1s表示动画的延迟时间*/<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>
3. 关键帧(@keyframes)
使用关键帧来完成动画效果。
<!DOCTYPE html><head><meta charset="utf-8"><title>animation</title><style type="text/css">#keyframes{ width:200px; height: 200px; background-color: red; float: left; position: relative; animation:myAnimate 5s infinite alternate; -webkit-animation:myAnimate 5s infinite alternate;}@keyframes myAnimate { 0% {background-color: red;left: 0px; top: 0px;} 25% {background-color: red;left: 100px; top: 0px;} 50% {background-color: red;left: 100px; top: 100px;} 75% {background-color: red;left: 200px; top: 200px;} 100% {background-color: blue;left: 200px; top: 200px;}}@-webkit-keyframes myAnimate { 0% {background-color: red;left: 0px; top: 0px;} 25% {background-color: red;left: 100px; top: 0px;} 50% {background-color: red;left: 100px; top: 100px;} 75% {background-color: red;left: 200px; top: 200px;} 100% {background-color: blue;left: 200px; top: 200px;}} </style></head><body><div id="keyframes"> </div></body></html>
属性anmiation后面跟上动画名,动画执行一次的时间,动画训话的次数(infinite表示循环alertnate表示动画完成之后反向执行),和动画执行的速度(transition中的速度函数一致)。
@keyframes后面紧跟动画名称来定义动画,定义动画的每步执行操作。
也可为元素添加属性:
animate-play-state:paused;/*running用于启动动画*/-webkit-animate-play-state:paused;
通过javascript容易来控制动画的暂停。
- [持续更新]CSS3学习笔记(二)渐变&圆角&阴影&变换&动画
- CSS3-阴影、倒影、渐变学习笔记
- css3渐变,圆角,阴影
- ——CSS3新特性(阴影、动画、渐变)
- [持续更新]JavaScript学习笔记(二)
- [持续更新]HTML5学习笔记(二)
- [持续更新]CSS3学习笔记(三)弹性盒子
- css3 阴影box-shadow transition渐变 transform变换
- 《CSS3实战》笔记--渐变设计(二)
- Unity动画系统学习笔记(持续更新...)
- CSS3基础第一篇(圆角,阴影,渐变,选择器)
- CSS3与页面布局学习总结(六)——CSS3新特性(阴影、动画、渐变、变形、伪元素等)
- css3渐变和阴影
- iOS学习笔记总结二(持续更新)
- CSS3学习站点,持续更新~
- IE低版本浏览器支持CSS3属性(圆角、阴影、渐变等)(CSS3 PIE)
- [持续更新]CSS3学习笔记(一)伪类选择器&自定义字体&背景图片
- css3学习笔记(二)
- Android studio快捷键设置为Eclipse风格
- Linux2.6.32移植到MINI2440(3)支持yaffs2文件系统
- 【2014-2015】是什么让我遇见了你们
- 使用 HTML5 input 类型提升移动端输入体验
- 申请了百度云计算空间BAE
- [持续更新]CSS3学习笔记(二)渐变&圆角&阴影&变换&动画
- 用HttpUrlConnection抓取网页内容
- 【more effective c++读书笔记】【第5章】技术(5)——Reference counting(引用计数)(2)
- 第一周项目:宣告主权
- poj 3252 数位dp(Round Number)
- 第2周项目0--打招呼
- 网口自协商
- [推荐]Java开发中的23种设计模式
- 紫影龙的编程日记 —— STL 应用技术