前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >H5C3第二节

H5C3第二节

作者头像
用户3461357
发布2019-08-02 15:14:31
5290
发布2019-08-02 15:14:31
举报
文章被收录于专栏:web前端基地

渐变

线性渐变

linear-gradient指沿着某条直线朝一个方向产生的渐变效果。

线性渐变的核心:

  • 渐变方向
  • 颜色
  • 渐变范围
代码语言:javascript
复制
/* 注意:渐变实际上相当与一张图片,因为需要加给background-image才会生效 */
/* 渐变的核心:渐变方向,渐变颜色, 渐变范围 */
/* background-image: linear-gradient( 方向, 颜色 范围, 颜色 范围, 颜色 范围 ); */

/* 最简单的渐变 */
background-image: linear-gradient(red, green);
/* 设定渐变的方向  */
background-image: linear-gradient(to right, red, green);
/* 也可以设定渐变的角度  */
background-image: linear-gradient(45deg, red, green);
/* 设定渐变的范围  */
background-image: linear-gradient(to right, red 20%, green 80%)
/* 每一个区间表示渐变颜色的范围  */
background-image: linear-gradient(to right, red 20%, green 20%)

【演示:渐变-线性渐变.html】

【演示:导航按钮.html】

【案例:渐变-案例-发廊效果.html】

径向渐变

radial-gradient指从一个中心点开始沿着四周产生渐变效果

径向渐变的核心:

  • 圆的大小
  • 圆心的位置
  • 颜色
代码语言:javascript
复制
/*1. 最简单的渐变*/
background-image: radial-gradient(red, green);

/*2. 指定圆的半径和圆心*/
background-image: radial-gradient(200px at center, red, green);

/*3. 指定椭圆*/
background-image: radial-gradient(200px 80px at center, red, green);

/*4. 指定范围*/
background-image: radial-gradient(200px at center, green 50%, red 50%);

【演示:径向渐变-语法.html】

【案例:径向渐变-立体小球.html】

过渡

过渡的属性

  1. 如果两个状态发生改变,没有过渡,效果是瞬间变化的
  2. 如果加上了过渡,那么这个过程就会有动画的效果。
  3. 整个状态变化的过程是由浏览器来完成的,我们只需要关注开始状态与结束状态即可。
代码语言:javascript
复制
/*transition-property:设置过渡属性
/*也可以是width,height*/
transition-property:all;

/*transition-duration:设置过渡时间*/
transition-duration:1s;

/*transition-delay:设置过渡延时*/
transition-delay:2s;

/*transition-timing-function:设置过渡的速度*/
/*linear,ease,ease-in,ease-out,ease-in-out, steps(10)*/
transition-timing-function:linear;

【演示:过渡基本语法】

属性合写

代码语言:javascript
复制
/* 属性 时间 延时 速度 */
transition: width 1s 3s linear;

过渡的注意点:

  • 过渡必须要有两个状态的变化。
  • 过渡可以写在A状态,也可以写在B状态,但是如果写在B状态,那么回来的时候,就没有过渡效果了。

【案例:手风琴效果】

2D转换

transform: 转换,是CSS3最具颠覆性的几个特性之一,既可以用于2D转换,也可以用于3D转换。 transform:2D转换,元素在平面上实现移动、旋转、缩放、斜切等操作

scale缩放

代码语言:javascript
复制
transform: scaleX(0.5);/*让宽度变化*/
transform: scaleY(0.5);/*让高度变化,注意不能写多个transform,不然会覆盖。*/
transform: scale(0.5);/*让宽度和高度同时变化*/

注意:

  • scale接收的值是倍数,因此没有单位
  • scale可以是一个值,如果是一个值,不是说仅仅缩放宽度,高度也会等比例的缩放。
  • 可以通过transform-origin设定旋转原点

translate平移

代码语言:javascript
复制
transform: translateX(100px);
transform: translateY(100px);
transform: translate(100px, 100px);
transform: translate(50%, 50%);

注意:

  • translate的值可以是px,也可以是百分比,如果是百分比,那么参照的是自身的宽高。
  • translate移动的元素并不会影响其他盒子,类似于相对定位。

rotate旋转

