下划线 动画css
京东css初始化部分内容
``` /*清除内外边距*/ * { margin: 0; padding: 0 } /*em,i原本是斜体，修改为不斜体*/ em,i { font-style: normal } /*去除小圆点*/ li { list-style: none } /*border：0照顾低版本浏览器，verti ......
CSS+html导航菜单栏
以下图为例，使用CSS+html实现下面这个博客园的导航菜单栏。 原图： 自己写的CSS+html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>wancy博客园</title> <style> *{ ......
CSS_相关问题及解决_持续更新
# css_margin塌陷问题 ### 问题描述 ```html ``` 当**child1**设置了margin-top时，margin-top会作用在father上 当**child2**设置了margin——bottom时，margin-bottom会作用在father上 ### 解决方法 ......
开心档之CSS 测验
目录 CSS 测验 编辑 CSS 测验 CSS测验是一种衡量前端开发人员对CSS的熟练程度的测试。通过CSS测验，可以评估一个人对CSS语言的掌握程度和应用能力，帮助公司或招聘方挑选合适的人才。下面将介绍如何进行CSS测验以及一些常见的CSS考题。 一、CSS测验的类型 1.选择题：从多个选项 ......
css之弹出层居中
css之弹出层居中, container设置为fixed，并且覆盖整个屏幕, 设置半透明 container的底下一层设置为absolute，然后top/left设置为50%居中，这个时候这层的左上角剧中了，然后用 transform再退回50%，把container的底下一层的中心居于屏幕中心 . ......
1. Q_ CSS 属性是否区分大小写_
1. Q: CSS 属性是否区分大小写？ ``` ul { MaRGin: 10px; } ``` A: 不区分。 HTML，CSS都对大小写不敏感，但为了更好的可读性和团队协作一般都小写，而在XHTML 中元素名称和属性是必须小写的。 ......
CSS Float(浮动)布局
1. CSS 浮动技术 CSS浮动是一种CSS布局技术，用于将元素从文档的正常流中移动，并使其可以相对于其容器或其他元素对齐。当一个元素设置了浮动属性，它将脱离正常的文档流，并根据指定的方向（左、右）浮动到容器的一侧浮动的元素会根据其容器或其他浮动元素的位置进行对齐。其他元素会环绕在浮动元素的周围。 ......
Unity3D高级编程主程手记 学习笔记四：3D模型与动画
1.美术资源规范 一个项目中，资源的规范是非常重要的。资源不进行规范，会导致项目的性能变差，例如，模型过大，模型面数过多，压缩不够等都会导致加载变慢，游戏卡顿。所以，对与美术资源来说，并不是模型越精细就越好，应该是在一定条件的限制下努力做到更加好的美化。 美术资源的大小规范：通常可以根据行业经验来确 ......
推荐一款C#开源的操作简单、免费的屏幕录制和GIF动画制作神器
源码提供：btbo.xyz 思维导航 前言 工具介绍 项目源码 工具截图 源码地址 前言 今天要给大家推荐一款由C#语言开发且开源的操作简单、免费的屏幕录制和GIF动画制作神器：ScreenToGif 。 工具介绍 ScreenToGif 是一款免费的开源屏幕录制和GIF 制作工具。它可以帮助用户捕 ......
css样式浮动的特点
浮动的特点：1、设置浮动后，水平布局等式不需成立，并且元素从文档流脱离，不再占用文档流位置2、设置浮动可以将元素向其父元素的左方向或者右方向浮动3、浮动元素不会浮动出父元素4、浮动元素移动时不会超过之前的浮动元素5、浮动元素不会超过他上边的兄弟元素，最多是和他一样高6、浮动元素不会盖住文字，文字自动 ......
css_margin塌陷问题解决方法
# css_margin塌陷问题 ### 问题描述 ```html ``` 当**child1**设置了margin-top时，margin-top会作用在father上 当**child2**设置了margin——bottom时，margin-bottom会作用在father上 ### 解决方法 ......
CSS基础-初识CSS
### 简介 CSS (cascading style shett) , 层叠样式表，是用来给HTML标签添加样式的语言。简单来说就是使网页变得更好看。 CSS的出现，使得样式和结构分离，HTML负责结构，CSS负责样式渲染。 ### CSS 书写位置 **内嵌式** 内嵌在html网页中， 和ht ......
CABasicAnimation和CAKeyframeAnimation动画同步问题
背景 需要做一个扇形带指示器的进度条动画，最初实现的是如下效果 代码如下 func startAnimation() { let width = self.frame.width let bezierPath = UIBezierPath(arcCenter: CGPoint(x: width / ......
切换颜色动画
最初的想法 两个UIView直接切换，上代码 let aView = UIView() let bView = UIView() aView.frame = CGRect(x: 100, y: 300, width: 100, height: 100) aView.alpha = 1 aView.b ......
css 文字横向滚动通知消息
要在CSS中实现横向滚动的通知消息，你可以使用CSS的动画属性、溢出属性和滚动属性相结合。 首先，创建一个包含通知消息的容器，并设置其溢出属性为隐藏。这将确保溢出容器的内容不可见。 然后，在容器内部创建一个用于显示通知消息的子元素，并设置其显示为内联块元素。然后，为这个子元素设置动画属性，使其从容器 ......
前端Vue自定义加载loading组件 通过设置gif实现loading动画 可用于页面请求前loading
#### 随着技术的发展，开发的复杂度也越来越高，传统开发方式将一个系统做成了整块应用，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。通过组件化开发，可以有效实现单独开发，单独维护，而且他们之间可以随意的进行组合。大大提升开发效率低，降低维护成本。 ......
推荐一款C#开源的操作简单、免费的屏幕录制和GIF动画制作神器
前言 今天要给大家推荐一款由C#语言开发且开源的操作简单、免费的屏幕录制和GIF动画制作神器：ScreenToGif 。 工具介绍 ScreenToGif 是一款免费的开源屏幕录制和GIF 制作工具。它可以帮助用户捕捉计算机屏幕上的实时动画，并将其保存为高质量的 GIF 图像格式。该工具不仅适用于技 ......
css让图片自动滚动
转自于：https://www.yzktw.com.cn/post/1051445.html CSS让图片自动滚动是一种非常实用的功能，它可以让网站的页面更加动态和生动。实现这个功能的方法也非常简单，只需要使用CSS中的滚动条属性即可。 /* 将所有图片都放在一个div内 */ .scroll { ......
CSS !important 规则不被其他样式覆盖
CSS !important 规则 CSS 中的 !important 规则用于增加样式的权重。 !important 与优先级无关，但它与最终的结果直接相关，使用一个 !important 规则时，此声明将覆盖任何其他声明。 #myid { background-color: blue; } .m ......
在CSS中创建一个遮罩层并阻止点击穿透的常见方案
使用 position: fixed 和 z-index：创建一个具有全屏尺寸的 <div> 元素，并将其设置为 position: fixed，top: 0，left: 0，width: 100%，height: 100%，然后使用 z-index 将其放在其他元素之上。通过设置透明度、背景颜色或 ......
动画总结
animation-name: myanimation; // 动画名字，指定关键帧的名字。 animation-duration: 4s; // 动画持续时间，间接控制速率，越长越慢！ animation-iteration-count: infinite; // 重复次数，可以填数字也可以填in ......
关键帧与动画
HTML部分 <body> <div class="box"></div> </body> css部分 // 设置背景颜色 body { background: #333; } .box { background: #fff; // 设置显眼的颜色 width: 200px; // 固定宽，为了看的 ......
CSS基础知识（未完待续）
前言：从本篇开始记录css的一些基础知识，但不会涉及css3，以后会单独学习记录。 # 1 .CSS简介 html只关注了内容的语义，但并没有注意具体布局的美化以及样式，如果用html去设置的话，就会显得十分臃 肿，这时候就需要css来进行设置了。 CSS是层叠样式表的简称，有时候我们也会称之为cs ......
CSS基础
> 即 Cascading Style Sheets，它描述了网页的表现与展示效果 ### 1) 选择器 * type 选择器 - 根据标签名进行匹配（元素选择器） * class 选择器 - 根据元素的 class 属性进行匹配 * id 选择器 - 根据元素的 id 属性进行匹配 ### 2) ......
vue（五）CSS样式添加
Vue 具有三种样式化应用程序的方法： 外部 CSS 文件。 单文件组件（.vue 文件）中的全局样式。 单文件组件中组件范围的样式。 外部CSS 导入外部CSS文件 import "./assets/reset.css"; 单组件全局样式 <style> /* 全局样式 */ .btn { pad ......
css动态生成多个class样式
在纯CSS中，无法动态生成多个类样式。CSS是一种静态样式表语言，它主要用于描述网页上元素的外观和布局，而不能在运行时动态生成类样式。 然而，你可以通过使用CSS预处理器（如Sass、Less等）或CSS-in-JS工具（如Styled Components、Emotion等）来在一定程度上实现动态 ......
第八节 CSS高级
# day08-CSS高级 > 目标：掌握定位的作用及特点；掌握 CSS 高级技巧 ## 01-定位 作用：灵活的改变盒子在网页中的位置 实现： 1.定位模式：position 2.边偏移：设置盒子的位置 * left * right * top * bottom ### 相对定位 **positi ......
CSS|动画与效果
## 一. 过渡 ### 1 什么是过渡 过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果 ### 2 应用场景 当鼠标hover的时候, 有一个明显的突出效果, 但是又不会显得特别生硬 ![transition.gif](https://img2023.cnblogs.com/blog ......
[css]选择器，匹配以某个字符开头或结尾
1. ``` div[class$="-btn"]:active{ opacity:.8 } ``` 可匹配到div,class为“-btn”结尾的元素 2. ``` div:[id^="item-"]{ color:red } ``` 可匹配到div,id为“item-”开头的元素 ......
[CSS 3] Container query
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries .container { container: article / inline-size; } h2 { font-size: 7cqw; } @conta ......