IT评测·应用市场-qidao123.com技术社区
标题:
2025寒假第六周前端条记 - 动画和流式布局
[打印本页]
作者:
李优秀
时间:
2025-2-15 15:40
标题:
2025寒假第六周前端条记 - 动画和流式布局
CSS新特性2
2d转换
使用transform属性, 可以实现元素的位移, 旋转, 缩放等效果
移动: translate(X, Y)
不会影响其他盒子的位置
对行盒没有效果
百分比按盒子的高和宽
盒子水平垂直居中的新方法:
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
transform: translate(-50%, -50%);
复制代码
旋转: rotate(度数deg)—正值为顺时针/负值为逆时针
transform-origin: x y; — 设置转换中央点(默认是50% 50%, 也可以写方位名词, 如center center)
缩放: scale(x, y) — x和y表示倍数/小数表示缩小, 没有单位
注意: 放大/缩小时四个边都会变革, 且不会影响其他盒子, 也可设置缩放中央点.
注意:
简写按照以上次序来写
次序改变会影响其效果(先旋转会改变坐标轴方向)
位移一定写到最前面
动画
步调
先定义动画
再使用/调用动画
定义动画
eg:
@keyframes 动画名称 {
0%{
width: 100px;
}
100%{
width: 200px;
}
}
复制代码
调用动画
eg:
div {
------;
------;
animation-name: 动画名称;
animation-duration: 持续时间;
}
复制代码
动画序列
0%是动画开始, 100%是动画的完成
在@keyframes中规定某项CSS样式, 就能创建由当前样式渐渐改为新样式的动画效果
可以改变任意多的样式任意多的次数
关键词"from" 和 “to” 等同于0%和100%
动画属性
简写属性按照上述次序
速率曲线的细节:
值: steps(number) — 指分步长来进举措画
3d转换
3d位移: translate3d(x, y, z)
3d旋转: rotate3d(x, y, z, deg) 自定义坐标轴旋转(矢量)
rotateX(deg) 绕X轴旋转, 正值为正方向(用左手法则判断正方向, 大拇指指向坐标轴正方向, 则四指弯曲方向指向旋转正方向)
rotateY(deg) 绕Y轴旋转
rotateZ(deg) 绕Z轴旋转
透视: perspective
透视也称为视距, 视距就是人的眼睛间隔屏幕的间隔
透视的单位是像素
透视一般写在被观察盒子的父盒子上, 也可以写在祖先盒子上
增加立体感的必要属性
3d呈现: transform-style
控制子元素是否开启三维立体空间
默认是关闭, 其值为flat
preserve-3d值为开启
代码写给父级元素, 但影响的是子盒子
web服务器
服务器是提供计算的设备, 是一台计算机.
Web服务器一般指网站服务器, 是指驻留于因特网上某种范例计算机的步伐, 可以向浏览器等Web客户端提供文档, 也可以放置网站文件, 让全天下浏览; 可以放置数据文件, 让全天下下载.
根据服务器在网络中所在的位置差别, 分为本地服务器和远程服务器(通过域名访问网站).
移动端基础
视口
视口是浏览器显示页面的屏幕地区
布局视口
为解决早期pc端页面在移动端显示的问题, 移动端浏览器默认设置的一个视口
视觉视口
它是用户正在看到的网页的地区
理想视口
为了使网站在移动端最有理想的浏览和阅读宽度而设定, 需要手动添加meta视口标签关照浏览器操作
meta视口标签
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0 user-scalable=1">
复制代码
二倍图
物理像素
物理像素是屏幕显示的最小颗粒, 在电脑端开发像素与其是一一对应的关系
物理像素比
在移动端中, 开发像素与物理像素成比例, 一般是二倍
为了解决图片模糊问题, 我们准备图片时的图片大小要比现实显示大两倍, 然后手动(CSS)缩小一半
背景缩放
使用background-size: w h;属性来设置/只写宽度, 高度会等比例缩放
预设值:
cover: 覆盖整个盒子, 但图片可能显示不全
contain: 图形扩展至比列稳定的前提下的最大图片, 但不能铺满整个盒子, 可能有空白地区
移动端开发
有两种方案:
单独制作(主流)
响应式计划
流式布局
通过设置盒子的百分比设置来布局, 通常设置min-width等属性来限定布局
示例:
html
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/index.css">
<title>京东首页</title>
</head>
<body>
<header class="app">
<ul class="clearfix">
<li><img src="./image/close.png" alt=""></li>
<li><img src="./image/logo.png" alt=""></li>
<li><span>打开京东APP, 购物更轻松</span></li>
<li><span>立即打开</span></li>
</ul>
</header>
<article class="bigSearch">
<div class="search-wrap">
<ul class="clearfix">
<li><span>class</span></li>
<li><input type="search">
<div class="jd"><img src="./image/jd.png" alt=""></div>
<div class="searchIcon"><img src="./image/搜索.svg" alt=""></div>
</li>
<li><span>登录</span></li>
</ul>
</div>
</article>
<article class="mid">
<ul class="clearfix">
<li><a href=""><img src="./image/pic11.dpg" alt=""></a></li>
<li><a href=""><img src="./image/pic22.dpg" alt=""></a></li>
<li><a href=""><img src="./image/pic33.dpg" alt=""></a></li>
</ul>
</article>
<article class="classic">
<ul class="clearfix">
<li><a href=""></a><span>京东超市</span></li>
<li><a href=""></a><span>京东超市</span></li>
<li><a href=""></a><span>京东超市</span></li>
<li><a href=""></a><span>京东超市</span></li>
<li><a href=""></a><span>京东超市</span></li>
</ul>
<ul class="clearfix">
<li><a href=""></a><span>京东超市</span></li>
<li><a href=""></a><span>京东超市</span></li>
<li><a href=""></a><span>京东超市</span></li>
<li><a href=""></a><span>京东超市</span></li>
<li><a href=""></a><span>京东超市</span></li>
</ul>
</article>
<footer class="footer">
<ul class="clearfix">
<li><a href=""><img src="./image/new1.dpg" alt=""></a></li>
<li><a href=""><img src="./image/new2.dpg" alt=""></a></li>
<li><a href=""><img src="./image/new3.dpg" alt=""></a></li>
</ul>
</footer>
</body>
</html>
复制代码
css
body {
width: 100%;
min-width: 320px;
max-width: 640px;
margin: 0 auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #666;
line-height: 1.5;
}
.app ul {
width: 100%;
color: #fff;
line-height: 45px;
text-align: center;
background-color: #333333;
}
.app ul li {
float: left;
height: 45px;
}
.app ul li:nth-child(1) {
width: 8%;
}
.app ul li:nth-child(1) img {
width: 10px;
height: 10px;
vertical-align: middle;
}
.app ul li:nth-child(2) {
width: 10%;
}
.app ul li:nth-child(2) img {
width: 30px;
height: 30px;
vertical-align: middle;
}
.app ul li:nth-child(3) {
width: 57%;
}
.app ul li:nth-child(4) {
width: 25%;
background-color: #f63515;
}
.bigSearch {
width: 100%;
height: 300px;
background-image: url("../image/banner.dpg");
background-size: 100% 300px;
}
.bigSearch .search-wrap ul li {
float: left;
height: 44px;
line-height: 44px;
}
.bigSearch .search-wrap ul li:nth-child(1) {
position: relative;
width: 10%;
text-indent: -9999px;
}
.bigSearch .search-wrap ul li:nth-child(1)::after {
content: "";
position: absolute;
left: 0px;
top: 2px;
width: 40px;
height: 40px;
background-image: url("../image/jd-sprites.png");
background-position: -4px -58px;
transform: scale(0.5);
}
.bigSearch .search-wrap ul li:nth-child(2) {
position: relative;
width: 75%;
}
.bigSearch .search-wrap ul li:nth-child(2) .jd {
position: absolute;
left: 10px;
top: 3px;
}
.bigSearch .search-wrap ul li:nth-child(2) .jd::after {
content: "";
position: absolute;
left: 28px;
top: 9px;
height: 20px;
border-right: 1px solid #000;
}
.bigSearch .search-wrap ul li:nth-child(2) .jd img {
width: 20px;
height: 15px;
}
.bigSearch .search-wrap ul li:nth-child(2) .searchIcon {
position: absolute;
left: 50px;
top: 6px;
}
.bigSearch .search-wrap ul li:nth-child(2) .searchIcon img {
width: 20px;
height: 20px;
}
.bigSearch .search-wrap ul li:nth-child(2) input {
width: 100%;
height: 30px;
border: none;
border-radius: 20px;
text-indent: 80px;
}
.bigSearch .search-wrap ul li:nth-child(3) {
width: 15%;
text-align: center;
color: #fff;
}
.mid {
width: 100%;
height: 180px;
}
.mid ul li {
float: left;
}
.mid ul li img {
width: 100%;
height: 180px;
}
.mid ul li:nth-child(1) {
width: 25%;
}
.mid ul li:nth-child(2) {
width: 50%;
}
.mid ul li:nth-child(3) {
width: 25%;
}
.classic {
width: 100%;
padding: 0 10px;
}
.classic ul li {
float: left;
width: 20%;
height: 80px;
text-align: center;
}
.classic ul li a {
display: block;
width: 40px;
height: 40px;
margin: 0 auto;
background-image: url("../image/jd-sprites.png");
background-position: 0px 9px;
}
.footer {
width: 100%;
}
.footer ul li {
float: left;
box-sizing: border-box;
border-right: 1px solid #ccc;
}
.footer ul li img {
width: 100%;
height: 150px;
}
.footer ul li:nth-child(1) {
width: 50%;
}
.footer ul li:nth-child(2) {
width: 25%;
}
.footer ul li:nth-child(3) {
width: 25%;
border: none;
}
复制代码
flex布局
优点: 操作方便, 实用于移动端
操作: 在父盒子中设置: display: flex;
注意: 设置之后, 子元素float, clear和vertical-align属性将失效.
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/)
Powered by Discuz! X3.4
