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. 关于Spring运用过程中jar包报错问题

    使用Spring进行web开发时,第一步就是导入jar包,今天使用SPring Task开发定时器时,导入了好多次jar包,都是报错,不知道是因为jar包版本不同还是因为需要依赖的jar包没加入,反正 ...

  2. Oracle中的触发器

    创建触发器的语法: Create trigger 触发器的名字 after insert/update/delete/(select是没有触发器的) on 表名字 declare begin dbms ...

  3. python中的reduce

    python中的reduce内建函数是一个二元操作函数,他用来将一个数据集合(链表,元组等)中的所有数据进行下列操作:用传给reduce中的函数 func()(必须是一个二元操作函数)先对集合中的第1 ...

  4. BZOJ 3971 Матрёшка 解题报告

    很自然想到区间 DP. 设 $Dp[i][j]$ 表示把区间 $[i, j]$ 内的套娃合并成一个所需要的代价,那么有: $Dp[i][i] = 0$ $Dp[i][j] = min\{Dp[i][k ...

  5. ANGULAR 2 FOR REACT DEVELOPERS

    Now that Angular 2 is in beta, the time has come for us to drop everything and learn something new, ...

  6. su: /bin/bash: Permission denied

    https://bbs.archlinux.org/viewtopic.php?id=105541 New user created as: groupadd mygroupuseradd -s /b ...

  7. 【NOIP 2015 DAY2 T3】 运输计划 (树链剖分-LCA)

    题目背景 公元 2044 年,人类进入了宇宙纪元. 题目描述 L 国有 n 个星球,还有 n-1 条双向航道,每条航道建立在两个星球之间,这 n-1 条航道连通了 L 国的所有星球. 小 P 掌管一家 ...

  8. 九度 链表中倒数第k个结点

    /* * a.cpp * * Created on: 2013-10-7 * Author: wangzhu */ #include<cstdio> #include<iostrea ...

  9. LINUX下安装PHP(CGI模式)和NGINX[转]

    安装所需依赖 yum -y install gcc gcc-c++ autoconf libjpeg libjpeg-devel libpng libpng-devel freetype freety ...

  10. 【HDOJ】1254 推箱子

    来一发搜索.数据量比较小,这么玩儿都能ac.搞个优先队列.先扫描从起点可以到达箱子的上下左右中哪些位置,并针对这些位置进行bfs.所谓推,就是箱子和人同向移动一个单位.bfs的时候注意一些限制条件就好 ...