CSS真的很麻烦，把CSS语法学会了，提升你的编码能力还是绰绰有

作者: 一眼万年的星空 | 来源:发表于2022-03-14 19:03 被阅读0次

CSS真的很麻烦，把CSS语法学会了，提升你的编码能力还是绰绰有
牛年绰绰有“鱼”
光影绰绰
暗影绰绰
影绰绰
影绰绰
眼光要长远
鞭影绰绰
倩影绰绰，魂牵梦绕
光影绰绰（三）

css3画热咖啡

<!DOCTYPE html>
<html lang=“en”>
<head>
  <meta charset="UTF-8”>
  <title></title>
  <style lang=“”>
    .tea-cup-container {
      margin: 0 auto;
      padding: 0;
      height: 80vh;
      aspect-ratio: 1/2;
      resize: both;
      overflow: auto;
      background-color: #607d8b;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
    }

    .tea-cup-container * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .tea-cup-container .frame {
      position: relative;
      padding: 1rem;
      width: 90%;
      aspect-ratio: 1/1;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-direction: column-reverse;
    }

    .tea-cup-container .cup {
      position: relative;
      width: 56%;
      aspect-ratio: 1;
      border-bottom-left-radius: 45%;
      border-bottom-right-radius: 45%;
      background: linear-gradient(to right, #f9f9f9, #d9d9d9);
    }

    .tea-cup-container .top {
      width: 100%;
      border-radius: 50%;
      aspect-ratio: 14/3;
      margin-top: -10.7%;
      background: linear-gradient(to right, #f9f9f9, #d9d9d9);
      display: flex;
      align-items: center;
      justify-content: center;
    }



    .tea-cup-container .circle {
      width: 92.9%;
      height: 83.3%;
      border-radius: 50%;
      background: linear-gradient(to left, #f9f9f9, #d9d9d9);
      overflow: hidden;
    }

    .tea-cup-container .tea {
      background: linear-gradient(#c57e65, #e28462);
      width: 100%;
      height: 100%;
      border-radius: 50%;
      margin-top: 7.1%;
    }

    .tea-cup-container .handle {
      width: 35%;
      aspect-ratio: 5 / 9;
      margin-left: auto;
      margin-right: -30%;
      margin-top: -2%;
    }

    .tea-cup-container .handle path {
      fill: #dcdcdc;
    }

    .tea-cup-container .handle>svg {
      width: 100%;
      height: 100%;
    }

    .tea-cup-container .plate {
      position: relative;
      background: green;
      margin-top: -32%;
      width: 100%;
      aspect-ratio: 5 / 2;
      background: linear-gradient(to right, #f9f9f9, #e7e7e7);
      border-radius: 50%;
      box-shadow: 0 35px 35px rgba(0, 0, 0, 0.2);
    }

    .tea-cup-container .plate::before {
      content: ‘’;
      position: absolute;
      top: 3%;
      left: 2%;
      right: 2%;
      bottom: 3%;
      border-radius: 50%;
      background: linear-gradient(to left, #f9f9f9, #e7e7e7);
    }

    .tea-cup-container .plate::after {
      content: ‘’;
      position: absolute;
      top: 6%;
      left: 6%;
      right: 6%;
      bottom: 6%;
      border-radius: 50%;
      background: radial-gradient(rgba(0, 0, 0, 0.2) 25%, transparent, transparent);
    }

    .tea-cup-container .vapour {
      position: absolute;
      width: 100%;
      display: flex;
      justify-content: space-between;
      z-index: 1;
      padding: 0 7%;
      /* background-color: rgba(0, 255, 0, 0.5); */
    }

    .tea-cup-container .vapour span {
      position: relative;
      bottom: 0px;
      display: block;
      margin-top: 0px;
      margin-bottom: 16.7%;
      width: 6%;
      aspect-ratio: 1 / 9;
      background: white;
      border-radius: 50%;
      opacity: 0;
      filter: blur(10px);
      animation: vapour-animate 5s linear infinite;
      animation-delay: calc(var(--i) * -0.5s);
    }

    @keyframes vapour-animate {
      0% {
        transform: translateY(0) scaleX(1) rotate(0deg);
      }

      15% {
        opacity: 1;
      }

      50% {
        transform: translateY(-125%) scaleX(5) rotate(calc((var(--i) - 10) * -2deg));
      }

      95% {
        opacity: 0;
      }

      100% {
        transform: translateY(-250%) scaleX(10) rotate(calc((var(--i) - 10) * 2deg));
        opacity: 0;
      }
    }
  </style>
</head>

<body>
  <div class="tea-cup-container”>
    <div class=“frame”>
      <div class=“plate”>
      </div>
      <div class=“cup”>
        <div class=“top”>
          <div class=“vapour”>
            <span style="--i: 6;"></span>
            <span style="--i: 13;"></span>
            <span style="--i: 7;"></span>
            <span style="--i: 18;"></span>
            <span style="--i: 3;"></span>
            <span style="--i: 20;"></span>
            <span style="--i: 14;"></span>
            <span style="--i: 17;"></span>
            <span style="--i: 12;"></span>
            <span style="--i: 4;"></span>
            <span style="--i: 9;"></span>
            <span style="--i: 19;"></span>
            <span style="--i: 8;"></span>
            <span style="--i: 2;"></span>
            <span style="--i: 11;"></span>
            <span style="--i: 15;"></span>
            <span style="--i: 1;"></span>
            <span style="--i: 10;"></span>
            <span style="--i: 16;"></span>
            <span style="--i: 5;"></span>
          </div>
          <div class=“circle”>
            <div class="tea"></div>
          </div>
        </div>
        <div class=“handle”>
          <svg viewBox="0 0 5 9”>
            <path d="M 0 9 C 4 9 7 0 0 0 M 0 1 C 5 1 3 8 0 8 Z"></path>
          </svg>
        </div>
      </div>
    </div>
  </div>

  <script>

  </script>
</body>

</html>

css自适应布局方案

一、百分比布局宽度百分比，高度px布局

二、rem布局①自定义rem尺寸

//方式一
    const deviceWidth = document.documentElement.clientWidth || document.body.clientWidth;
    document.querySelector('html').style.fontSize = deviceWidth / 7.5 + ‘px’;
    
//方式二
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + “px”;
    window.addEventListener(
      “resize”,
      function() {
        document.documentElement.style.fontSize =
          document.documentElement.clientWidth / 7.5 + “px”;
      },
      false
    );
//方式一和方式二 效果一样

②采用插件

常用插件：

amfe/lib-flexible(已停用) https://github.com/amfe/lib-flexible

gitHub官网也推荐使用viewport布局，毫无疑问，viewport布局是目前最好的。

amfe-flexible教程如下：

安装：

npm install amfe-flexible —save

npm install postcss-pxtorem --save-dev

在main.js中引入：

import'amfe-flexible’

3.配置postcss-pxtorem

vue-cli3配置方式：在根路径下新增postcss.config.js文件

module.exports = {
  "plugins": {
    "postcss-pxtorem": {
        rootValue: 192, // 根据设计图尺寸写，设计图是1920，就写192
        propList: ['*'], // 需要被转换的属性
        selectorBlackList: [] // 不进行px转换的选择器
    }
  }
}

三、viewport方案

该方案就是使用vw、vh为单位来布局。
在vue中可以使用插件，将px自动装维vw。

1、插件安装：

npm i postcss-px-to-viewport -D

2.在项目根目录下添加.postcssrc.js文件

//添加如下配置：
module.exports = {
  plugins: {
    autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等
    "postcss-px-to-viewport": {
      unitToConvert: "px", // 要转化的单位
      viewportWidth: 750, // UI设计稿的宽度
      viewportHeight: 1334, // 视窗的高度 根据750设备的宽度来指定，一般指定1334，也可以不配置
      unitPrecision: 3, // 转换后的精度，即小数点位数
      propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
      viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
      fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
      selectorBlackList: ["wrap", ".ignore-class"], // 指定不转换为视窗单位的类名，这里设置了两个不需要转换的class类名
      minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
      mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
      replace: true, // 是否转换后直接更换属性值
      exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
      landscape: false // 是否处理横屏情况
    },
    'postcss-viewport-units': {}, // 给vw、vh、vmin和vmax做适配的操作,这是实现vw布局必不可少的一个插件
  }
};

propList用法展示：
propList: ["!font-size"],这表示：所有css属性的属性的单位都进行转化，除了font-size的其他所有属性。

3、兼容vant

vant的ui稿是375px，再使用的时候我们可以以动态设置vant中的desiginWidth为375。

//配置如下：
module.exports = ({ file }) => {
  const designWidth = file.dirname.includes('node_modules/vant') ? 375 : 750;
  return {
    plugins: {
      autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等
      "postcss-px-to-viewport": {
        unitToConvert: "px", // 要转化的单位
        viewportWidth: designWidth, // UI设计稿的宽度
        // 视窗的高度 根据750设备的宽度来指定，一般指定1334，也可以不配置
        viewportHeight: 1334, 
        unitPrecision: 3, // 转换后的精度，即小数点位数
        propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
        viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
        fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
        // 指定不转换为视窗单位的类名，这里设置了两个不需要转换的class类名
        selectorBlackList: ["wrap", ".ignore-class”],
        minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
        mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
        replace: true, // 是否转换后直接更换属性值
        exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
        landscape: false // 是否处理横屏情况
      },
       // 给vw、vh、vmin和vmax做适配的操作,这是实现vw布局必不可少的一个插件
      'postcss-viewport-units': {}, 
    }
  }
}

四、移动端调试插件vConsole

npm install vconsole --save-dev

// 在main.js中使用
import Vconsole from ‘vconsole’
let vConsole = new Vconsole()
Vue.use(vConsole)

插件效果如下，会在右下角出现console按钮，方便查看控制台：

1111

css实现按钮冷光效果

效果一

111

<!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 lang=“”>
    *{     /*清除样式*/
        margin: 0;
        padding: 0;
    
    }
    body{
        /* 设置整体背景颜色 */
        background-color: #000;
    }
    a{  /*去掉下划线*/
        text-decoration: none; 
        /* 绝对定位，东西放在那就不动了 */
        position: absolute;
        /* 下面三个实现彻底居中，left和top是以左上角为原点，所以不是中心，用translate实现自身移动50% */
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        /* 设置字体大小 */
        font-size: 24px;
        /* 实现渐变色，90deg表示一个角度开始 */
        background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
        /* 背景色放大 */
        background-size: 400%;
        /* 图形大小 */
        width: 400px;
        height: 100px;
        /* 行高 */
        line-height: 100px;
        /* 文本居中 */
        text-align: center;
        /* 字体颜色 */
        color: #fff;
        /* 字母变大写 */
        text-transform: uppercase;
        /* 设置成胶囊状 */
        border-radius: 50px;
        /* 值为正数在上面显示，反之 */
        z-index: 1;
    }
    /* 设置发光 */
    
    a::before{
        content: “”;
        position: absolute;
        /* 设置发光范围 */
        left: -5px;
        right: -5px;
        top: -5px;
        bottom: -5px;
        /* 设置发光颜色 */
        background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
        background-size: 400%;
        border-radius: 50px;
        /* filter实现高斯模糊 */
        filter: blur(20px);
        z-index: -1;
    }
    
    a:hover::before{
        animation: sun 8s infinite;
    }
    /* 鼠标经过产生的效果 */
    a:hover{
        /* 产生8秒的效果，sun是名称*/
        animation: sun 8s infinite;
    }
    /* 设置流光 */
    @keyframes sun{
        100%{
            /* 以x轴为基准向左移动4个自身大小 */
            background-position: -400% 0;
        }
    }
    
  </style>
</head>
<body>
  <a href="#">sunbutton</a>
</body>
</html>

CSS3实现雷达特效

<!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>雷达</title>
  <style>
  .radar {
    overflow: hidden;
    position: relative;
    margin: 200px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #5ef2ff;
    box-sizing: border-box;
  }

.radar::before {
  width: 100px; 
  height: 200px;
  content: ‘’;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  box-sizing: border-box;
  border-left: 1px solid #5ef2ff;
}

.radar::after {
  width: 200px; 
  height: 100px;
  content: ‘’;
  display: block;
  box-sizing: border-box;
  border-bottom: 1px solid #5ef2ff;
}

.fan {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-sizing: border-box;
  border: 1px solid #5ef2ff;
  width: 100px;
  height: 100px;
}

.fan::after {
  content: “”;
  width: 100px;
  height: 100px;
  display: block;
  box-sizing: border-box;
  position: relative;
  top: -50%;
  right: -50%;
  transform-origin: 0% 100%;
  border-bottom: 3px solid transparent;
  /* border-image: linear-gradient(to right, transparent, #5ef2ff); */
  border-image-slice: 3;
  background: transparent;
  background-image: linear-gradient(to right, transparent, #9bfdfd);
  animation: rotateAnimate 2s linear infinite;
}

@keyframes rotateAnimate {
  from {
    transform: rotate(0deg) skew(-10deg)
  }
  to {
    transform: rotate(360deg) skew(-10deg)
  }
}
  </style>
</head>
<body>
  <div class=“radar”>
    <div class="fan"></div>
  </div>
</body>
</html>

grid布局

网格布局有很多用处，主要用来快速搭建页面目录结构。
先设置一个html布局。

<div class=“wrapper”>
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

一、容器元素

容器元素有如下几个属性：
大致可以划分为

// 设置容器为网格模式
display: grid;

// 设置网格
grid-template（grid-template-columns与grid-template-rows的缩写）
grid-template-columns
grid-template-rows
    repeat
  auto-fill
  fr
grid-template-areas
  
// 设置网格线
grid-gap
grid-column-gap
grid-row-gap

首先设置父级元素为grid布局：

.wrapper {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;  
  grid-column-gap: 10px;
  grid-row-gap: 20px;
}

1、grid-template

grid-template是grid-template-columns与grid-template-rows的缩写形式。
grid-template-columns 分别设置列数和对应列宽度（grid-template-rows同理）。比如上面意味着设置三列，每一列都是100px；
可以简写为：grid-template： 100px 100px 100px / 100px 100px 100px;

设置好容器元素后，项目元素会按照容器设置的行、列和宽高依次排列下去。一旦项目数量大于设置的网格数量（例如上面的容器元素设置了3×3的网格，而项目数量大于9或者位置超出网格区域的话，项目不会再遵从网格中的设置）。

grid-template-columns和 grid-template-rows还存在几个关键字，用来快速设置grid属性，如下：

repeat
auto-fill
fr
minmax
auto

下面我们来一一看一下：
1)repeat()
repeat有两种用法：
一种用法为：
grid-template-columns: repeat（m, n）；
repeat可以接受两个参数：m是重复的次数，n 是重复的值。
比如grid-template-columns:repeat(4, 25%); 表示为设置为4列，每列宽度是25%；
另外一种用法是：
grid-template-columns: repeat（2, 10px 20px 30px）;表示为按照后边的这种宽度模式重复两次（即6 列，宽度依次 10、20、30、10、20、30）

2）auto-fill
当容器元素宽度不确定，而项目元素宽度知晓的情况下，设置auto-fill属性。
用法为：

grid-template-columns: repeat(auto-fill, 50px);

上面意思为网格每一列宽度都为50，项目自动填充。

3）fr
fr关键字是用来行、列的比例结构的。
例如：

 // html
 <div class=“wrapper”>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
  
  // css
 .wrapper {
      display: grid;
      width: 500px;
      height: 500px;
      border: 1px solid #000;
      grid-template-columns: 1fr 1fr 2fr;
 }

可以得到三个项目宽度比例为1:1:2，盛满容器元素。
大概样子如下：

111

2、grid-gap

grid-gap用来设置网格线的宽度。

grid-column-gap表示列之前的网格线宽度（也可以简单理解为列内容之前的间距）。

grid-row-gap为行之前网格线的宽度。

3、grid-template-areas

4、网格线名称

网格线可以设置自己的名称，用来单独操作，用法如下：

.container {
   display: grid;
   grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4];
   grid-template-rows: [r1] 100px [r2] 100px [r3] 100px [r4];
 }

上面代码，我们为一个3×3的网格的横竖各4条网格线设置了名称。如图

111

下面我们通过引用网格线名称来改变项目的位置：

.item:first-child {
   grid-area: r1/c1/r3/c3;  
}

得到如下结构：

111

也可以这样设置，但是不够简便：

.item:first-child {
   /* grid-area: r1/c1/r3/c3; */
   grid-row-start: r1;
   grid-row-end: r3;
   grid-column-start: c1;
   grid-column-end: c3;
 }

二、项目元素

设置九宫格中项目元素样式（填充一下颜色，便于观看）的样式如下：

.item {
  padding: 20px;
  background: #ddd;
  text-align: center;
}

得到如下九宫格：

111

1、grid-area

可以单独为项目设置位置，我习惯用grid-area来设置。

grid-area 是grid-row 与 grid-column 的简写。

我们可以设置项目元素的位置，例如第一个元素设置为：

.item:first-child {
    background: green;
    grid-area: 1/2/2/3;
 }

得到如下结构：

grid-area的四个数字分别代表：

模块左上角起始行号

模块左上角起始列号

模块右下角结束行号

模块右下角结束列号

从这也看到项目9脱离了网格。

三、用处实践

简单列举grid布局几个常用的地方：

1、网格布局

例如element-ui的栅格布局等，传统的有24栅格布局、16栅格布局

采用grid的写法非常简单：

grid-template-columns: repeat(16, 1fr);

将页面分为了16列。
2、后台项目布局
运营后台一类的项目，设置header、aside、content
3、异形结构
例如视频网站页面等

ps:常用后台项目布局如下：

<!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>
    .item {
      background: #ddd;
      text-align: center;
      box-sizing: border-box;
    }

    html{
      height: 100%;
    }

    body{
      height: 100%;
      margin: 0;
      padding: 0;
    }
    .wrapper {
      width: 100%;
      height: 100%;
      display: grid;
      grid-template: 5% 90% 5%/ 15% 85%;
    }

    .item:first-child {
      background: #ccc;
      grid-area: 1/2/2/3;
    }

    .item:nth-child(2) { 
      grid-area: 1/1/4/2; 
      background: #666;
    }

    .item:nth-child(3) { 
      grid-area: 2/2/4/3; 
    }
  </style>
</head>
<body>
  <div class=“wrapper”>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</body>
</html>

我们可以得到如下的布局结构: header\aside\content;这是项目控制台布局的常用结构。

111

青山不改，绿水长流，谢谢大家！！！

CSS真的很麻烦，把CSS语法学会了，提升你的编码能力还是绰绰有
css3画热咖啡 css自适应布局方案一、百分比布局宽度百分比，高度px布局二、rem布局①自定义rem尺寸 ...
牛年绰绰有“鱼”
昨晚，独钓寒江，如愿爆护了。鱼获十二尾，每条1.5-3市斤不等，当钓到第十二尾时就收杆了。收杆时凌晨两点，背上钓具...
光影绰绰
暗影绰绰
经过刚刚那么一闹，凌风似乎来了兴致，看着前面的围观者越来越多，凌风也想去凑个热闹。慕容阙见凌风要去看热闹，也只好...
影绰绰
天还没亮，杨晴已经把早饭端上了桌，拿防尘罩盖上后，反复叮嘱正在穿衣起床的丈夫胡鸣，＂别忘了喊儿子吃饭了，记住没，啊...
影绰绰
千言万语，道不尽你的心绪。一读一句，眼前是谁的低迷？甩不掉千丝万缕，回马观桥恨透了刘八女。梦不完再念去...
眼光要长远
女孩子根本不用费心去想怎么对付劈腿这种破事。你够好+你在他心里够好，这两点做到了，吃住一个普通人真的绰绰绰绰绰绰有...
鞭影绰绰
扔掉蛮横粗暴的鞭子我教你如牧羊般牧人真正的鞭子在内部鞭打打颤倦怠的灵旧枝上长出柔软的鞭条学会了报复，抽打...
倩影绰绰，魂牵梦绕
倩影绰绰，魂牵梦绕 ——寄语刘梦影同学13岁生日亲爱的刘梦影同学：你好！首先祝贺你：13岁生日快乐！从稚嫩到...
光影绰绰（三）
2022.2.10 囤货这个年很快，转眼就走完了十天，家里的冰箱，终于开始有了空隙，心中美美的，对家里正式宣布：...