liaooo

标签： css

  • Vue+ts使用animate.css

    安装

    npm install animate.css --save
or
yarn add animate.css

    在main.ts中引入

    import { createApp } from 'vue'
import App from './App.vue'
// 引入animate.css
import 'animate.css'

createApp(App).mount('#app')

    此时会提示找不到模块“animate.css”或其相应的类型声明

    解决方法

    找到 src/vite-env.d.ts（老版本Vite为shims-vue.d.ts）

    添加下面代码

    declare module 'animate.css' 
// 声明animate.css的类型，否则引入animate.css会报错，提示找不到animate.css模块

    使用

    组件中使用animate.css，需要注意的是，样式class类名，必须加上animate__animated，其次则是要引入动画的class类名，如animate__slideInUp

    <template>
  <div class="content-box animate__animated animate__slideInUp">
    滑动进入特效演示
  </div>
</template>

    修改动画属性

    方法一：直接通过动画class类名animated修改

    .animated {
    -webkit-animation-duration: 1s; 
    animation-duration: 2s; // 动画执行时间
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

    方法二：修改指定动画的属性

    .animate__slideInUp {
    -webkit-animation-duration: 1s; 
    animation-duration: 2s; // 动画执行时间
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

    方法三：在要执行动画的div设置stye

    <div 
    class="content-box animate__animated animate__slideInUp"
    :style="{animationDuration: '500ms'}"
    >
</div>

    vue+ts或者react+ts如何使用animate.css

  • css隐藏移动端滚动条

    html::-webkit-scrollbar,
body::-webkit-scrollbar {
display: none;
}

html,
body {
height: 100%;
overflow: hidden;
overflow-y: scroll;
/* 使得ios滑动流畅 */
-webkit-overflow-scrolling: touch;
}

    PS : 设置 height: 100%; overflow: hidden; overflow-y: scroll; 是重点

    来自_Raymond的评论 – 简书

  • CSS 属性选择器

    CSS 属性选择器通过已经存在的属性名或属性值匹配元素。

    语法

    [attr]

    表示带有以 attr 命名的属性的元素。

    [attr=value]

    表示带有以 attr 命名的属性，且属性值为 value 的元素。

    [attr~=value]

    表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value。

    [attr|=value]

    表示带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀（”-“为连字符，Unicode 编码为 U+002D）开头。典型的应用场景是用来匹配语言简写代码（如 zh-CN，zh-TW 可以用 zh 作为 value）。

    [attr^=value]

    表示带有以 attr 命名的属性，且属性值是以 value 开头的元素。

    [attr$=value]

    表示带有以 attr 命名的属性，且属性值是以 value 结尾的元素。

    [attr*=value]

    表示带有以 attr 命名的属性，且属性值至少包含一个 value 值的元素。

    [*attr* *operator* *value* i]

    在属性选择器的右方括号前添加一个用空格隔开的字母 i（或 I），可以在匹配属性值时忽略大小写（支持 ASCII 字符范围之内的字母）。

    [*attr* *operator* *value* s]

    在属性选择器的右方括号前添加一个用空格隔开的字母 s（或 S），可以在匹配属性值时区分大小写（支持 ASCII 字符范围之内的字母）。

    示例

    CSS

    a {
  color: blue;
}

/* 以 "#" 开头的页面本地链接 */
a[href^="#"] {
  background-color: gold;
}

/* 包含 "example" 的链接 */
a[href*="example"] {
  background-color: silver;
}

/* 包含 "insensitive" 的链接,不区分大小写 */
a[href*="insensitive" i] {
  color: cyan;
}

/* 包含 "cAsE" 的链接，区分大小写 */
a[href*="cAsE" s] {
  color: pink;
}

/* 以 ".org" 结尾的链接 */
a[href$=".org"] {
  color: red;
}

    HTML

    <ul>
  <li><a href="#internal">Internal link</a></li>
  <li><a href="http://example.com">Example link</a></li>
  <li><a href="#InSensitive">Insensitive internal link</a></li>
  <li><a href="http://example.org">Example org link</a></li>
</ul>

    结果

    另外

    由于 type 属性主要用于 <input> 元素，因此 HTML 规范要求 type 属性的匹配不区分大小写，如果使用属性选择器且添加了 大小写敏感 的修饰符，那么将无法与type属性进行匹配。

    属性选择器 – CSS（层叠样式表） | MDN

  • vw与vh

    vw和vh单位是相对于视口的尺寸所计算的结果

    • vw（viewport width）
      • 1vw = 视口宽度的 1%
    • vh（viewport height）
      • 1vh = 视口高度的 1%

    vw单位的适配：

    • 确定设计稿的宽度（视口的宽度），得到 1vw = 视口宽度的1%
    • vw单位的尺寸 = px / 1vw = px / 视口的宽度的1%

    vh单位的适配：

    • 确定设计稿的高度（视口的高度），得到 1vh = 视口高度的1%
    • vh单位的尺寸 = px / 1vh = px / 视口高度的1%
    例如：

    此时视口宽度1920px 高度1080px

    1vw = 1920px / 100 = 19.2 px

    1vh = 1080px / 100 = 10.8px

  • rem布局

    rem布局进行的是元素等比例缩放

    em：相对于当前元素的字体大小 → 1em = 当前标签的font-size

    rem：相对于根元素（html）的字体大小 → 1rem = html标签的font-size

    浏览器默认的font-size的大小为16px

    rem布局原理

    屏幕尺寸改变时，通过改变html标签的font-size使元素自适应

    怎么使用rem布局

    媒体查询

    1.根据设计图尺寸，把px单位转换成rem单位

    px值 = rem单位 * html标签的font-size

    • rem = px / html标签的font-size
    • 为了计算方便，一般我们会针对于设计图的大小自定义一个html标签的font-size的大小
    确定比例

    比如设计图宽度为375px，确定比例为1:10，则html的font-size设置为37.5px

    2.利用媒体查询，当屏幕尺寸变化时，更改html标签的font-size

    @media screen and (min-width:375px) {
    html {
        font-size: 37.5px;
    }
}
@media screen and (min-width:750px) {
    html {
        font-size: 75px;
    }
}

/* ...... */

    注意点：为了保证大屏的媒体查询不被覆盖，媒体查询一般从小屏往大了写。

    flexible.js

    直接引入flexible.js文件即可

    比例：屏幕宽度 / html的font-size = 10

    rem = px / html的font-size

  • 媒体查询

    根据不同屏幕的宽度改变样式.

    语法

    @media screen and (条件) { } /* 满足条件则生效 */

    条件

    条件含义解释
    min-width样式生效的最小宽当屏幕宽度大于>=该宽度时，选择器样式才生效
    max-width样式生效的最大宽当屏幕宽度<=该宽度时，选择器样式才生效
    width样式生效的宽度当屏幕宽度正好=该宽度时，选择器样式才生效

    注意点：

    • 媒体查询只能控制选择器是否生效，不能提升选择器优先级！
    • 媒体查询中可以同时设置多个条件，条件之间以and连接
    • 媒体查询语法格式中空格不要省略

    为了保证大屏的媒体查询不被覆盖，媒体查询一般从小屏往大了写。

  • less

    注释

    在less文件中可以写两种注释

    1.可以直接用CSS注释（最后会编译展示在CSS文件中）

    /* 注释内容 */

    ，最后会编译展示在css文件中

    2.Less注释（只在less中使用，不会编译展示在css文件中）

    // 注释的内容

    变量

    变量：可以变化的量
语法：@变量名:变量值;
作用：编译的时候会把less中所有的变量名替换成变量值，这样可以统一修改某一个值（如主题色）
    @mainColor:#e92322; //@变量名:变量值;

.box {
  width: 100px;
  height: 100px;
  background-color: @mainColor;
}

    嵌套

    // less中的嵌套：less中选择器可以嵌套

// 1、后代选择器，选择器嵌套即可

// 2、子代选择器，前面使用>

// 3、并集选择器，前面直接写,

// 4、交集选择器，前面使用&（&表示上一级选择器）

// 5、伪元素，前面使用&（&表示上一级选择器）

.father {  
  width: 300px;  
  height: 300px;  
  background-color: red;  

  // 后代选择器：通过嵌套表示后代关系  

  .son {    
    width: 100px;    
    height: 100px;    
    background-color: blue;  

  }  

  // 子代选择器：通过嵌套 + > 表示 

  >.son {    

    background-color: red;  

  }  

  // 并集选择器：通过嵌套可以省略父级选择器  

  .one,  
  .two {    
    background-color: yellow;  
  }  

  // 交集选择器：&表示上一级选择器  

  &.red {    
    background-color: red;  
  }      

  // 结构伪类选择器：&表示上一级选择器  

  &:nth-child(1) {    
    background-color: red;  
  }  

  // 链接伪类选择器：&表示上一级选择器 

  &:hover {    
    background-color: green;  
  }  
  // 伪元素：&表示上一级选择器  

  &::after {    content: '';  
  }
}

    运算

    .box {  
  width: 200px;  
  height: 200px;  
  background-color: pink;  
  // 伪类的写法  
  &:hover {    
    // less中可以直接计算加减乘除计算的，编译之后会把计算的结果直接显示在css文件中。之后学习的rem布局中需要使用到less运算的功能    
    width: 200px * 2;    
    width: (200px / 3);    
    width: 200px + 100;    
    width: 200px - 100;  
  }
}

    注意点： 在 less 4.0 版本之后， 除法运算/ 如果在括号 () 外，不会执行除法，推荐使用 () 包裹即可

    *函数

    语法：.函数名() { 重复的样式 }

    // 针对于页面中重复的代码
// 1、之前：抽取出公共类——》给需要的标签加类名 
.common {   
  width: 300px;   
  height: 300px; 
}
// 2、现在：less中的函数——》在选择器中调用
// 语法：.函数名() { 重复的代码 }

// 定义函数
.common() {  
  width: 300px;  
  height: 300px;
}

.red {  
  // 使用函数 
   .common();  
   background-color: red;
}

    *引入

    (例：将base.less引入index.less，可以直接编译成一个css文件，减少html标签)

    语法
     @import '需要引入的less文件的路径'; 
 //注意点：一般引入的文件写在最前面，保证自己的样式写在后，优先

 例：
 @import 'base.less';

  • CSS绘制三角形（各种角度）

    一、前言

    三角形实现原理：

    1. 宽度width为0；height为0；
    2. 有一条横竖边（上下左右）的设置为border-方向：长度 solid red，这个画的就是底部的直线。其他边使用border-方向：长度 solid transparent。
    3. 有两个横竖边（上下左右）的设置，若斜边是在三角形的右边，这时候设置top或bottom的直线，和右边的斜线。若斜边是在三角形的左边，这时候设置top或bottom的直线，和左边的斜线。

    二、实现

    2.1 Triangle Up

    #triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

    2.2 Triangle Down

    #triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

    2.3 Triangle Left

    #triangle-left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
}

    2.4 Triangle Right

    #triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
}

    2.5 Triangle Top Left

    #triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}

    2.6 Triangle Top Right

    #triangle-topright {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 100px solid transparent;

}

    2.7 Triangle Bottom Left

    #triangle-bottomleft {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-right: 100px solid transparent;
}

    2.8 Triangle Bottom Right

    #triangle-bottomright {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-left: 100px solid transparent;
}

    纯 CSS 实现绘制各种三角形（各种角度） – saucxs – 博客园