css初级

原创 已于 2025-06-20 09:35:38 修改 · 557 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #前端

于 2023-08-03 09:47:27 首次发布

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

开始前介绍一些ui框架：vant：支持vue移动端，部分小程序，react移动端，antdesignVue：vue版web，antdesign：react版web

一、旋转效果

   .smallImg {
   
      //旋转中心，一般是图片时才会用到（图片不对称），不写默认是盒子中心
      transform-origin: 50% 60%;
      //动画持续时间，动画变化曲线   
      transition: all 3s;
    }
    .smallImg:hover {
   
    //绕Z轴旋转
      transform: rotateZ(360deg)
    }
   <img src="small.png" alt="" class="smallImg">

二、animation

查看csdn

@keyframes 规定动画
animation-name 规定 @keyframes 动画的名称（必须的）
animation-duration 规定动画完成一个周期所花费的秒或毫秒，默认是 0（必须的）
animation-timingfunction  规定动画的速度曲线，默认是“ease”
animation-delay 规定动画何时开始，默认是 0
animation-iteration-count 规定动画被播放的次数，默认是 1，还有 infinite
animation-direction 规定动画是否在下一周期逆向播放，默认是 "normal", alternate 逆播放
animation-play-state 规定动画是否正在运行或暂停。默认是 "running", 还有 "paused"

animation 所有动画属性的简写属性，除了animation-play-state 属性

  @keyframes a {
   
            0% {
   
                width: 300px;
            }
 
            50% {
   
                width: 800px;
            }
 
            100% {
   
                width: 300px;
            }
        }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{
   
      height: 200px;
      height: 100px;
      overflow: hidden;
    }
    table{
   
      animation: up 15s linear  infinite ;
    }
    @keyframes up{
   
      0%{
   

      }
      100%{
   
        transform: translateY(-50%);
      }
    }
    table:hover {
   
      animation-play-state: paused;
    }
  </style>
</head>
<body>
  <div>
    <table>
      <tbody>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>
      </tbody>
      
     </table> 
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
   <script>
    let tab=`
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
  `
    $('tbody').append(tab)
   </script>
</body>
</html>

雪人走路动画

效果
在这里插入图片描述
资源：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            background-image: url(./image/雪人.jpg);
            height:180px;
            width: 123px;
            margin: 0 auto;
            animation-name: run;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-timing-function: steps(4);
           
        }
        @keyframes run{
            from{
                background-position: 0 0;
            }
            to{
                background-position: -487px 0;
            }
                
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

三、rem适配(配合flexible.js效果更佳)

适配是适应宽度，如果高度（即内容多少是可以变的）是变化的，则定位或浮动的高度不能写成响应式或百分比，否则位置会发生变化

查看连接
注意：设计稿宽度可以随意设置，就是用于比例计算而已
rpx 是微信小程序独有的，且不需要计算，会自适应

设计稿宽度：400px

移动设备：400px
//如果不想x，也可以设置设计稿宽度调整比例
首先，通过设计稿宽度，设置html的 font-size的值为 移动设备 / 设计稿宽度 *	 x = x px（x可为任意值，下方实例中使用为10，即 1rem = 10px）。

当相同的代码运行在屏幕为小于400px的设备上时，js动态设置html的 font-size= 移动设备 / 设计稿宽度 * x，整体比例不变，以此达到移动适配的效果

rem插件，rem大小设置要和当前屏幕的html的font-size大小保持一致，不一致也行，反正都是成比例变化的

<!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: 1rem /* 100px -> 1rem */;
      height: 1rem /* 100px -> 1rem */;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div>

  </div>
  <!-- 引入flexible.js  修改源码，原来分为10分先改成24份 -->
  <!-- flexible.js可在github下载 -->
  <script src="./index.js"></script>
</body>
</html>

适配总结：
省去写媒体查询，最方便：
1.引入flexible.js（修改为24份更有效）
2.rem插件随意设置一个值（手机50，电脑100）
3.开始写即可。
其他解决方案：
1.autofit，不需要flexible.js
2.px2rem（需要flexible.js）：
添加链接描述
看这个
vue2直接可以用
配置参考
flexible.js

(function flexible(window, document) {
   
  var docEl = document.documentElement;
  var dpr = window.devicePixelRatio || 1;
 
  // adjust body font size
  function setBodyFontSize() {
   
    if (document.body) {
   
      document.body.style.fontSize = 12 * dpr + "px";
    } else {
   
      document.addEventListener("DOMContentLoaded", setBodyFontSize);
    }
  }
  setBodyFontSize();
 
  // set 1rem = viewWidth / 10
  function setRemUnit() {
   
    var rem = docEl.clientWidth / 24;
    docEl.style.fontSize = rem + "px";
  }
 
  setRemUnit();
 
  // reset rem unit on page resize
  window.addEventListener("resize", setRemUnit);
  window.addEventListener("pageshow", function(e) {
   
    if (e.persisted) {
   
      setRemUnit();
    }
  });
 
  // detect 0.5px supports
  if (dpr >= 2) {
   
    var fakeBody = document.createElement("body");
    var testElement = document.createElement("div");
    testElement.style.border = ".5px solid transparent";
    fakeBody.appendChild(testElement);
    docEl.appendChild(fakeBody);
    if (testElement.offsetHeight === 1) {
   
      docEl.classList.add("hairlines");
    }
    docEl.removeChild(fakeBody);
  }
})(window, document);

四、媒体查询

点击查看链接

//包含小的，不包含大的
@media screen and (min-width:960px) and (max-width:1200px){
   
    body{
   background:yellow;}
}

五、grid布局

点击参考
grid布局常用作移动端布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @media screen and (max-width:350px) {
   
      html{
   
        font-size: 100px;
      }
    }
    @media screen and (min-width:350px) {
   
      html{
   
        font-size: 120px;
      }
    }
    .content{
   
      display: grid;
      //行可能是不确定的，auto-fill自动填充
      grid-template-rows: repeat(auto-fill,1rem );
      grid-template-columns: 1.2rem   1.2rem  ;
      column-gap: .2rem ;
      row-gap: .1rem ;
      justify-content: center;
    }
    .content div{
   
      text-align: center;
      background: green;
    }
  </style>
</head>
<body>
  <div class="content">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
  </div>
</body>
</html>

六、overflow: auto实现滚动，可以滚动盒子必须有高度

<div style="margin-bottom: 50px;height: 200px; overflow: auto;">
    <ul id="couponsContainer" >
      <li>111</li>
      <li>111</li>
      <li>111</li>
      <li>111</li>
      <li>111</li>
      <li>111</li>
      <li>111</li>
      <li>111</li>
      <li>111</li>
      <li>111</li>
      <li>111</li>
      <li>111</li>
      <li>111</li>
      <li>111</li>
      <li>111</li>
    </ul> 
  </div>

七、遮罩层

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .zhezhaoDiv{
   
      background-color: rgba(0,0,0,0.7);
      /* 占满全屏 */
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
    }
    .zheContent{
   
      width: 100px;
      height: 100px;
      background-color: #fff;
      position:absolute;
      /* 居中 */
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin:  auto;
      overflow: hidden;
    }
    .couponsContainer
最低0.47元/天 解锁文章
qq_54010685
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值