有什么做兼职的网站,竞价推广教程,杭州建设网通知公告,龙岩网站优化目标#xff1a;使用位移、缩放、旋转、渐变效果丰富网页元素的呈现方式。 一、平面转换
1、简介
作用#xff1a;为元素添加动态效果#xff0c;一般与过渡配合使用。
概念#xff1a;改变盒子在平面内的形态#xff08;位移、旋转、缩放、倾斜#xff09;。 平面转换… 目标使用位移、缩放、旋转、渐变效果丰富网页元素的呈现方式。 一、平面转换
1、简介
作用为元素添加动态效果一般与过渡配合使用。
概念改变盒子在平面内的形态位移、旋转、缩放、倾斜。 平面转换也叫 2D 转换属性是 transform。
2、平移
transform: translate(X轴移动距离, Y轴移动距离);取值 像素单位数值百分比参照盒子自身尺寸计算结果正负均可正值向左、向下负值向右、向上 技巧 translate() 只写一个值表示沿着 X 轴移动单独设置 X 或 Y 轴移动距离translateX() 或 translateY()
练习定位居中
方法一margin-left, margin-top 设置为负值方法二使用 transform 向左向上移动自身尺寸的一半
headstyle.box {background-color: pink;position: absolute;left: 50%;top: 50%;/* 方法一: margin-left, margin-top 设置为负值 *//* margin-left: -100px;margin-top: -50px; *//* 方法二: 使用 transform 向左向上移动自身尺寸的一半 */transform: translate(-50%, -50%);width: 200px;height: 100px;}/style
/headbodydiv classbox/div
/body3、旋转
transform: rotate(旋转角度);取值角度单位是 deg 技巧 取值正负均可取值为正顺时针旋转取值为负逆时针旋转
4、转换原点
默认情况下转换原点是盒子中心点。可以通过 transform-origin 修改转换原点位置。
transform-origin: 水平原点位置 垂直原点位置;取值 方位名词left、top、right、bottom、center像素单位数值百分比
5、多重转换
同时使用平移和旋转实现下面效果 transform: translate() rotate();技巧要先平移再旋转
多重转换原理以第一种转换方式的坐标轴为准 1旋转会改变网页元素的坐标轴向 2先写旋转 则后面的平移效果的坐标轴以旋转后的坐标轴为准旋转时坐标轴在不停的变化平移额方向也在不停的变化
错误案例先写旋转再写平移效果如下 headtitle多重转换/titlestyle.box {margin-left: 600px;margin-top: 500px;width: 800px;height: 200px;border: 1px solid #000;}img {width: 200px;transition: all 5s;}/* 鼠标移入box图片边走边转 */.box:hover img {/* 先平移再旋转 */transform: translate(600px) rotate(360deg);/* 错误: 先旋转再平移 *//* 旋转会改变坐标轴向 *//* 多重转换以第一种转换形态的坐标轴为准 *//* transform: rotate(360deg) translate(600px); *//* 层叠性 *//* 分开写也不行, 后面的转换效果会覆盖前面的转换效果 *//* transform: translate(600px);transform: rotate(360deg); */}/style
/headbodydiv classboximg src./images/tyre1.png alt //div
/body6、缩放
transform: scale(缩放倍数);
transform: scale(X轴缩放倍数, Y轴缩放倍数);技巧 通常只为 scale() 设置一个值表示 X 轴和 Y 轴等比例缩放取值大于1表示放大取值小于1表示缩小
7、倾斜 transform: skew();取值角度度数 deg
headtitle倾斜效果/titlestylebody {background-color: #eee;}div {margin: 100px auto;width: 100px;height: 200px;background-color: pink;transition: all 0.5s;}div:hover {transform: skew(30deg);/* transform: skew(-30deg); */}/style
/headbodydiv/div
/body二、渐变
渐变是多个颜色逐渐变化的效果一般用于设置盒子背景。
分类
线性渐变 径向渐变 1、线性渐变
background-image: linear-gradient(渐变方向,颜色1 终点位置,颜色2 终点位置,......
);取值 渐变方向可选如果不写方向默认是从上向下即 to bottom 或 180deg to 方位名词to rightto bottom…角度度数0deg90deg180deg… 终点位置可选 百分比这个颜色所占的比例如果不写默认是几个颜色平分
headtitle线性渐变/titlestylebody {background-color: #eee;}div {margin-left: 100px;margin-top: 100px;width: 200px;height: 200px;/* 设置了渐变色, 就是设置了 background-image, 背景色被覆盖, 除非渐变色设置透明 transparent */background-color: yellow;/* 默认从上到下的方向 */background-image: linear-gradient(red,transparent);background-image: linear-gradient(to right,red,green);/* 使用角度, 0deg 是从下向上开始, 正值顺时针旋转, 90deg 从左到右 */background-image: linear-gradient(0deg,red,green);/* 属性一样 最后写的会覆盖前面的属性 *//* 默认从上向下, 红色占比 80% */background-image: linear-gradient(red 80%,green);}/style
/headbodydiv/div
/body设置了渐变色就是设置了 background-image背景色会被覆盖除非渐变色设置了透明 transparent。 2、径向渐变
background-image: radial-gradient(半径 at 圆心位置,颜色1 终点位置,颜色2 终点位置,......
);取值
半径可以是 2 条则为椭圆圆心位置取值像素单位数值 / 百分比 / 方位名词超过半径的区域显示渐变色设置的最后一个颜色值如果想要超过半径的区域显示背景色可以将最后一个颜色设置为透明色 transparent 三、综合案例
使用今日所学的平面转换和渐变色实现下面网页中的特效。 想要完整代码的点击这里获取Day10综合案例完整代码。完全免费仅供学习参考使用。 乾坤未定你我皆是黑马
