2025寒假第六周前端条记 - 动画和流式布局

李优秀  论坛元老 | 2025-2-15 15:40:08 | 来自手机 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1379|帖子 1379|积分 4137

CSS新特性2

2d转换

使用transform属性, 可以实现元素的位移, 旋转, 缩放等效果


  • 移动: translate(X, Y)

    • 不会影响其他盒子的位置
    • 对行盒没有效果
    • 百分比按盒子的高和宽
    • 盒子水平垂直居中的新方法:
      1. position: absolute;
      2. top: 50%;
      3. left: 50%;
      4. width: 200px;
      5. height: 200px;
      6. transform: translate(-50%, -50%);
      复制代码

  • 旋转: rotate(度数deg)—正值为顺时针/负值为逆时针
    transform-origin: x y; — 设置转换中央点(默认是50% 50%, 也可以写方位名词, 如center center)
  • 缩放: scale(x, y) — x和y表示倍数/小数表示缩小, 没有单位
    注意: 放大/缩小时四个边都会变革, 且不会影响其他盒子, 也可设置缩放中央点.
注意:

  • 简写按照以上次序来写
  • 次序改变会影响其效果(先旋转会改变坐标轴方向)
  • 位移一定写到最前面
动画

步调


  • 先定义动画
  • 再使用/调用动画
定义动画

eg:
  1. @keyframes 动画名称 {
  2.     0%{
  3.         width: 100px;
  4.     }
  5.     100%{
  6.         width: 200px;
  7.     }
  8. }
复制代码
调用动画

eg:
  1. div {
  2.     ------;
  3.     ------;
  4.     animation-name: 动画名称;
  5.     animation-duration: 持续时间;
  6. }
