2025寒假第六周前端条记 - 动画和流式布局
CSS新特性22d转换
使用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%
动画属性
https://i-blog.csdnimg.cn/direct/e87e912a01d94767916081a68f24c6c6.png#pic_center
简写属性按照上述次序
速率曲线的细节:
值: 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等属性来限定布局
[*]示例:
https://i-blog.csdnimg.cn/direct/d32ba7d406b7431a95b1c7a68b8e2f11.png
[*] 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企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]