CSS样式
关注
分享
扫一扫
文章平均质量分 52
小湾生产队队长
这个作者很懒，什么都没留下…
展开
-
css伪类where、is、has用法
css伪类where、is、has用法。原创 2023-08-02 16:02:11 · 594 阅读 · 0 评论 -
vue工程可视化大屏 自适应问题
vue工程可视化大屏 自适应问题可视化大屏的适配是一个老生常谈的话题了，现在其实不乏一些大佬开源的自适应插件、工具但是我为什么还要重复造轮子呢？因为目前市面上适配工具每一个都无法做到完美的效果，做出来的东西都差不多，最终实现效果都逃不出白边的手掌心，可以解决白边问题的，要么太过于复杂，要么会影响dom结构。原创 2023-07-03 11:17:12 · 1680 阅读 · 0 评论 -
CSS代码 | 文字与字体
目录一、自定义文本被选中的样式二、文本对齐和间距三、画线、粗体、斜体四、阴影、毛玻璃、金属效果、文字旋转五、文本溢出处理六、常用字体栈七、常用中文字体二、文本对齐和间距三、画线、粗体、斜体四、阴影、毛玻璃、金属效果、文字旋转五、文本溢出处理六、常用字体栈七、常用中文字体原创 2023-06-26 10:43:39 · 444 阅读 · 0 评论 -
CSS：添加JS修改style后，hover伪类失效
之前设置了DIV的hover伪类，同时js事件中对style进行了修改，特别是修改了background-color属性，js事件生效后，hover伪类失效，不再起作用。important优先级高于一切！给:hover的属性后面。原创 2023-03-28 10:22:00 · 857 阅读 · 1 评论 -
常用的CSS动画效果
【代码】常用的CSS动画效果。原创 2023-03-21 15:58:57 · 3202 阅读 · 0 评论 -
简单实用的CSS属性（滑轮滚动保持头部不动、暂无数据显示、元素隔开距离、带背景的文字效果、网页上禁止选中文字、校验值有效为绿色无效为红色、）
简单实用的CSS属性（滑轮滚动保持头部不动、暂无数据显示、元素隔开距离、带背景的文字效果、网页上禁止选中文字、校验值有效为绿色无效为红色、）原创 2023-02-15 11:21:13 · 1091 阅读 · 0 评论 -
纯CSS实现进度条加载效果或者loading样式
纯CSS实现进度条加载效果或者loading样式。转载 2023-01-29 11:43:48 · 1307 阅读 · 1 评论 -
CSS样式图片放在DIV里面，自动填充充满，且不变形
CSS样式图片放在DIV里面，自动填充充满且不变形HTML如下：img样式如下设置，div要设置长和宽度：原创 2022-12-08 11:33:52 · 6532 阅读 · 0 评论 -
CSS常用的基础知识点
CSS 并不是面试重点考察的领域，但如果能在 CSS 领域有自己的见解和经验，会使自己更加脱颖而出。1 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin2 box-sizing属性？用来控制元素的盒子模型的解析模式，默认为content-boxcontext-box：W3C的标准盒子模型原创 2022-06-30 17:52:01 · 724 阅读 · 0 评论 -
前端开发中经常使用到的颜色：
目录（一）前端开发中经常使用到的颜色：（二） 前端常用的渐变色系：1. 浅绿 #8cc540 2. 深绿 #009f5d 3. 暗蓝 #019fa04. 蓝色 #019fde5. 深蓝 #007cdc 6. 深紫 #887ddd 7. 浅紫 #cd7bdd 8. 粉色 #ff56759. 红色 #ff124410. 橙色 #ff834511. 黄色 #f8bd0b12. 灰色 #d1d2d4...原创 2022-06-28 16:19:01 · 7378 阅读 · 0 评论 -
CSS效果集合
目录1、毛玻璃特效 2、文本设置为全大写或者全小写3、实现首字下沉4、实现正方形5、图片文字环绕6、多个元素相同样式7、实现平滑移动8、悬停放大9、背景混合模式10、自定义光标效果：代码： 2、文本设置为全大写或者全小写3、实现首字下沉4、实现正方形5、图片文字环绕6、多个元素相同样式7、实现平滑移动8、悬停放大9、背景混合模式效果： 10、自定义光标...原创 2022-06-06 10:30:52 · 789 阅读 · 0 评论 -
css常用的一些设计技巧
css常用的一些设计技巧目录1. 解决 img 5px 间距的问题2. 元素的高度与 window 的高度相同3. 修改 input placeholder 样式4. 使用:not选择器5. 使用 flex 布局将一个元素智能地固定在底部6. 使用caret-color来修改光标的颜色7. 删除type="number"末尾的箭头8.outline:none删除输入状态线9. 解决iOS滚动条被卡住的问题10. 绘制三角形11. 绘制小箭头...原创 2022-04-24 11:57:20 · 194 阅读 · 0 评论 -
CSS不同背景显示不用颜色的文字
先上效果：黑背景显示白字，白背景显示黑色，文字在黑白背景之间来回滚动。实现方式：html：<div></div>css：div { height: 100vh; background: linear-gradient(45deg, #000 0, #000 50%, #fff 50%); &::before { content: "LOREM IPSUM"; position: abs.原创 2022-04-24 11:42:11 · 1324 阅读 · 0 评论 -
HTML页面中纯CSS搞的文字轮播滚动，跑马灯效果
整体思路：采用animation循环动画，搭配CSS属性做到循环滚动，再根据文案长短动态设置动画时长。Html页面： <div className="marquee-root"> <div className="marquee-content"> 跑马灯滚动起来…… </div> </div>CSS设置：@keyframes marqueeAnim { 0%原创 2022-04-24 11:29:44 · 5548 阅读 · 0 评论 -
前端常用布局方案
目录水平居中1. 使用text-align属性2. 定宽块级元素水平居中(方法一)3. 定宽块级元素水平居中(方法二)4. 定宽块级元素水平居中(方法三)5. 定宽块级元素水平居中(方法四)6. Flex方案7. Grid方案垂直居中1. 行内块级元素垂直居中2. 定位方式实现(方法一)3. 定位方式实现(方法二)4. 定位方式实现(方法三)5. Flex方案6. Grid方案水平垂直居中1. 行内块级水平垂直居中方案2. 定位实现水平原创 2022-03-21 09:12:35 · 3191 阅读 · 3 评论 -
大屏设计常用到的效果
一、旋转效果 @keyframes rotate { 0% { transform: translate(-50%,-50%) rotate(0deg); } 100% { transform: translate(-50%,-50%) rotate(360deg); }} animation: rotate 3s linear infinite;二、上下移动效果@keyframes move{ from{transform:translate(0原创 2022-03-08 10:47:17 · 237 阅读 · 0 评论 -
CSS3常用动画效果合集（最全）
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-原创 2021-12-30 16:01:48 · 3634 阅读 · 2 评论 -
30个 CSS 样式常用的静态形状
目录代码1. 椭圆2. 上三角3. 下三角4. 左三角5. 右三角6. 左上角7. 右上角8. 左下角9. 右下角10. 箭头11. 平行四边形12. 梯形13. 五边形14. 六边形15. 爱心 ❤️16. 无穷大17. 钻石 ????18. 锁 ????19. 吃豆人20. 对话泡泡21. 太极22. 丝带徽章23. 雪佛兰车标24. 放大镜 ????25. Facebook 图标26. 月亮原创 2021-11-03 16:41:41 · 849 阅读 · 0 评论 -
CSS样式：DIV四中圆形，左右两侧凹陷下去
效果如图：CSS代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>test</title> <style> .btn { width: 200px; text-align: center; height: 50px; line-.原创 2021-07-28 17:25:56 · 1365 阅读 · 0 评论 -
常用的 Loading 制作方案
三种 Loading 制作方案一、简介Loading几乎是每个应用都会用到的一个组件。很多组件库都会提供相应的Loading组件，但是有的时候我们可能需要自定义Loading效果，掌握Loading组件制作的基础知识将变得非常必要。Loading主要就是一个旋转的圆环，而旋转部分则比较简单，直接通过CSS动画即可实现，所以关键部分就是得到Loading的圆环。二、通过border-radius绘制圆环我们通常让一个元素变成圆形是先将一个元素设置为长和宽相等的正方形，然后给这个元素设置一个bo原创 2021-02-23 14:43:47 · 358 阅读 · 0 评论 -
CSS3网页常见动态效果……
CSS3网页常见动态效果……目录CSS3网页常见动态效果……一、动态背景变色，且有晃动效果二、输入框伸缩三、按钮旁边，动态的提示四、文字环绕效果一、动态背景变色，且有晃动效果html代码：<span class="shake">弹</span>CSS代码：.shake{ width:40px; height:40px; display:block; background:lightgreen;原创 2021-02-23 11:49:13 · 3248 阅读 · 0 评论 -
Windows系统HTML滚动条美化CSS样式
Windows系统下，滚动条的美化：这个一般是全局性的配置，如果需要不同的滚动条配置不同的样式，可以在每个滚动条样式前加个class设置即可。::-webkit-scrollbar { width: 6px; height: 6px;}::-webkit-scrollbar-track { width: 6px; background: rgba(#101F1C, 0.1); -webkit-border-radius: 2em; -moz-border-radius原创 2020-12-21 09:41:59 · 792 阅读 · 0 评论 -
CSS 8种让人眼前一亮的hover效果眼前一亮的HOVER效果
目录CSS 8种让人眼前一亮的hover效果眼前一亮的HOVER效果一、发送效果二、霓虹效果三、边框效果四、圆形渐进效果五、圆角效果六、冰冻效果七、闪亮效果八、加载效果CSS 8种让人眼前一亮的hover效果眼前一亮的HOVER效果一、发送效果效果HTML<div id="send-btn"> <button> // 这里是一个svg的占位 Send </button>&l..原创 2020-08-26 15:57:47 · 2120 阅读 · 0 评论 -
css：div实现textarea文本框那种可以编辑可自适应文字高度的
css：div实现textarea文本框那种可以自适应文字高度的说明：模拟textarea可编辑的效果：contenteditable="true" 高度自适应：给个最小高度属性min-height和默认高度属性 _height即可HTML代码：<div class="test_box" contenteditable="true"></div> CSS代码.test_box { width: 400px; min-height: 1..原创 2020-08-12 10:32:56 · 1030 阅读 · 0 评论 -
Grid：CSS常用经典布局
目录基于grid实现css常用的几种经典布局一、空间居中布局二、两栏式布局三、三明治布局四、圣杯布局基于grid实现css常用的几种经典布局一、空间居中布局效果：CSS代码：.container { display: grid; place-items: center;}说明：代码需要写在父容器上，指定为grid布局。设置place-items属性place-items: <align-items> <ju.原创 2020-08-11 11:04:03 · 1011 阅读 · 0 评论 -
CSS样式操作大全——常用情景篇
CSS样式操作大全——各种情景篇1、居中相关布局1.1 水平居中效果如下：方案1：inline-block +text-align分析：设置dispaly为inline-block，使元素具有文本元素的性质，其父元素可以设置文本对齐熟悉text-align来控制对齐方式。注意：text-align具有继承性，导致其内部所有元素都是居中显示，不要居中的需要再写text-...原创 2020-04-20 09:10:18 · 427 阅读 · 0 评论 -
CSS样式操作大全——基本语法篇
CSS样式操作大全原创 2020-03-31 15:33:43 · 1903 阅读 · 0 评论