css3随笔
1 rgba和opacity的区别
RGBA即红色R+绿色G+蓝色B+通道Alpha
语法:
R:红色值。正整数 | 百分数
G:绿色值。正整数 | 百分数
B:蓝色值。正整数| 百分数
A:透明度。取值0~1之间
RGB色彩模式(也翻译为“红绿蓝”,比较少用)是工业界的一种颜色标准,是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,RGB即是代表红、绿、蓝三个通道的颜色,这个标准几乎包括了人类视力所能感知的所有颜色,是目前运用最广的颜色系统之一。
opacity后代元素会随着一起具有透明性,所以我们Opacity中的字随着透明值下降越来越看不清楚,而RGBA不具有这样的问题,RGBA比元素设置CSS的透明度更好,因为单独的颜色可以在不影响整个元素的透明度,他不会影响到元素其他的属性,比如说边框,字体同时也不会影响到其他元素的相关透明度。
opacity会继承父元素的 opacity 属性,而RGBA设置的元素的后代元素不会继承不透明属性。
2 animation动画
div
{
animation: myfirst 20s ease-out infinite alternate;
-webkit-animation: myfirst 20s ease-out infinite alternate; /* Safari 与 Chrome */
}
@keyframes myfirst
{
0%,25% { left: 0px; }
30%,50% { left: -700px; }
55%,75% { left: -1400px; }
80%,100% { left: -2100px; }
}
属性 | 描述 | CSS |
---|---|---|
@keyframes | 规定动画。 | 3 |
animation | 所有动画属性的简写属性,除了 animation-play-state 属性。 | 3 |
animation-name | 规定 @keyframes 动画的名称。 | 3 |
animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 | 3 |
animation-timing-function | 规定动画的速度曲线。默认是 "ease"。 | 3 |
animation-delay | 规定动画何时开始。默认是 0。 | 3 |
animation-iteration-count | 规定动画被播放的次数。默认是 1。 | 3 |
animation-direction | 规定动画是否在下一周期逆向地播放。默认是 "normal"。 | 3 |
animation-play-state | 规定动画是否正在运行或暂停。默认是 "running"。 | 3 |
animation-timing-function使用的数学函数,称为三次贝塞尔曲线,速度曲线。使用此函数,您可以使用您自己的值,或使用预先定义的值之一:
linear | 动画从头到尾的速度是相同的。 | |
ease | 默认。动画以低速开始,然后加快,在结束前变慢。 | |
ease-in | 动画以低速开始。 | |
ease-out | 动画以低速结束。 | |
ease-in-out | 动画以低速开始和结束。 |
animation-direction 属性定义是否循环交替反向播放动画。
注意:如果动画被设置为只播放一次,该属性将不起作用。
normal | 默认值。动画按正常播放。 | |
reverse | 动画反向播放。 | |
alternate | 动画在奇数次(1、3、5...)正向播放,在偶数次(2、4、6...)反向播放。 | |
alternate-reverse | 动画在奇数次(1、3、5...)反向播放,在偶数次(2、4、6...)正向播放。 |
通过 @keyframes 规则,能够创建动画。
创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。
在动画过程中,能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于 0% 和 100%。
0% 是动画的开始时间,100% 动画的结束时间。
为了获得最佳的浏览器支持,应该始终定义 0% 和 100% 选择器。
注释:请使用动画属性来控制动画的外观,同时将动画与选择器绑定。
指定至少这两个CSS3的动画属性绑定向一个选择器:
- 规定动画的名称
- 规定动画的时长
3 transform(转换)
div
{
transform: rotate(45deg);
transform-origin:20% 40%;
}
transform-Origin属性允许您更改转换元素的位置。
2D转换元素可以改变元素的X和Y轴。 3D转换元素,还可以更改元素的Z轴。
默认值是50% 50%;意思是这个元素规定的高宽的50%。即中心。
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) |
定义 3D 转换,使用 16 个值的 4x4 矩阵。 |
translate3d(x,y,z) | 定义 3D 转化。 |
translateX(x) | 定义 3D 转化,仅使用用于 X 轴的值。 |
translateY(y) | 定义 3D 转化,仅使用用于 Y 轴的值。 |
translateZ(z) | 定义 3D 转化,仅使用用于 Z 轴的值。 |
scale3d(x,y,z) | 定义 3D 缩放转换。 |
scaleX(x) | 定义 3D 缩放转换,通过给定一个 X 轴的值。 |
scaleY(y) | 定义 3D 缩放转换,通过给定一个 Y 轴的值。 |
scaleZ(z) | 定义 3D 缩放转换,通过给定一个 Z 轴的值。 |
rotate3d(x,y,z,angle) | 定义 3D 旋转。 |
rotateX(angle) | 定义沿 X 轴的 3D 旋转。 |
rotateY(angle) | 定义沿 Y 轴的 3D 旋转。 |
rotateZ(angle) | 定义沿 Z 轴的 3D 旋转。 |
perspective(n) | 定义 3D 转换元素的透视视图。 |
css3随笔的更多相关文章
- CSS3随笔系列之transform(一)—— transform-origin
transform-origin属性平时似乎用得很少,它决定了变换时依赖的原点.基本的属性特性可以参考CSS手册. 如果在H5动画项目中,用到旋转的话,它还是不能小觑的. 假如我们做一个秋千效果 其实 ...
- 第一个随笔,调试中,用的CSS3
希望能在博客园很好的学习并得到技术上的提升!
- css3 border-image 学习随笔
先上w3school数据: 对于分开设置如上表所示,没有疑惑.但是当缩写时: border-image:url(/i/border.png) 30 30 round; 一参:图片地址: 二参.三参:只 ...
- 开辟html5和css3学习随笔(2015-3-2)
1.移动端超出指定行数隐藏并显示省略号 <!DOCTYPE html> <html> <head> <meta http-equiv="Conten ...
- 响应式Web设计 H5和CSS3实战(第二版)随笔
第一章 响应式设计基础 1.弹性布局 <meta name = "viewport" content = "width = device-width"&g ...
- css3 常用动画 随笔
/* animation */.a-bounce,.a-flip,.a-flash,.a-shake,.a-swing,.a-wobble,.a-ring{-webkit-animation:1s e ...
- 使用CSS3制作导航条和毛玻璃效果
导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的. 本次分享的主题 ...
- css随笔1
1.简单清除浏览器样式 *{ padding: 0px; margin: 0px; } 2.得到屏幕范围的div html,body{ width: 1 ...
- CSS3 3D轮播主要可以分成这样的三类
中秋节假期这么快就没了,这几天还一直下雨,索性在家看看书.这次看的是Tom Lane的<A Tour of PostgreSQL Internals>.这篇小随笔就算做学习笔记了.园子里面 ...
随机推荐
- iOS 7隐藏statusbar
- (BOOL)prefersStatusBarHidden { return YES; } [[UIApplication sharedApplication] setStatusBarHidden ...
- Hadoop集群(第5期副刊)_JDK和SSH无密码配置
1.Linux配置java环境变量 1.1 原文出处 地址:http://blog.csdn.net/jiedushi/article/details/6672894 1.2 解压安装jdk 在she ...
- apt-get用法
转自apt-get语法- - 对于debian来说,安装软件大多都是通过apt-get来实现的. 1.apt-get update 更新软件包信息库.在Debian中,软件包是通过一个数据库来管理的, ...
- php访问类静态属性
在类的外部,如果要使用到类的静态变量,则可以使用 :: 操作符. <?php class A { static $x = 10; function test() { echo self::$x; ...
- memcached远程 telnet 无法连接,解决方案
因为默认的Memcached配置,使用了本机ip:127.0.0.1 ,此时利用VI修改下配置 vi /etc/memcached.conf 文件打开后,修改下,把-l前面加入#号注释掉,重启服务器就 ...
- easyui源码翻译1.32--Window(窗口)
前言 扩展自$.fn.panel.defaults.使用$.fn.window.defaults重写默认值对象.下载该插件翻译源码 窗口控件是一个浮动和可拖拽的面板可以用作应用程序窗口.默认情况下,窗 ...
- Java-Swing嵌入浏览器(二)
这是qtjambi利用webview来做嵌入式浏览器,下面是我的工程目录. 运行效果如下图: 代码相关: package qtBowers; import com.trolltech.qt.core. ...
- Android fragment 回调函数改进
由于fragment的onResume()等回调的调用时机与Activity不一样,导致用起来比较麻烦,所以我重新封装了一下回调函数,十分简单. 使用时只需要继承此基类,使用onFragmentXXX ...
- JAVA bean与XML互转的利器---XStream
最近在项目中遇到了JAVA bean 和XML互转的需求, 本来准备循规蹈矩使用dom4j忽然想起来之前曾接触过的XStream, 一番研究豁然开朗,利器啊利器, 下来就XStream的一些用法与大家 ...
- hdu4734F(x)(dp)
http://acm.hdu.edu.cn/showproblem.php?pid=4734 各种不细心啊 居然算的所有和最大值会小于1024... 第二次做数位DP 不是太熟 #include ...