代码语言:javascript
复制
transform: rotate(360deg);//旋转360度
transform: rotate(-360deg);//逆时针旋转360度

注意:

  • 单位是deg,角度,不是px
  • 正值顺时针转,负值逆时针转
  • 可以通过transition-origin设定旋转原点

skew斜切(变形)

skew在实际开发中,是用的最少的一个属性。一般来说,x和y只会倾斜其中的一个

代码语言:javascript
复制
/*在水平方向倾斜30deg*/
transform: skewX(30deg);
/*在垂直方向倾斜30deg*/
transform: skewY(30deg);

【案例:扫光效果.html】

transform-origin转换原点

通过transform-origin可以设置转换的中心原点。

代码语言:javascript
复制
transform-origin: center center;
transform-origin: 40px 40px;

转换合写问题

代码语言:javascript
复制
transform:translateX(800px) scale(1.5) rotate(360deg) ;
//1. transform属性只能写一个,如果写了多个会覆盖
//2. transform属性可以连写,但是顺序对效果影响的,因为它会在第一个效果的基础上执行第二个效果,然后执行第三个效果(通常会把rotate放后面)
//3. 如果对transform进行过度效果的时候,初始状态和结束状态一一对应

【案例:盾牌打散与合并效果.html】

3D转换

transform:不仅可以2D转换,还可以进行3D转换。

思考:2D与3D的区别?

坐标轴

用X、Y、Z分别表示空间的3个维度,三条轴互相垂直。注意+Y是向下的。

perspective透视

电脑显示屏是一个2D的平面,因为我们看不出来旋转的方向,通过perspective属性,可以定义3D 元素距视图的距离,单位是px。 说白了,设置了perspective属性后,就有了进大远小的效果了,在视觉上,让我们能看出来3d的效果。 注意:当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身。

代码语言:javascript
复制
perspective:500px;

关于近大远小

对于我们眼睛来说,离我们越近的房子,我们会感觉到这个房子越大,离我们越远的房子,就会感觉越小,其实房子的大小都是一样的,只是在视觉上的一种不同。

rotate旋转

代码语言:javascript
复制
transform: rotate(45deg);// 让元素在平面2D中旋转
transform: rotateX(45deg);// 让元素沿着X轴转45度
transform: rotateY(45deg);// 让元素沿着Y轴转45度
transform: rotateZ(45deg);// 让元素沿着Z轴转45度

【01-3D转换-旋转.html】

问题:看不出来怎么转的,为什么现实生活中能够看出来?

translate平移

代码语言:javascript
复制
/*沿着X轴的正方向移动45px*/
transform: translateX(45px);
/*沿着Y轴的正方向移动45px*/
transform: translateY(45px);
/*沿着Y轴的正方向移动45px*/
transform: translateZ(45px);

【02-3D转换-平移.html】

【立方体.html】

transform-style

transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。注意这个属性只能给父元素添加。

代码语言:javascript
复制
flat:默认值,2d显示
preserve-3d: 3d显示

transform-style与perspective的区别

代码语言:javascript
复制
/*透视:透视只是相当于设置了一个距离,辅助我们查看3D效果的工具,*/
/*preserve-3d:给父盒子添加,让子元素保留3D的位置,说白了,只有设置了preserve-3d,这个元素才能被称之为3d元素。*/

//一个3d元素可以没有perspective,但是不能没有transform-style

【3d导航案例.html】

【切割轮播图案例】

【美女相册案例】

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-07-12,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 web前端基地 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 渐变
    • 线性渐变
      • 径向渐变
      • 过渡
        • 过渡的属性
          • 属性合写
          • 2D转换
            • scale缩放
              • translate平移
                • rotate旋转
                  • skew斜切(变形)
                    • transform-origin转换原点
                      • 转换合写问题
                      • 3D转换
                        • 坐标轴
                          • perspective透视
                            • rotate旋转
                              • translate平移
                                • transform-style
                                相关产品与服务
                                图像处理
                                图像处理基于腾讯云深度学习等人工智能技术,提供综合性的图像优化处理服务,包括图像质量评估、图像清晰度增强、图像智能裁剪等。
                                领券
                                问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档