上海网站改版哪家好,网页设计的几种版式,自考,wordpress解压到空间目录
1 平面位移
1.1 基本使用
1.2 单独方向的位移
1.3 使用平面位移实现绝对位置居中
2 平面旋转
2.1 基本使用
2.2 圆点转换
2.3 多重转换
3 平面缩放
3.1 基本使用
3.2 渐变的使用
4 空间转换
4.1 空间位移
4.1.1 基本使用
4.1.2 透视
4.2 空间旋转
4.3 立…目录
1 平面位移
1.1 基本使用
1.2 单独方向的位移
1.3 使用平面位移实现绝对位置居中
2 平面旋转
2.1 基本使用
2.2 圆点转换
2.3 多重转换
3 平面缩放
3.1 基本使用
3.2 渐变的使用
4 空间转换
4.1 空间位移
4.1.1 基本使用
4.1.2 透视
4.2 空间旋转
4.3 立体呈现案例
5 动画
5.1 基本使用
5.2 动画的其它相关属性
5.2.1 linear 设置匀速
5.2.2 分布动画
5.2.3 延迟时间
5.2.4 重复次数
5.2.5 动画方向 alternate
5.2.6 执行完毕的状态
5.2.7 动画的拆分写法 1 平面位移
1.1 基本使用 语法 translate(水平移动距离, 垂直移动距离) 取值正负均可X轴正向为右Y轴正向为下 style.father{display: flex;justify-content: center;align-items: center;width: 200px;height: 200px;background-color: red;border: 2px solid black;}.child {width: 100px;height: 100px;background-color: blue;border: 1px solid black;transition: all 2s;}/* 父元素的hover事件子元素的样式改变 */.father:hover .child {/* transform: translate(50px, 50px); */ /* transform: translate(-50px, -50px); *//* 给的是百分比的话参考盒子自身尺寸计算结果 */transform: translate(50%, 50%);}/style 可以给子元素添加transition: all 2s; 过渡属性 1.2 单独方向的位移 单独方向的移动 transform: translateX(水平移动距离); transform: translateY(垂直移动距离); style.father{display: flex;justify-content: center;align-items: center;width: 200px;height: 200px;background-color: red;border: 2px solid black;}.child {width: 100px;height: 100px;background-color: blue;border: 1px solid black;transition: all 2s;}/* 父元素的hover事件子元素的样式改变 */.father:hover .child {/* transform: translateX(50px); */transform: translateY(50px);}/style 1.3 使用平面位移实现绝对位置居中 style.father{position: relative;width: 200px;height: 200px;background-color: red;border: 2px solid black;}.child {position: absolute;left: 50%;top: 50%;/* 1.之前的写法 *//* margin-left: -50px;margin-top: -50px; *//* 2.位移写法 */transform: translateX(-50px) translateY(-50px);width: 100px;height: 100px;background-color: blue;border: 1px solid black;}/style 2 平面旋转
2.1 基本使用 styleimg {display: block;margin: 100px auto;width: 300px;border: 1px solid black;transition: all 1s; /* 旋转效果必须配合过渡才有效 */}img:hover {/* 取值为正数顺时针负数为逆时针 */transform: rotate(360deg); }/style 旋转效果必须配合过渡transition才有效 2.2 圆点转换 转换圆点transform-origin: 圆点水平位置圆点垂直位置; 取值 方位名词left、right、top、bottom、center 百分比0%、50%、100% (参照盒子自身尺寸) 像素100px、200px 2.3 多重转换 style/* 旋转和位移 tranform混合属性实现多形态转换 */.box {width: 700px;height: 100px;border: 2px solid black;overflow: hidden;}img {width: 150px;height: 100px;transition: all 3s;}.box:hover img {transform: translateX(550px) rotate(360deg);/* 必须先有位移才能有旋转效果 不能颠倒顺序 *//* 因为先旋转会改变坐标轴方向 位移的方向会受影响*/}/style 3 平面缩放 语法 transform: scale(缩放倍数); 一般情况下只为scale设置一个值表示x轴和y轴等比例缩放大于1放大小于1缩小等于1保持不变 3.1 基本使用 style.box{margin: 100px auto;width: 300px;height: 300px;border: 2px solid black;}img {width: 300px;height: 300px;transition: all 1s;}.box:hover img {/* 没有单位 */transform: scale(1.5); transform: scale(0.6);}/style 3.2 渐变的使用
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titlecss/titlestyle.box{position: relative;width: 300px;height: 300px;border: 1px solid black;}img {width: 100%;height: 100%;}.box .mask{position: absolute;top: 0;left: 0;width: 300px;height: 300px;background-image: linear-gradient(/* transparent 表示透明色 */transparent,rgba(0, 0, 0, 0.5));opacity: 0;transition: all 0.5s;}.box:hover .mask{opacity: 1; }/style
/head
bodydiv classboximg src./images/girl2.jpg alt!-- 添加渐变背景的盒子 --!-- 遮罩层 --div classmask/div/div
/body
/html 4 空间转换 空间是从坐标轴角度定义。x, y, z三条坐标轴构成一个立体空间z轴位置 与视线方向相同的为正方向。负值指向里。 使用的属性也是 transform 4.1 空间位移
4.1.1 基本使用 语法 transform: translate3d(水平移动距离); stylebody {perspective: 1000px;}.box {width: 300px;height: 300px;background-color: skyblue;border: 2px solid black;transition: all 1s;}.box:hover {transform: translate3d(100px, 100px, 100px);}/style 单独控制每个方向的移动距离 transform: translateX(移动距离); transform: translateY(移动距离); transform: translateZ(移动距离); 但是通过上述的方式我们是看不到 Z 轴移动的距离的所以就用到了下面的透视内容了。 4.1.2 透视 使用perspective属性设置透视 近大远小 perspective: 1000px; 想看到哪个元素就给该元素的父级元素添加perspective属性 取值一般为 800-1200px 4.2 空间旋转 stylebody {perspective: 1000px;}.box {margin: 400px auto;width: 300px;height: 300px;background-color: skyblue;border: 2px solid black;transition: all 1s;}.box:hover {/* transform: rotateZ(360deg); 旋转角度为Z轴旋转 相当于rotate(360deg); *//* transform: rotateX(60deg); */transform: rotateY(60deg);}/style 4.3 立体呈现案例
【代码】
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title立体呈现/titlestyle.box {position: relative;;margin: 100px auto;width: 200px;height: 200px;transition: all 2s;transform-style: preserve-3d;}.box div {position: absolute;top: 0;left: 0;width: 200px;height: 200px;}.front {background-color: orange;transform: translateZ(200px);}.back {background-color: green;}.box:hover {transform: rotateY(360deg); }/style
/head
bodydiv classboxdiv classfront/divdiv classback/div/div
/body
/html 5 动画
5.1 基本使用 style.box{width: 300px;height: 300px;background-color: skyblue; }/* 1.定义动画 */keyframes play {/* 1. from to 形式 *//* from {width: 300px;height: 300px;}to {width: 500px;height: 500px;} *//* 2. 百分比形式 */0% {width: 300px;height: 300px;}50% {width: 400px;height: 400px;}100% {width: 500px;height: 500px;}}.box:hover {/* 使用动画 */animation: play 1s;}/style 5.2 动画的其它相关属性
5.2.1 linear 设置匀速
animation: play 1s linear;
5.2.2 分布动画 steps(3) 分为3个动画帧 ... animation: play 1s steps(3);
5.2.3 延迟时间 在动画中第一个时间表示动画时长第二个时间表示延迟时间 animation: play 1s 1s;
5.2.4 重复次数
animation: play 1s 3; /* 重复3次 */
animation: play 1s infinite; /*重复无穷次 */
5.2.5 动画方向 alternate 先执行再执行,有反向效果 animation: play 1s infinite alternate;
5.2.6 执行完毕的状态
animation: play 1s backwards; /* 默认值 backwards*/
animation: play 1s forwards; /* 动画执行完毕的状态 */ 5.2.7 动画的拆分写法