复制代码
动画序列


  • 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视口标签

  1. <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
    1.   <!DOCTYPE html>
    2.   <html lang="zh-Hans">
    3.   <head>
    4.       <meta charset="UTF-8">
    5.       <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.       <link rel="stylesheet" href="./css/reset.css">
    7.       <link rel="stylesheet" href="./css/normalize.css">
    8.       <link rel="stylesheet" href="./css/index.css">
    9.       <title>京东首页</title>
    10.   </head>
    11.   <body>
    12.       <header class="app">
    13.           <ul class="clearfix">
    14.               <li><img src="./image/close.png" alt=""></li>
    15.               <li><img src="./image/logo.png" alt=""></li>
    16.               <li><span>打开京东APP, 购物更轻松</span></li>
    17.               <li><span>立即打开</span></li>
    18.           </ul>
    19.       </header>
    20.       <article class="bigSearch">
    21.           <div class="search-wrap">
    22.               <ul class="clearfix">
    23.                   <li><span>class</span></li>
    24.                   <li><input type="search">
    25.                   <div class="jd"><img src="./image/jd.png" alt=""></div>
    26.                   <div class="searchIcon"><img src="./image/搜索.svg" alt=""></div>
    27.                   </li>
    28.                   <li><span>登录</span></li>
    29.               </ul>
    30.           </div>
    31.       </article>
    32.       <article class="mid">
    33.           <ul class="clearfix">
    34.               <li><a href=""><img src="./image/pic11.dpg" alt=""></a></li>
    35.               <li><a href=""><img src="./image/pic22.dpg" alt=""></a></li>
    36.               <li><a href=""><img src="./image/pic33.dpg" alt=""></a></li>
    37.           </ul>
    38.       </article>
    39.       <article class="classic">
    40.           <ul class="clearfix">
    41.               <li><a href=""></a><span>京东超市</span></li>
    42.               <li><a href=""></a><span>京东超市</span></li>
    43.               <li><a href=""></a><span>京东超市</span></li>
    44.               <li><a href=""></a><span>京东超市</span></li>
    45.               <li><a href=""></a><span>京东超市</span></li>
    46.           </ul>
    47.           <ul class="clearfix">
    48.               <li><a href=""></a><span>京东超市</span></li>
    49.               <li><a href=""></a><span>京东超市</span></li>
    50.               <li><a href=""></a><span>京东超市</span></li>
    51.               <li><a href=""></a><span>京东超市</span></li>
    52.               <li><a href=""></a><span>京东超市</span></li>
    53.           </ul>
    54.       </article>
    55.       <footer class="footer">
    56.           <ul class="clearfix">
    57.               <li><a href=""><img src="./image/new1.dpg" alt=""></a></li>
    58.               <li><a href=""><img src="./image/new2.dpg" alt=""></a></li>
    59.               <li><a href=""><img src="./image/new3.dpg" alt=""></a></li>
    60.           </ul>
    61.       </footer>
    62.   </body>
    63.   </html>
    复制代码
  • css
    1.   body {
    2.       width: 100%;
    3.       min-width: 320px;
    4.       max-width: 640px;
    5.       margin: 0 auto;
    6.       font-family: Arial, Helvetica, sans-serif;
    7.       font-size: 14px;
    8.       color: #666;
    9.       line-height: 1.5;
    10.   }
    11.   
    12.   .app ul {
    13.       width: 100%;
    14.       color: #fff;
    15.       line-height: 45px;
    16.       text-align: center;
    17.       background-color: #333333;
    18.   }
    19.   
    20.   .app ul li {
    21.       float: left;
    22.       height: 45px;
    23.   }
    24.   
    25.   .app ul li:nth-child(1) {
    26.       width: 8%;
    27.   }
    28.   
    29.   .app ul li:nth-child(1) img {
    30.       width: 10px;
    31.       height: 10px;
    32.       vertical-align: middle;
    33.   }
    34.   
    35.   .app ul li:nth-child(2) {
    36.       width: 10%;
    37.   
    38.   }
    39.   
    40.   .app ul li:nth-child(2) img {
    41.       width: 30px;
    42.       height: 30px;
    43.       vertical-align: middle;
    44.   }
    45.   
    46.   .app ul li:nth-child(3) {
    47.       width: 57%;
    48.   }
    49.   
    50.   .app ul li:nth-child(4) {
    51.       width: 25%;
    52.       background-color: #f63515;
    53.   }
    54.   
    55.   .bigSearch {
    56.       width: 100%;
    57.       height: 300px;
    58.       background-image: url("../image/banner.dpg");
    59.       background-size: 100% 300px;
    60.   }
    61.   
    62.   .bigSearch .search-wrap ul li {
    63.       float: left;
    64.       height: 44px;
    65.       line-height: 44px;
    66.   }
    67.   
    68.   .bigSearch .search-wrap ul li:nth-child(1) {
    69.       position: relative;
    70.       width: 10%;
    71.       text-indent: -9999px;
    72.   }
    73.   
    74.   .bigSearch .search-wrap ul li:nth-child(1)::after {
    75.       content: "";
    76.       position: absolute;
    77.       left: 0px;
    78.       top: 2px;
    79.       width: 40px;
    80.       height: 40px;
    81.       background-image: url("../image/jd-sprites.png");
    82.       background-position: -4px -58px;
    83.       transform: scale(0.5);
    84.   }
    85.   
    86.   .bigSearch .search-wrap ul li:nth-child(2) {
    87.       position: relative;
    88.       width: 75%;
    89.   }
    90.   
    91.   .bigSearch .search-wrap ul li:nth-child(2) .jd {
    92.       position: absolute;
    93.       left: 10px;
    94.       top: 3px;
    95.   }
    96.   
    97.   .bigSearch .search-wrap ul li:nth-child(2) .jd::after {
    98.       content: "";
    99.       position: absolute;
    100.       left: 28px;
    101.       top: 9px;
    102.       height: 20px;
    103.       border-right: 1px solid #000;
    104.   }
    105.   
    106.   .bigSearch .search-wrap ul li:nth-child(2) .jd img {
    107.       width: 20px;
    108.       height: 15px;
    109.   }
    110.   
    111.   .bigSearch .search-wrap ul li:nth-child(2) .searchIcon {
    112.       position: absolute;
    113.       left: 50px;
    114.       top: 6px;
    115.   }
    116.   
    117.   .bigSearch .search-wrap ul li:nth-child(2) .searchIcon img {
    118.       width: 20px;
    119.       height: 20px;
    120.   }
    121.   
    122.   .bigSearch .search-wrap ul li:nth-child(2) input {
    123.       width: 100%;
    124.       height: 30px;
    125.       border: none;
    126.       border-radius: 20px;
    127.       text-indent: 80px;
    128.   }
    129.   
    130.   .bigSearch .search-wrap ul li:nth-child(3) {
    131.       width: 15%;
    132.       text-align: center;
    133.       color: #fff;
    134.   }
    135.   
    136.   .mid {
    137.       width: 100%;
    138.       height: 180px;
    139.   }
    140.   
    141.   .mid ul li {
    142.       float: left;
    143.   }
    144.   
    145.   .mid ul li img {
    146.       width: 100%;
    147.       height: 180px;
    148.   }
    149.   
    150.   .mid ul li:nth-child(1) {
    151.       width: 25%;
    152.   }
    153.   
    154.   .mid ul li:nth-child(2) {
    155.       width: 50%;
    156.   }
    157.   
    158.   .mid ul li:nth-child(3) {
    159.       width: 25%;
    160.   }
    161.   
    162.   .classic {
    163.       width: 100%;
    164.       padding: 0 10px;
    165.   }
    166.   
    167.   .classic ul li {
    168.       float: left;
    169.       width: 20%;
    170.       height: 80px;
    171.       text-align: center;
    172.   }
    173.   
    174.   .classic ul li a {
    175.       display: block;
    176.       width: 40px;
    177.       height: 40px;
    178.       margin: 0 auto;
    179.       background-image: url("../image/jd-sprites.png");
    180.       background-position: 0px 9px;
    181.   }
    182.   
    183.   .footer {
    184.       width: 100%;
    185.   }
    186.   
    187.   .footer ul li {
    188.       float: left;
    189.       box-sizing: border-box;
    190.       border-right: 1px solid #ccc;
    191.   }
    192.   
    193.   .footer ul li img {
    194.       width: 100%;
    195.       height: 150px;
    196.   }
    197.   
    198.   .footer ul li:nth-child(1) {
    199.       width: 50%;
    200.   }
    201.   
    202.   .footer ul li:nth-child(2) {
    203.       width: 25%;
    204.   }
    205.   
    206.   .footer ul li:nth-child(3) {
    207.       width: 25%;
    208.       border: none;
    209.   }
    复制代码
flex布局



  • 优点: 操作方便, 实用于移动端
  • 操作: 在父盒子中设置: display: flex;
  • 注意: 设置之后, 子元素float, clear和vertical-align属性将失效.

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

李优秀

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

集成商 AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表