随笔分类 -  CSS

1 2 下一页

这里有我的个人心得 和 学习笔记
uniapp 初始化init
摘要:@charset "UTF-8";body,html,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,textarea,p,th,td { margin: 0; padding: 0;}table { border-collapse: collapse; 阅读全文

posted @ 2024-09-13 18:39 完美前端 阅读(128) 评论(0) 推荐(0)

css字体渐变加描边
摘要:定义css // 字体 - 渐变加描边 @mixin fontColor($backgroundImage, $textStroke, $filterDropShadow) { -webkit-text-stroke: $textStroke; // 描边 font-weight: 700; pos 阅读全文

posted @ 2024-06-10 19:07 完美前端 阅读(122) 评论(0) 推荐(0)

css 启动页 loading动画
摘要:<!-- 这是一个HTML加载动画,主要由多个旋转的圆点和"Loading..."文字组成 --><div class="index-html-loader"> <!-- 加载中的文本 --> <div class="text">Loading...</div> <!-- 水平排列的圆点集合 --> 阅读全文

posted @ 2022-09-19 22:48 完美前端 阅读(294) 评论(0) 推荐(0)

CSS3选择器nth-child(n)
摘要:#### CSS3 nth-child(n)选择器 /** * CSS3中的nth-child(n)选择器允许你选择父元素的特定子元素,基于它们的位置或它们与其他兄弟元素的关系。 * 可以用于选择列表、表格行、盒子等元素的特定顺序或模式。 */ /* 选择第3个LI元素 */ li:nth-chil 阅读全文

posted @ 2022-07-24 23:12 完美前端 阅读(814) 评论(0) 推荐(0)

css overflow 可以滑动 但不显示滚动条
摘要:.tab-lists-box{ scrollbar-width: none; /* firefox */ -ms-overflow-style: none; /* IE 10+ */ overflow-y: auto;}.tab-lists-box::-webkit-scrollbar { disp 阅读全文

posted @ 2022-03-04 18:19 完美前端 阅读(1387) 评论(0) 推荐(0)

css3 多种奇特效果
摘要:参考网站 https://lhammer.cn/You-need-to-know-css/#/zh-cn/ <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /* 通用样 阅读全文

posted @ 2022-02-27 02:34 完美前端 阅读(61) 评论(0) 推荐(0)

css3 跑马灯
摘要:#### 跑马灯动画效果 /* 使用@keyframes定义一个命名为marqueeAnimation的动画,使文本从右至左滚动 */ @keyframes marqueeAnimation { 0% { transform: translateX(100%); /* 起始状态,文本从容器的右边开始 阅读全文

posted @ 2022-02-19 19:11 完美前端 阅读(488) 评论(0) 推荐(0)

css html 移动端适配 font-size: 13.33vw rem + vw
摘要:#### 使用 `vw` 实现响应式布局 方法一:使用CSS计算功能 这种方法是通过CSS中的`calc()`函数来计算`font-size`的值。 /* 根据750宽度的设计稿计算font-size,即1rem = 100px; */ html { font-size: calc(100vw / 阅读全文

posted @ 2021-10-27 21:26 完美前端 阅读(1121) 评论(0) 推荐(0)

html css input自定义
摘要:完整的代码, 可以复制引用<!DOCTYPE html><html><head> <!-- 设置字符编码为UTF-8 --> <meta charset="utf-8"> <!-- 为IE浏览器设置兼容模式,优先使用最新的引擎渲染网页 --> <meta http-equiv="X-UA-Compa 阅读全文

posted @ 2021-10-27 15:59 完美前端 阅读(334) 评论(0) 推荐(0)

css htm5 canvas时钟
摘要:完整的代码, 可以复制引用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="ht 阅读全文

posted @ 2021-10-26 23:03 完美前端 阅读(57) 评论(0) 推荐(0)

js css 钟表
摘要:HTML 结构 <div id="wrap"> <ul id="list"> // 使用JavaScript动态生成时钟的刻度 <!-- 这里将使用JavaScript动态生成时钟的刻度 --> </ul> <div id="hour"></div> <div id="min"></div> <di 阅读全文

posted @ 2021-10-26 23:01 完美前端 阅读(74) 评论(0) 推荐(0)

css3 骰子
摘要:<!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>3D立方体动画</title> <style> /* 设置外部容器样式 */ .wrap{ w 阅读全文

posted @ 2021-10-26 23:00 完美前端 阅读(121) 评论(0) 推荐(0)

css 字体
摘要:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /* 使用 @font-face 规则自定义字体 */ @font-face{ / 阅读全文

posted @ 2021-10-26 22:57 完美前端 阅读(41) 评论(0) 推荐(0)

css 旋转动画
摘要:#### CSS3 动画实现旋转加载图标 旋转加载动画样式 /* 定义一个类名为.uni-load-more__img的元素样式 */ .uni-load-more__img { /* 设置该元素的动画名称为loading-ios-H5,持续时间为1秒,延迟时间为0秒,动画计时函数为step-end 阅读全文

posted @ 2021-07-30 19:47 完美前端 阅读(736) 评论(0) 推荐(0)

css 瀑布流
摘要:#### 瀑布流布局 CSS样式 /* 定义瀑布流的外层容器 */ .waterfall{ /* 设置外边距,单位为rpx */ margin: 0 20rpx; /* 定义两列布局 */ column-count: 2; /* 定义每一个瀑布流的子项样式 */ .waterfall-item { 阅读全文

posted @ 2021-07-13 14:04 完美前端 阅读(98) 评论(0) 推荐(0)

CSS 变量教程
摘要:CSS 变量教程 微软宣布 Edge 浏览器将支持 CSS 变量。 这个重要的 CSS 新功能,所有主要浏览器已经都支持了。本文全面介绍如何使用它,你会发现原生 CSS 从此变得异常强大。 一、变量的声明 声明变量的时候,变量名前面要加两根连词线(--)。 body { --foo: #7F583F 阅读全文

posted @ 2021-07-08 14:16 完美前端 阅读(149) 评论(0) 推荐(0)

css颜色逐渐过渡消失 linear-gradient
摘要:#### 渐变背景样式 CSS样式解释 /* 该样式定义了一个从上到下的线性渐变,从完全透明的黑色渐变到完全不透明的黑色 */ background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1)); /* 这是上述样式的 阅读全文

posted @ 2021-06-14 18:04 完美前端 阅读(1375) 评论(0) 推荐(0)

初始化css
摘要:@charset "UTF-8";body,html,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,textarea,p,th,td { margin: 0; padding: 0;}table { border-collapse: collapse; 阅读全文

posted @ 2021-01-23 14:03 完美前端 阅读(141) 评论(0) 推荐(0)

CSS 浏览器 hack 方法
摘要:#### 针对不同浏览器设置样式 (CSS HACK) CSS样式 .box { /* 对Firefox设置的样式 */ color: black; /* 对IE9设置的样式 */ color: #fff\9\0; /* 对IE8设置的样式 */ color: #ff0000\0; /* 对Safa 阅读全文

posted @ 2020-07-19 18:39 完美前端 阅读(143) 评论(0) 推荐(0)

Content-type 所有类型的参数
摘要:{ '.323': 'text/h323', // H.323 网络电话 '.3gp': 'video/3gpp', // 3GPP 视频文件 '.aab': 'application/x-authoware-bin', // Authoware 二进制文件 '.aam': 'application 阅读全文

posted @ 2020-05-01 07:52 完美前端 阅读(3190) 评论(0) 推荐(0)

1 2 下一页

导航