当前位置： 首页 > wzjs >正文

企业网站的搭建流程太原网站建设制作

wzjs 2025/8/2 2:27:16
企业网站的搭建流程,太原网站建设制作,设计类专业哪个就业前景好,网站制作 软件开发目录 平面转换平移旋转改变旋转原点多重转换缩放倾斜 渐变线性渐变径向渐变 空间转换平移视距旋转立体呈现缩放 动画使现步骤animation 复合属性animation 属性拆分逐帧动画多组动画 平面转换 作用：为元素添加动态效果，一般与过渡配合使用 概念&#x…

目录

  • 平面转换
    • 平移
    • 旋转
    • 改变旋转原点
    • 多重转换
    • 缩放
    • 倾斜
  • 渐变
    • 线性渐变
    • 径向渐变
  • 空间转换
    • 平移
    • 视距
    • 旋转
    • 立体呈现
    • 缩放
  • 动画
    • 使现步骤
    • animation 复合属性
    • animation 属性拆分
    • 逐帧动画
    • 多组动画

平面转换

作用：为元素添加动态效果，一般与过渡配合使用

概念：改变盒子在平面内的形态（位移、旋转、缩放、倾斜）

平面转换又叫 2D 转换

属性名：transform

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{margin: 100px 0;width: 100px;height: 100px;background-color: #e08b8b;transition: all 1s;}div:hover{transform: translate(700px) rotate(360deg) scale(2) skew(360deg);}</style>
</head>
<body><div></div>
</body>
</html>

结果如下：

屏幕录制 2025-03-13 153147

平移

属性名：transform: translate(X轴移动距离, Y轴移动距离);

属性值：

  • 像素单位数值
  • 百分比（参照盒子自身尺寸计算结果）
  • 正负均可

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.father{width: 500px;height: 300px;margin: 100px auto;border: 1px solid black;}.son{width: 200px;height: 100px;background-color: antiquewhite;transition: all 0.5s;}.father:hover .son{transform: translate(150%,200%);}</style>
</head>
<body><div class="father"><div class="son"></div></div>
</body>
</html>

结果如下：

屏幕录制 2025-03-13 154956

注意事项：

  • translate() 只写一个值，表示沿着 X 轴移动
  • 单独设置 X 或 Y 轴移动距离：translateX() 或 translateY()

旋转

属性名：transform: rotate(旋转角度);

属性值：

  • 角度单位是 deg
  • 取值正负均可
  • 取正顺时针旋转，取负逆时针旋转

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>img{width: 200px;transition: all 1s;}img:hover{transform: rotate(360deg);}</style>
</head>
<body><img src="./img/3.jpg" alt="">
</body>
</html>

结果如下：

屏幕录制 2025-03-13 162633

改变旋转原点

默认情况下，旋转远点是盒子中心点

属性名：transform-origin: 水平原点位置 垂直原点位置;

属性值：

  • 方位名称（left、top、right、bottom、center）
  • 像素单位数值
  • 百分比

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>img{width: 200px;transition: all 1s;transform-origin: right bottom;}img:hover{transform: rotate(360deg);}</style>
</head>
<body><img src="./img/3.jpg" alt="">
</body>
</html>

结果如下：

屏幕录制 2025-03-13 163957

多重转换

先平移再旋转

属性名：transform: translate() rotate();

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 1200px;height: 200px;border: 1px solid black;}img{width: 200px;transition: all 4s;}div:hover img{transform: translateX(500%) rotate(360deg);}</style>
</head>
<body><div><img src="./img/4.jpg" alt=""></div>
</body>
</html>

结果如下：

屏幕录制 2025-03-13 165216

注意事项：

  • 不能先旋转再平移，因为旋转会改变坐标轴向
  • 复合属性不能分开写，否则后面的属性会覆盖前面的属性

缩放

属性名：

  • transform: scale(缩放倍数);
  • transform: scale(X轴缩放倍数, Y轴缩放倍数);

