前端基础(10):CSS3 2D

    科技2022-07-20  118

    学习目标

    1、渐变 2、过渡 3、2D 1、渐变linear-gradient( to bottom,red,blue)

    说明:

    CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。 为了创建一个线性渐变,你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,你也可以设置一个起点和一个方向(或一个角度)。 用法: 1)第一个参数:指定渐变方向,可以用“角度”的关键词或“英文”来表示: 2)CSS3 渐变也支持透明度(transparent),可用于创建减弱变淡的效果。 3)为了添加透明度,我们也可使用 rgba() 来定义颜色结点。 4)repeating-linear-gradient() 函数用于重复线性渐变 5)渐变的形状是 ellipse(表示椭圆) circle (圆) http://www.colorzilla.com/gradient-editor/ IE浏览器实现渐变只能使用IE自己的滤镜去实现 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=# 00ffff,endColorstr=#9fffff,grandientType=1); 第一个参数:渐变起始位置的颜色 第二个参数:渐变终止位置的颜色 第三个参数:渐变的类型 0 代表竖向渐变 1 代表横向渐变

    2、CSS3 转换

    转换是使元素改变形状、尺寸和位置的一种效果。 您可以使用 2D 或 3D 转换来转换您的元素。 在咱们的转换概念当中:是没有display这么一说的,通过改变元素的透明度去实现从无到有 1)、2D转换{transform:rotate() skew() scale() translate() ;} 相关值用法: A、rotate() 旋转函数 取值度数 ,单位:deg   通过 rotate() 方法,元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。 B、skew() 倾斜函数 取值度数 (扭曲),通过 skew() 方法,元素翻转(倾斜/扭曲)给定的角度,   skewX() skewY() C、scale() 缩放函数 取值 正数、负数和小数,通过 scale() 方法,元素的尺寸会增加或减少,   scaleX()scaleY() D、translate() 位移函数,元素从其当前位置移动,根据给定的left(x 坐标) 和 top(y 坐标) 位置参数:   translateX()translateY() 2)、旋转的基点{Transform-origin:top left;} 允许你改变被转换元素的位置。 3、css3 过渡{transition:all 5s;} 说明: CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。 要实现这一点,必须规定两项内容:规定您希望把效果添加到哪个 CSS 属性上  规定效果的时长 通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,使元素从一种样式变换为另一种样式时为元素添加效果。 相关属性用法: 1)transition-property 要运动的样式 (all || [attr] || none) 2)transition-duration 运动时间 3)transition-delay 延迟时间 4)transition-timing-function 运动形式     ease:(逐渐变慢)默认值     linear:(匀速)     ease-in:(加速)     ease-out:(减速)     ease-in-out:(先加速后减速)

    Processed: 0.010, SQL: 8