粉阿吉整理(8)之------CSS3的2D与3D

c3的2D与3D

- 2D

与背景相关的样式
background-clip:   指定背景的显示范围/裁切位置border-box/padding-box/content-box
background-origin: 指定绘制背景图像时的起点 border-box/padding-box/content-box 
background-size:   指定背景中图像的尺寸 auto | <长度值> | <百分比> | cover | contain 
  1. 在一个元素中添加多张背景图片,第一个定义的背景图片在最上面的,最后定义的是在最下面的
  2. 使用background-repeat和background-position可以单独指定背景图像中某个文件的平铺方式放置位置
  3. 缩写时,background-size必须写在background-position后,且用 / 链接。

1.1 渐变 CSS3 Gradient

CSS3 Gradient

  • 分为线性渐变(linear)径向渐变(radial),不同的渲染引擎实现渐变的语法不同。
  • 为了创建一个线性渐变,必须至少定义两种颜色结点。颜色结点即想要呈现平稳过渡的颜色。同时,也可以设置一个起点和一个方向(或一个角度)第一个参数指定渐变方向,可以用“角度”关键词或“英文”表示
linear-gradient(to bottom, #fff ,#999)

/* linear-gradient 渐变类型,径向为radial-gradient
* to bottom  渐变方向,等价为180deg
* #fff,#999  表示颜色的起始点和结束点,可以有两至多个色值
*/
角度 用英文 作用
0deg to top 从下向上
90deg to right 从左向右
180deg to bottom 从上向下
270deg to left 从右向左
to top left 右下角向左上角
to top right 左下角向右上角
#grad{
     
	background:-webkit-linear-gradient(left,red,blue) /* Safari 5.1-6.0 */
	background:-o-linear-gradient(right,red,blue)  /* Opera 11.1-12.0 */
	background:-moz-linear-gradient(right,red,blue)  /* Firefox 3.6-15 */
	background:linear-gradient(to right,red,blue)  /* 标准的语法 */
}

第一个参数省略时,默认为“180deg”,等同于“to bottom”。
第二个和第三个参数,表示颜色的起始点和结束点,可以有多个颜色值。
background-image:linear-gradient(to left, red,orange,yellow,green,blue,indigo,violet);

1.2 透明度Transparency

CSS3 渐变也支持透明度,可用于创建减弱变淡的效果。
为了添加透明度,我们使用 rgba() 来定义颜色结点
rgba() 中的最后一个参数可以是从 0 到 1 的值,它定义了颜色的透明度:0完全透明,1完全不透明。

  • c3新提的属性值,要把前缀加在属性值前,属性就加给属性
    粉阿吉整理(8)之------CSS3的2D与3D_第1张图片
    repeating-linear-gradient() 函数用于重复线性渐变
#grad {
     
background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);  
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);  
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%); /* 标准的语法 */
background: repeating-linear-gradient(red, yellow 10%, green 20%); 
 }

1.3 径向渐变radial

background: radial-gradient(center, shape size, start-color, ..., last-color); 

渐变的形状是 ellipse 表示椭圆 circle 圆

福利来咯,终极CSS渐变生成器在此!

1.4 IE渐变

IE浏览器实现渐变只能使用IE自己的滤镜去实现,兼容ie,复制这个就好

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffff,endColorstr=#9fffff,grandientType=1);  
/*
*第一个参数:渐变起始位置的颜色         
*第二个参数:渐变终止位置的颜色         
*第三个参数:渐变的类型    0 代表竖向渐变   1  代表横向渐变
*/

2.1 2D变换

它如何工作? 转换是使元素改变形状、尺寸和位置的一种效果,可以使用 2D 或 3D 转换元素
转换概念当中:是没有display这么一说的,是通过改变元素的透明度去实现从无到有的。

旋转函数  transform:rotate()  取值度数 正顺逆负  
		 /*例、值rotate(30deg) 把元素顺时针旋转 30 度*/
		 
旋转的基点  Transform-origin:left top 

倾斜函数  transform:skew(20deg 30deg) /skewX(20deg) skewY(20deg)    
         /*取值度数: 一个值代表水平, 俩值是一水平一垂直 */
    /*例、值skew(30deg,20deg) 围绕 X 轴把元素翻转倾斜/扭曲30 度,围绕 Y 轴翻转(倾斜/扭曲)20 度。*/

缩放函数 transform:scale() /scaleX()scaleY()  取正数负数和小数  
   /*例、值scale(2,4) 把宽度转换为原始尺寸的 2 倍,把高度转换为原始高度的 4 倍。*/

