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

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

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尺寸

②采用插件

安装：

在main.js中引入：

3.配置postcss-pxtorem

三、viewport方案

1、插件安装：

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

3、兼容vant

四、移动端调试插件vConsole

css实现按钮冷光效果

效果一

CSS3实现雷达特效

grid布局

一、容器元素

1、grid-template

2、grid-gap

3、grid-template-areas

4、网格线名称

二、项目元素

1、grid-area

三、用处实践

1、网格布局

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

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

css3画热咖啡

css自适应布局方案

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

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

②采用插件

安装：

在main.js中引入：

3.配置postcss-pxtorem

三、viewport方案

1、插件安装 ：

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

3、兼容vant

四、移动端调试插件vConsole

css实现按钮冷光效果

效果一

CSS3实现雷达特效

grid布局

一、容器元素

1、grid-template

2、grid-gap

3、grid-template-areas

4、网格线名称

二、项目元素

1、grid-area

三、用处实践

1、网格布局

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

1、插件安装：