css
关注
分享
扫一扫
赵啸林
昨日已成历史，明天是个谜团，但今天是天赐的礼物。
展开
-
浅谈script，link，import，@import引入
1.script，link是html标签，script可以引入js,即可调用引入js里面的方法，link标签可以引入css样式图片。4.可操作性:link可以通过js操作dom（盗墓 文档对象模型）插入link标签改变样式，而@import不能。2.import是tp语法，可以引入js也可引入css。3.兼容性:link（是标签）没有兼容问题，@import不兼容ie5以下的浏览器.1.从属关系:link是html标签，@import是css提供的.链接式和导入式有什么区别（链接式，导入式，内嵌式，行内）原创 2023-02-25 15:26:50 · 3878 阅读 · 0 评论 -
使用wow.js给页面添加动画
data-wow-offset：触发动画时到元素的距离。data-wow-duration：过渡时间。data-wow-delay：延迟时间。设置wow可以如下html设置。设置wow可以如下js设置。原创 2023-02-25 14:55:39 · 417 阅读 · 0 评论 -
流光字体css3
【代码】流光字体css3。原创 2023-02-16 14:33:16 · 177 阅读 · 0 评论 -
手搓switch开关
【代码】手搓switch开关。原创 2023-02-16 14:28:47 · 124 阅读 · 0 评论 -
CSS3荧光灯文字闪烁动画
【代码】CSS3荧光灯文字闪烁动画。原创 2023-02-16 14:24:56 · 325 阅读 · 0 评论 -
css3无缝自动滚动
【代码】css3无缝自动滚动。原创 2023-02-14 16:27:00 · 1027 阅读 · 0 评论 -
记录一些很有效的css
【代码】记录一些不常见但很有效的css。原创 2023-01-09 09:53:53 · 390 阅读 · 0 评论 -
浮窗css3
</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"> &l原创 2022-04-25 17:33:25 · 387 阅读 · 0 评论 -
重绘(repaint)和回流(reflow)
1.重绘和回流是什么怎么去理解这两个概念呢？从字面上理解，重绘，重新绘画，重新上色，较难产生联想的是回流。我们都知道，一个页面从加载到完成，首先是构建DOM树，然后根据DOM节点的几何属性形成render树(渲染树)，当渲染树构建完成，页面就根据DOM树开始布局了，渲染树也根据设置的样式对应的渲染这些节点。在这个过程中，回流与DOM树，渲染树有关，重绘与渲染树有关，怎么去理解呢？比如我们增删DOM节点，修改一个元素的宽高，页面布局发生变化，DOM树结构发生变化，那么肯定要重新构建DOM树，而DOM树转载 2022-03-24 13:59:02 · 696 阅读 · 1 评论 -
常用css3动画
/* animation */.a-bounce,.a-flip,.a-flash,.a-shake,.a-swing,.a-wobble,.a-ring{-webkit-animation:1s ease;-moz-animation:1s ease;-ms-animation:1s ease;animation:1s ease;}.a-fadein,.a-fadeinT,.a-fadeinR,.a-fadeinB,.a-fadeinL,.a-bouncein,.a-bounceinT,.a-boun转载 2022-03-23 11:44:54 · 236 阅读 · 2 评论 -
vue3.0+vite 使用 postcss-pxtorem 自适应（px转rem）
安装插件npm i postcss-pxtorem -Dnpm i amfe-flexible -Dnpm i autoprefixermain.js引入import 'amfe-flexible/index.js';与package.json同级目录（根目录）创建postcss.config.js文件module.exports = { plugins: { autoprefixer: { overrideBrowserslist: [转载 2021-12-17 17:13:07 · 6888 阅读 · 0 评论 -
利用css伪元素画div的四个直角
<!-- pannel就是要被画上四个小直角的div元素--><div class="pannel"> <div class="panel-footer"></div></div>//less.pannel { position: relative; border: 1px solid rgba(25, 186, 139, 0.17); height: 2.998501rem; backgr转载 2022-01-13 16:34:34 · 838 阅读 · 0 评论 -
（background）背景/渐变色函数
https://www.cnblogs.com/ZheOneAndOnly/p/10786375.html转载 2021-08-01 17:39:54 · 375 阅读 · 0 评论 -
vue PC端数字输入框限制输入负数正则
<input :value="value" type="number" placeholder="你好，世界！" onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8 || event.which === 46" />转载 2021-08-01 17:38:48 · 1118 阅读 · 0 评论 -
自定义select的样式
select { width: 42vw; border: none; outline: none; height: 70px; line-height: 70px; background-color: #efedee; border-radius: 10px; color: #666; padding-left: 10px; font-size: 28px; margin: 0 10px; /*隐藏select原创 2021-08-01 17:37:26 · 1010 阅读 · 0 评论 -
使用swiper4轮播插件
https://www.swiper.com.cn/download/index.htmlnpm install swiper<template> <div class="index"> <div class="swiper-container schools"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="(item, inde原创 2021-07-31 08:17:17 · 487 阅读 · 0 评论 -
css文字竖直排列
writing-mode 属性可以让我们实现这个效果。该属性支持以下值：sideways-rl：文本和其他内容从上到下垂直排列，并向右横向放置。sideways-lr：和 sideways-rl 一样，文本和其他内容从上到下垂直排列，但向左倾斜。vertical-rl：文本和其他内容从上到下垂直排列，从右到左水平排列。如果有两行或更多行，则这些行会被放置在前一行的左侧。vertical-lr：与 vertical-rl 不同，水平地将文本从左到右排列，并且如果有两行或更多行，则这些行会被放置在前一转载 2021-05-06 11:16:40 · 2072 阅读 · 0 评论 -
微信小程序不显示button的边框
button::after { border-color: transparent;}原创 2021-04-29 10:24:52 · 522 阅读 · 0 评论 -
css计算
calc()函数支持 “+”, “-”, “*”, “/” 运算；min-height: calc(100vh - 50px);原创 2021-04-26 09:03:48 · 341 阅读 · 0 评论 -
css3 只给左上，右上，左下，右下设置圆角属性
border-top-left-radius: 20px; border-bottom-left-radius:20px; border-top-right-radius: 20px; border-bottom-right-radius:20px;原创 2021-04-17 09:34:09 · 1033 阅读 · 0 评论 -
微信小程序左滑删除效果的实现
<view class="box"> <view class="item {{status ? '' :'active'}}"> <view class="content" bindtouchstart="touchS" bindtouchmove="touchM">显示正常内容</view> <view class="del-button">删除</view> </view></view>Pa转载 2021-03-30 10:17:40 · 223 阅读 · 0 评论 -
微信小程序等分换行之怪异盒模型
<view class="recommendlist"> <image class="recommendShoppings" mode="widthFix" wx:for="{{recommendList.PRODUCT}}" wx:key="index" src="{{item.THUMB_URL}}"></image></view>.recommendlist{ padding:5px 4px 50px 4px; background-c原创 2021-03-29 16:41:49 · 348 阅读 · 0 评论 -
css3旋转放大缩小
:style="{ transform: 'scale(' + scale + ')' + 'rotate(' + rotate + 'deg)'}" style="transition:1s;"scale:1,//比例为1rotate:0，//角度为1原创 2021-01-16 16:16:21 · 242 阅读 · 0 评论 -
超出部分显示省略号
单行{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}多行 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 6; /*多行在这里修改数字即可*/ /* autoprefixer: ignore next */ -webkit-box-orie原创 2020-10-21 19:37:10 · 458 阅读 · 0 评论