位移函数 translate() translateX() translateY()可以取负值
   /*例、值 translate(50px,100px) */
 
 过渡   transition
/* Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。
   Safari 需要前缀 -webkit-。
    注释:Internet Explorer 9 以及更早的版本,不支持 transition 属性。 注释:Chrome 25 以及更早的版本,需要前缀 -webkit-。*/

粉阿吉整理(8)之------CSS3的2D与3D_第2张图片

2.2 过渡transition

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。 要实现这一点,必须规定,项内容,规定您**希望把效果添加到哪个 CSS 属性上和规定效果的时长**。

过渡通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下, 当元素从一种样式变换为另一种样式时为元素添加效果。

过渡的生成器来了~

运动样式 transition-property: (all || [attr] || none)
运动时间  transition-duration: 
延迟时间  transition-delay: 
运动形式速度 transition-timing-function:  
ease:(逐渐变慢)默认值 linear:(匀速)
ease-in:(加速) ease-out:(减速) ease-in-out:(先加速后减速)

3. Something~

3.1 不想划过或者点击效果的话 pointer-events 直译为指针事件

    pointer-events:auto/none 
设置为none后,有如下相关特性: 
		阻止用户的点击动作产生任何效果
		阻止缺省鼠标指针的显示 
		阻止CSS里的hover和active状态的变化触发事件 
		阻止JavaScript点击动作触发的事件

3.2 属性定义当元素不面向屏幕时是否可见 backface-visibility

backface-visibility:visible|hidden;
/* visible 背面是可见的 hidden 背面是不可见的。*/

- 3D

4. 3D转换 transform

语法transform: rotate3d()/translate3d()

旋转  rotate3d(x,y,z,angle): 四个值 xyz是否旋转 旋转角度 
平移  translate3d(x,y,z): 三个值 平移多少

rotate3d(x,y,z,angle)
x:  在x轴是否旋转,是为1,否为0 
y:  在y轴是否旋转,是为1,否为0 
z:  在z轴是否旋转,是为1,否为0 

angle:旋转角度 
 rotateX(angle)     定义沿 X 轴的 3D 旋转。正值前,负值后 
 rotateY(angle)     定义沿 Y 轴的 3D 旋转。正值右,负值左 
 rotateZ(angle)     定义沿 Z 轴的 3D 旋转。
 
translate3d(x,y,z) 
 translateX(x)     定义 3D 转化,仅使用用于 X 轴的值。 
 translateY(y)     定义 3D 转化,仅使用用于 Y 轴的值。 
 translateZ(z)     定义 3D 转化,仅使用用于 Z 轴的值。

5. 景深 perspective

设置从何处查看一个元素的角度设置景深等于设置了一个3d空间

语法perspective:number|none;

number  元素距离视图的距离,以像素计。         
none  默认值。与 0 相同。不设置透视。

6. 视点 perspective-origin

语法perspective-origin:50% 50%;

表示浏览器从正中心观察这个世界

7. 被嵌套元素如何在 3D 空间中显示把当前的元素从2d转换成3d transform-style

语法transform-style: flat|preserve-3d;

flat           表示所有子元素在2D平面呈现          
preserve-3d    表示所有子元素在3D空间中呈现

8. 创建动画 @keyframes

语法@keyframes animationname {keyframes-selector {css-styles;}}

keyframes-selector   动画持续时间的百分比  
@keyframes 起名字{
     
                0%  {
     top:0px;}
               25%  {
     top:200px;}
               50%  {
     top:100px;}
               75%  {
     top:200px;}
              100%  {
     top:0px;}
        }

9. 动画属性的简写属性 用动画 animation

语法animation:name duration timing-function delay iteration-count

name   动画名称          
duration   动画指定需要多少秒或毫秒完成时间                   
timing-function    动画效果的速度          
delay     延时几秒再动          
iteration-count:value/infinite   动画播放次数          
animation-direction: normal|alternate;  是否反向播放动画          
animation-play-state: paused|running;  动画正在运行还是暂停

10. 动画关键帧 animation-timing-function

指定在每个间隔的起点或是终点发生阶跃变化,默认为 end。

animation-timing-function:  step-start/step-end

step-start 动画执行时为开始左端点的部分为开始。
step-end 动画执行时以结尾端点为开始,默认值为 end。      

粉阿吉整理(8)之------CSS3的2D与3D_第3张图片

你可能感兴趣的:(入门-基础,css3,css,3d)