自学做网站需要学会哪些,软件开发工程师简历范文,教育网站平台建设,网站要咋做文章目录 位移#xff1a;translate案例-双开门旋转案例多重转换缩放渐变background-image:linear-gradient(颜色1,颜色2,...); 位移#xff1a;translate
语法#xff1a;transform:translate(水平移动距离,垂直移动距离); 取值#xff08;正负均可#xff09;#xff… 文章目录 位移translate案例-双开门旋转案例多重转换缩放渐变background-image:linear-gradient(颜色1,颜色2,...); 位移translate
语法transform:translate(水平移动距离,垂直移动距离); 取值正负均可 ①像素单位数值 ②百分比参照物为盒子自身尺寸 注意 ①X轴正向为右Y轴正向为下 ②translate()如果只给出一个值表示X轴方向移动距离 ③单独设置某个方向的移动距离translateX()translateY()
案例-双开门
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title平面转换-位移基本使用/titlestyle.father {width: 960px;height: 540px;margin: 100px auto;border: 1px solid black;background-color: blueviolet;overflow: hidden;/* 超出父级范围的隐藏 */}.sonLeft {width: 50%;height: 100%;float: left;background-color: aqua;transition: all 0.5s;/* 设置过渡效果持续时间为0.5秒 */}.sonRight {width: 50%;height: 100%;float: right;background-color: skyblue;transition: all 0.5s;/* 设置过渡效果持续时间为0.5秒 */}/* 定义鼠标悬停时子元素的样式 */.father:hover .sonLeft {transform: translate(-100%);/* 设置位移变换效果将子元素向右下方位移75% */}.father:hover .sonRight {transform: translateX(100%);/* 设置位移变换效果将子元素向右下方位移75% */}/style
/headbodydiv classfatherdiv classsonLeft/divdiv classsonRight/div/div
/body/html旋转
旋转transform: rotate(角度deg);角度正负均可
转换原点transform-origin:原点水平位置 原点垂直位置;默认原点是盒子的中心点 取值 ①方位名词left top right bottom center ②像素单位数值 ③百分比参照盒子自身尺寸计算
案例
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title平面转换-旋转/titlestyle.box {width: 200px;height: 200px;margin: 400px auto;background-color: aquamarine;transition: all 2s;/* 设置过渡效果持续时间为2秒 */transform-origin: right bottom;/* 设置旋转的原点为盒子的右下角 */}/* 定义鼠标悬停时盒子的样式 */.box:hover {transform: rotate(360deg);/* 设置旋转变换效果将盒子顺时针旋转360度一圈 */}/style
/headbodydiv classbox/div
/body/html多重转换
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title平面转换-多重转换/titlestyle.box {width: 800px;height: 200px;border: 1px solid black;}.circle {width: 200px;height: 200px;background-color: blueviolet;border-radius: 50%;transition: all 3s;}.box:hover .circle {transform: translate(600px) rotate(720deg);/* 注意旋转会改变坐标轴向多重转换如果涉及旋转往最后书写 */}/style
/headbodydiv classboxdiv classcircle/div/div
/body/html缩放
语法transform:scale(x轴缩放倍数,y轴缩放倍数); 技巧 一般情况下只为scale设置一个值表示x轴和y轴等比例缩放 transform:scale(缩放倍数); scale值大于1表示放大scale值小于1表示缩小
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title平面转换-缩放/titlestyle.box {width: 300px;height: 300px;background-color: blueviolet;border: 1px solid black;margin: 300px auto;overflow: hidden;}.btn {width: 50px;height: 50px;background-color: cadetblue;margin: 125px auto;border-radius: 50%;transform: scale(8);opacity: 0;transition: all 0.3s;}.box:hover .btn {transform: scale(1);opacity: 1;}/style
/headbodydiv classboxdiv classbtn/div/div
/body/html渐变background-image:linear-gradient(颜色1,颜色2,…);
常用background-image:linear-gradient(transparent,rgba(0, 0, 0, .5));
