阿里云网站建设步骤,app软件开发软件,宿迁华夏建设集团网站,在线网站备案1.平面转换
使用 transform 属性实现元素的位移、旋转、缩放等效果 2D转换 2D转换是改变标签在二维平面上的位置和形状 移动#xff1a;translate 旋转#xff1a;rotate 缩放#xff1a;scale
1.1位移translate translate语法 x就是X轴上水平移动#xff0c;正向为右…1.平面转换
使用 transform 属性实现元素的位移、旋转、缩放等效果 2D转换 2D转换是改变标签在二维平面上的位置和形状 移动translate 旋转rotate 缩放scale
1.1位移translate translate语法 x就是X轴上水平移动正向为右 y就是y轴上水平移动正向为下 单独设置某个方向的移动距离translateX() translateY() transform: translate(x, y)transform: translateX(n)transfrom: translateY(n) 重点知识点 取值正负均可像素单位 百分比是相对于本身的宽度和高度来进行计算的 2D的移动主要是指水平、垂直方向上的移动 translate最大的优点就是不影响其他元素的位置 行内标签没有效果
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title位移-基本使用/titlestyle.father {width: 500px;height: 300px;margin: 100px auto;border: 1px solid #000;}.son {width: 200px;height: 100px;background-color: pink;transition: all 0.5s;}.father:hover .son {/* 百分比是相对于本身的宽度和高度来进行计算的 */transform: translate(100%, 50%);/* transform: translate(100px,50px); *//* 水平移动 100px *//* transform: translate(100px, 0) *//* 垂直移动 100px *//* transform: translate(0, 100px) *//* 水平移动 100px *//* transform: translateX(100px); *//* 垂直移动 100px */transform: translateY(100px);}/style
/headbodydiv classfatherdiv classson/div/div
/body/html
D:\前端基础\2023寒假web学习\题目\2移动web开发\素材(1)\素材
让一个盒子水平垂直居中
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title绝对定位元素居中效果/titlestyle.father {position: relative;width: 500px;height: 300px;margin: 100px auto;border: 1px solid #000;}.son {position: absolute;left: 50%;top: 50%;/* margin-left: -100px;margin-top: -50px; *//* 用translate比较方便适用于宽高不是整数值 */transform: translate(-50%,-50%);width: 203px;height: 100px;background-color: pink; }/style
/head
bodydiv classfatherdiv classson/div/div
/body
/html
D:\前端基础\2023寒假web学习\题目\2移动web开发\素材(1)\素材
案例使用translate实现元素位移效果
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;}.box {width: 1366px;height: 600px;margin: 0 auto;background: url(./images/bg.jpg);overflow: hidden;overflow: hidden;}.box::before,.box::after {content: ;float: left;width: 50%;height: 600px;background: url(./images/fm.jpg);transition: all .5s;}.box::after {/* 取右边图 */background-position: right 0;}/* 鼠标移动的时候的位置改变的效果 */.box:hover::before {transform: translate(-100%);}.box:hover::after {transform: translate(100%);}/style
/headbodydiv classbox/div
/body/html
D:\前端基础\2023寒假web学习\题目\2移动web开发\素材(1)\素材
1.2 2D 转换之rotate旋转 rotate旋转 2D旋转指的是让元素在二维平面内顺时针或者逆时针旋转
/* 单位是deg */
img:hover {transform: rotate(360deg)
}rotate语法 rotate 里面跟度数单位是 deg 角度为正时顺时针角度为负时逆时针 默认旋转的中心点是元素的中心点 设置元素旋转的中心的(transform-origin)--可改变转换的原点 D:\前端基础\2023寒假web学习\题目\2移动web开发\素材(1)\素材 transform-origin: x y;取值
方位名词left、top、right、bottom、center像素单位数值百分比参照盒子自身尺寸计算注意 默认圆点是盒子中心点 后面的参数 x 和 y 用空格隔开 x y 默认旋转的中心点是元素的中心(50% 50%),等价于center center
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title转换原点/titlestyleimg {width: 250px;transition: all .5s;border: 1px solid #000;transform-origin: right bottom;}img:hover {transform: rotate(360deg);}/style
/head
bodyimg src./images/rotate.png alt
/body
/html 多重转换
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title多重转换/titlestyle.box {width: 800px;height: 200px;border: 1px solid #000;}img {width: 200px;transition: all 3s;}.box:hover img {/* 边走边转 *//* 正确走法 */transform: translate(600px) rotate(360deg);/* 错误沿着旋转的路在水平走600px *//* 旋转会改变坐标轴方向 *//* transform: rotate(360deg) translate(600px); */}/style
/headbodydiv classboximg src./images/tyre1.png alt/div
/body/html
1.3 2D 转换之scale缩放 scale的作用用来控制元素的放大与缩小
transform: scale(x, y)知识要点 注意xx轴缩放倍数与yy轴缩放倍数之间用逗号进行分隔 transform: scale(1, 1): 宽高都放大一倍相当于没有放大 transform: scale(2, 2): 宽和高都放大了二倍 transform: scale(2): 如果只写了一个参数第二个参数就和第一个参数一致 transform:scale(0.5, 0.5): 缩小 scale 最大的优势可以设置转换中心点缩放默认以中心点缩放而且不影响其他盒子 div:hover {/* 注意数字是倍数的含义所以不需要加单位 *//* transform: scale(2, 2) *//* 实现等比缩放同时修改宽与高 *//* transform: scale(2) *//* 小于 1 就等于缩放*/transform: scale(0.5, 0.5)} 2D 转换综合写法以及顺序问题
知识要点 同时使用多个转换其格式为 transform: translate() rotate() scale() 顺序会影响到转换的效果(先旋转会改变坐标轴方向) 当我们同时有位置或者其他属性的时候要将位移放到最前面
div:hover {transform: translate(200px, 0) rotate(360deg) scale(1.2)
}
2.渐变
D:\前端基础\2023寒假web学习\题目\2移动web开发\学习包\素材(2)\素材渐变
使用backgroung-image属性实现渐变背景效果
渐变是多个颜色逐渐变化的视觉效果一般用于设置盒子的背景
background-image: linear-gradient(颜色1,颜色2
);
3.综合案例
1. D:\前端基础\2023寒假web学习\题目\2移动web开发\学习包\2.2.5作业\作业\03-华为新闻综合案例
