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: value;

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随笔的更多相关文章

  1. CSS3随笔系列之transform(一)—— transform-origin

    transform-origin属性平时似乎用得很少,它决定了变换时依赖的原点.基本的属性特性可以参考CSS手册. 如果在H5动画项目中,用到旋转的话,它还是不能小觑的. 假如我们做一个秋千效果 其实 ...

  2. 第一个随笔,调试中,用的CSS3

    希望能在博客园很好的学习并得到技术上的提升!

  3. css3 border-image 学习随笔

    先上w3school数据: 对于分开设置如上表所示,没有疑惑.但是当缩写时: border-image:url(/i/border.png) 30 30 round; 一参:图片地址: 二参.三参:只 ...

  4. 开辟html5和css3学习随笔(2015-3-2)

    1.移动端超出指定行数隐藏并显示省略号 <!DOCTYPE html> <html> <head> <meta http-equiv="Conten ...

  5. 响应式Web设计 H5和CSS3实战(第二版)随笔

    第一章 响应式设计基础 1.弹性布局 <meta name = "viewport" content = "width = device-width"&g ...

  6. css3 常用动画 随笔

    /* animation */.a-bounce,.a-flip,.a-flash,.a-shake,.a-swing,.a-wobble,.a-ring{-webkit-animation:1s e ...

  7. 使用CSS3制作导航条和毛玻璃效果

    导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的. 本次分享的主题 ...

  8. css随笔1

    1.简单清除浏览器样式 *{        padding: 0px;        margin: 0px;    } 2.得到屏幕范围的div html,body{        width: 1 ...

  9. CSS3 3D轮播主要可以分成这样的三类

    中秋节假期这么快就没了,这几天还一直下雨,索性在家看看书.这次看的是Tom Lane的<A Tour of PostgreSQL Internals>.这篇小随笔就算做学习笔记了.园子里面 ...

随机推荐

  1. windows store app search contract

    代码如下: html: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...

  2. POJ2301+水~~~~~~

    有比这更水的么.............. #include<stdio.h> int main(){ int n; scanf("%d",&n); while ...

  3. 【NOIP 2012 开车旅行】***

    题目描述 小 A 和小 B 决定利用假期外出旅行,他们将想去的城市从 1 到 N 编号,且编号较小的 城市在编号较大的城市的西边,已知各个城市的海拔高度互不相同,记城市 i 的海拔高度为 Hi,城市 ...

  4. Java中对List集合排序的两种方法

    第一种方法,就是list中对象实现Comparable接口,代码如下: public class Person implements Comparable<Person> { privat ...

  5. tbody添加垂直滚动条

    法一: 用2个table: <table width="300" border="0" cellpadding="0" cellspa ...

  6. poj3140Contestants Division

    链接 这叫树形DP吗..?断开某条边 求剩下两颗树数权值和的差最小 dfs一遍 枚举边 查了n久 wa n次  dp数组没初始化.. 在poj上1A感觉应该挺爽 #include <iostre ...

  7. 转自 Because of you 的总结

    上下界网络流的问题严格的分,可以分为四类吧. 1:无源汇可行流  sgu 194 2:有源汇可行流  poj 2396  这题比较好,我建图建了将近200行 3:有源汇最大流  zoj 3496  这 ...

  8. 调试UnhandledExceptionFilter

    kernel32!UnhandledExceptionFilter通过判断当前进程是否附加了调试器,如果附加,就把异常交给调试器,如果没有,就把异常交给进程的UnhandledExceptionFil ...

  9. SharePoint 2010 部署 WSP 包

    转:http://www.cnblogs.com/myheaven/archive/2011/05/19/2051180.html .net在工程的下面生成了WSP包,在Debug下面.需要放到生产环 ...

  10. Read ListViewItem content from another process z

    Normal Windows GUI applications work with messages that are sent to a window or control and the cont ...