属性值：

  • 通常只为 scale() 设置一个值，表示 X 轴和 Y 轴等比例缩放
  • 取值大于 1 表示放大，取值小于 1 表示缩小

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 143px;margin: 100px auto;}img{width: 200px;transition: all 4s;}div:hover img{transform: scale(2);}</style>
</head>
<body><div><img src="./img/4.png" alt=""></div>
</body>
</html>

结果如下：

屏幕录制 2025-03-13 171831

倾斜

属性名：transform: skew();

属性值：

  • 角度度数 deg
  • 取正向左倾斜，取负向右倾斜

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 143px;margin: 100px auto;}img{width: 200px;transition: all 2s;}div:hover img{transform: skew(30deg)}</style>
</head>
<body><div><img src="./img/4.png" alt=""></div>
</body>
</html>

结果如下：

屏幕录制 2025-03-13 174606

渐变

渐变是多个颜色逐渐变化的效果，一般用于设置盒子背景

线性渐变

属性名：

background-image: linear-gradient(渐变方向,颜色1 终点位置,颜色2 终点位置,......
);

属性值：

  • 渐变方向：（可选）
    • to 方位名词
    • 角度度数
  • 终点位置：（可选）
    • 百分比

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 200px;background-color: #a0adf7;background-image: linear-gradient(45deg, red,#f8a4a4,#a0adf7);}</style>
</head>
<body><div></div>
</body>
</html>

结果如下：
在这里插入图片描述

径向渐变

作用：给按钮添加高光效果

属性名：

background-image: radial-gradient(半径 at 圆心位置,颜色1 终点位置,颜色2 终点位置,......
);

属性值：

  • 半径可以是两条，则为椭圆
  • 圆心位置取值：像素单位数值/百分比/方位名词

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 100px;height: 100px;background-color: pink;border-radius: 50%;background-image: radial-gradient(50px at center center,red,pink);}button{width: 100px;height: 40px;background-color: purple;border: 0;border-radius: 5px;color: white;background-image: radial-gradient(30px at center center,rgba(255,255,255,0.2),transparent);}</style>
</head>
<body><div></div><button>按钮</button>
</body>
</html>

结果如下：
在这里插入图片描述

空间转换

空间：是从坐标轴角度定义的 X、Y 和 Z 三条坐标轴构成了一个立体空间，Z 轴与视线方向相同

空间转换也叫 3D 转换

属性：transform

平移

属性名：

  • transform: translate3d(x,y,z);
  • transform: translateX();
  • transform: translateY();
  • transform: translateZ();

属性值：

  • 像素单位数值
  • 百分比（参照盒子自身尺寸计算结果）

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 200px;height: 200px;margin: 100px auto;background-color: pink;transition: all 0.5s;}.box:hover{transform: translate3d(100px,200px,300px);}</style>
</head>
<body><div class="box"></div>
</body>
</html>

结果如下：

屏幕录制 2025-03-13 194159

注意事项：默认无法观察 Z 轴平移效果

视距

作用：制定了观察者与 z=0 平面的距离，为元素添加透视效果

透视效果：近大远小、近实远虚

属性名：perspective: 视距;

属性值：

  • 添加给父级，取值范围 800-1200

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.father{perspective: 1000px;}.son{width: 200px;height: 200px;margin: 100px auto;background-color: pink;transition: all 0.5;}.son:hover{transform: translateZ(-300px);}</style>
</head>
<body><div class="father"><div class="son"></div></div>
</body>
</html>

结果如下：

屏幕录制 2025-03-13 195356

旋转

属性名：

transform: rotateZ() 沿着 Z 轴旋转

transform: rotateX() 沿着 X 轴旋转

transform: rotateY() 沿着 Y 轴旋转

transform: rotate3d(x,y,z,角度度数); x，y，z 取值为 0-1 之间的数字

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 300px;margin: 100px auto;perspective: 1000px;}img{width: 200px;transition: all 2s;}.d1 img:hover{transform: rotateZ(360deg);}.d2 img:hover{transform: rotateX(60deg);}.d3 img:hover{transform: rotateY(60deg);}</style>
</head>
<body><div class="d1"><img src="./img/3.jpg" alt=""></div><div class="d2"><img src="./img/1.png" alt=""></div><div class="d3"><img src="./img/2.png" alt=""></div>
</body>
</html>

结果如下：

屏幕录制 2025-03-13 201450

左手法则

根据旋转方向确定取值正负

左手握住旋转轴，拇指指向正值方向，其他四个手指弯曲方向为旋转正值方向
在这里插入图片描述

立体呈现

作用：设置元素的子元素是位于 3D 空间中还是平面中

属性名：transform-style

属性值：

  • flat：子级处于平面中
  • preserve-3d：子级处于 3D 空间中

呈现立体图形步骤：

  1. 父元素添加 transform-style: preserve-3d;
  2. 子级定位
  3. 调整子盒子的位置（位移或旋转）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.cube{position: relative;width: 200px;height: 200px;margin: 100px auto;/* background-color: pink; */transition: all 1s;transform-style: preserve-3d;}.cube div{position: absolute;left: 0;top: 0;width: 200px;height: 200px;}.front{background-color: orange;transform: translateZ(100px);}.back{background-color: green;transform: translateZ(-100px);}.cube:hover{transform: rotateY(90deg);}</style>
</head>
<body><div class="cube"><div class="front">前面</div><div class="back">后面</div></div>
</body>
</html>

结果如下：

屏幕录制 2025-03-13 213518

缩放

属性名：

  • transform: scale3d(x,y,z);
  • transform: scaleX();
  • transform: scaleY();
  • transform: scaleZ();

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.cube{position: relative;width: 200px;height: 200px;margin: 100px auto;/* background-color: pink; */transition: all 4s;transform-style: preserve-3d;transform: scale3d(1.5,2,3);}.cube div{position: absolute;left: 0;top: 0;width: 200px;height: 200px;}.front{background-color: orange;transform: translateZ(100px);}.back{background-color: green;transform: translateZ(-100px);}.cube:hover{transform: rotate3d(1,1,1,90deg);}</style>
</head>
<body><div class="cube"><div class="front">前面</div><div class="back">后面</div></div>
</body>
</html>

结果如下：

屏幕录制 2025-03-13 220517

动画

过渡：实现两个状态间的变化过程

动画：实现多个动态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.d1{width: 1000px;height: 200px;border: 1px solid black;}.d2{width: 200px;height: 200px;background-color: pink;animation: change 1s infinite alternate;}@keyframes change {0% {transform: translate(0);}100% {transform: translate(800px);}}</style>
</head>
<body><div class="d1"><div class="d2"></div></div>
</body>
</html>

结果如下：

屏幕录制 2025-03-13 221903

使现步骤

定义动画

  • 两个状态
@keyframes 动画名称 {from {}to {}
}
  • 多个状态
@keyframes 动画名称 {0% {}10% {}......100% {}
}

使用动画

animation: 动画名称 动画花费时长;

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 200px;background-color: pink;animation: change 10s;}@keyframes change {0% {width: 200px;height: 200px;}25% {width: 400px;height: 200px;}75% {width: 400px;height: 400px;}100% {border-radius: 50%;}}</style>
</head>
<body><div></div>
</body>
</html>

结果如下：

屏幕录制 2025-03-13 235715

animation 复合属性

animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;

  • 速度曲线：
    • linear：匀速运动
    • steps()：括号里填数字，表示分几步完成动画
  • 重复次数：
    • infinite：无限循环重复播放
  • 动画方向：
    • alternate：反向执行
  • 执行完毕时状态：
    • backwards：开始状态
    • forwards：结束状态

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 200px;height: 100px;background-color: pink;animation:  change 1s linear 1s 3 alternate forwards;}@keyframes change {from {width: 200px;}to {width: 800px;}}</style>
</head>
<body><div class="box"></div>
</body>
</html>

结果如下：

屏幕录制 2025-03-14 002430

注意事项：

  • 动画名称和动画时长必须赋值
  • 取值不分先后顺序
  • 如果有两个时间值，第一个时间值表示动画时长，第二个时间值表示延迟时间

animation 属性拆分

属性作用取值
animation-name动画名称
animation-duration动画时长
animation-delay延迟时间
animation-fill-mode动画执行完毕时状态forwards：最后一帧状态
backwards：第一帧状态
animation-timing-function速度曲线steps (数字)：逐帧动画
animation-iteration-count重复次数infinite 为无限循环
animation-direction动画执行方向alternate 为反向
animation-play-state暂停动画paused 为暂停，通常配合:hover 使用

逐帧动画

核心原理：

  • steps() 逐帧动画
  • CSS 精灵图

精灵动画制作步骤：

  1. 准备显示区域：盒子尺寸与一张精灵小图尺寸相同
  2. 定义动画：移动背景图（移动距离 = 精灵图宽度）
  3. 使用动画：strps(N)，N 与精灵小图个数相同

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 140px;height: 140px;border: 1px solid black;background-image: url(./img/01.png);animation: run 1s steps(12) infinite;}</style>
</head>
<body><div></div>
</body>
</html>

结果如下：

屏幕录制 2025-03-14 144049

多组动画

语法格式：

animation: 动画1,动画2,......
;

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 140px;height: 140px;/* border: 1px solid black; */background-image: url(./img/01.png);animation: run 1s steps(12) infinite,move 5s linear forwards;}@keyframes run {from {background-position: 0 0;}            to {background-position: -1680px 0;}}@keyframes move {0% {transform: translate(0);}100% {transform: translate(800px);}}</style>
</head>
<body><div></div>
</body>
</html>

结果如下：

屏幕录制 2025-03-14 144234

http://www.dtcms.com/wzjs/164791.html

相关文章：

  • 武汉光谷做网站价格站内推广有哪些具体方式
  • 昆明网站seo短网址
  • 别人做的网站不能用了免费的网站推广
  • directadmin备份网站吸引人的营销标题
  • 怎么做导购网站厦门网站推广费用
  • 郑州高端网站建设团队淘宝seo具体优化方法
  • 有一个网站专门做民宿wordpress网站建设
  • 浙江网站建设哪家专业短网址生成器免费
  • 以下是b2b电子商务网站廊坊seo网站管理
  • 网站直播怎样做东莞网站自动化推广
  • 免费网站建设有哪些南京谷歌推广
  • 做直播网站用什么系统怎么样建立自己的网站
  • 奕腾网站建设天津百度爱采购
  • 网站备案 上一级服务商名称深圳seo网站推广方案
  • 光电工程东莞网站建设关键词查询网
  • 网站制作学什么软件百度推广官网登录
  • 网站建设开发熊掌号网络营销招聘岗位有哪些
  • 兰州网站建设价百度链接
  • wordpress 主机选择seo技术员
  • 杭州网站建设招聘网络推广学校
  • 网站开发那种语言好百度企业推广怎么收费
  • 环保网站策划书多用户建站平台
  • 做海报有什么素材网站知乎新东方培训机构官网
  • iis7架设网站seo关键词优化最多可以添加几个词
  • 沈阳哪有做网站的优化排名软件
  • wordpress软件下载插件抖音seo推荐算法
  • 苏州好的做网站的公司哪家好seo优化公司如何做
  • 建网站 英文搜索关键词排名优化软件
  • 济南网站排名优化报价百度关键词优化教程
  • 集团门户网站建设公司微信朋友圈广告