省略号css
css---3d翻转
简单的一个3d翻转的动画特效： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .main-img{width: 800px; ......
HTML5与CSS3实现动态网页（上）
结构标签 article：标记定义一篇文章 header：标记定义一个页面后者一个区域的头部 nav：标记定义导航链接 section：标记定义一个区域 aside：标记定义页面内容部分的侧边栏 hgroup：标记定义文件中一个区块的相关信息 figure：标记定义一组媒体内容以及他们的标题 fig ......
【CSS】CSS笔记
# CSS笔记 CSS就是美化网页的。 CSS是层叠样式表（Cascading Style Sheets）的简称。 有时也称为CSS样式表或级联样式表。 也是一种标记语言。 ## CSS简介 选择器+声明 ```css h1 { color: red; ... } ``` 选择器{属性：值} ### ......
【CSS】画自适应矩形
<html> <style> .box { /* 1. padding-top 根据父容器进行百分比计算数值的 */ /* width: 50%; background: blue; padding-top: 50%; */ /* 2. aspect-ratio： 规定了纵横比，这个纵横比可以用来计 ......
【CSS】画三角形
<html> <head> <title>CSS 绘制三角形</title> </head> <body> <div> <h1>实心三角形</h1> <div class="filled-triangle-1"></div> <div> <h1>等边三角形</h1> <div class="fill ......
【CSS】伪类选择器和伪元素选择器
伪类选择器用于指定所选元素的特殊状态，参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes 伪元素选择器允许你对被选择元素的特定部分修改样式，不会真的修改dom结构，参考 https://developer.mozill ......
记录--CSS 滚动驱动动画 scroll()
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 CSS 滚动驱动动画 scroll() animation-timeline 通过 scroll() 指定可滚动元素与滚动轴来为容器动画提供一个匿名的 scroll progress timeline. 通过元素在顶部和底部(或左边和右边 ......
【css兼容】flex在低版本 chrome 浏览器的兼容问题
https://blog.csdn.net/weixin_43841308/article/details/111246537 前言【感官】使用 Element UI 构建如下布局 【逻辑】具体代码： 【现象】 谷歌浏览器44.0.2403.125 m版本 显示main内容不全谷歌浏览器57.0.2 ......
CSS filter drop-shadow All In One
CSS filter drop-shadow All In One
CSS 滤镜投影
背景虚化
光晕特效
......
[译]这几个CSS小技巧，你知道吗？
# 前言 在网页设计和前端开发中，CSS属性是非常重要的一部分。掌握常用的CSS属性不仅可以使你的网页看起来更美观，还能提升用户体验，今天小编为大家介绍8个常见的CSS小技巧： # 1.修改滚动条样式 下图是我们常见的滚动条，现在需要改变滚动条的宽度和颜色了，并把它画的圆一点。 一文中，我们详细介绍了 + calc()：用于计算任意长度、百分比或数值型数据 ......
css3-旋转木马
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document< ......
css: A Multi-line CSS only Typewriter effect
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-sca ......
Django优化模版拆分css文件
Django优化模版拆分css文件 可以发现前面写项目将css放在html一个文件中，虽然简单省事但是带来的问题就是文件过于冗长不方便查看和修改。这里做个分离优化提供两种方式 方式一：html和css存放同一目录 将原因html中</style>内容移动到home.css文件中，然后再html移动空 ......
css怎么让动画一直播放
css怎么让动画一直播放 CSS动画是为网页添加动态效果的常用技术。然而，有些动画在播放一次后就停止了，无法一直重复播放。下面我们将介绍如何使用CSS让动画一直播放。 首先，我们需要使用CSS关键帧（keyframes）来定义动画。keyframes允许我们指定动画在不同的帧（或时间点）上的样式。例 ......
一个CSS动画的demo
.lineBarDis { height: 8px; background-image: linear-gradient(to right, #011c72 0%, #c7ced2 100%); animation: myAnimation 1.5s infinite; /* 设置动画为2秒钟的时间 ......
开发指导—利用CSS动画实现HarmonyOS动效（一）
注：本文内容分享转载自HarmonyOS Developer官网文档 一. CSS语法参考 CSS是描述HML页面结构的样式语言。所有组件均存在系统默认样式，也可在页面CSS样式文件中对组件、页面自定义不同的样式。请参考通用样式了解兼容JS的类Web开发范式支持的组件样式。 尺寸单位 ● 逻辑像素p ......
css之positon定位
最近要把一个长表格改成表头不随滚动向上滚动而是固定，复习下css的定位知识，记录下 <style> .box { border: 1px solid silver; position: relative; height: 200px; width: 300px; overflow: auto; } ......
css元素居中对齐
css 盒子居中对齐 1. 弹性盒子 .father{ display:flex; justity-content:center; align-items:center } .son{ ... } <div class="father"> <div class="son"></div> </div> ......
CSS BFC 介绍及应用
## 概念 BFC（Block Formatting Contexts 块级格式化上下文）是 CSS 中的一个重要概念。 它是页面上一个独立的渲染区域，如果一个元素具有 BFC 特性，则内部子元素在任何情况下都不会影响到外部元素，也不会被外部元素影响。 例如： 1. **处理浮动问题**：当父元素包 ......
Tailwind CSS的初次邂逅
官方文档 英文文档：Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. 中文文档：Tailwind CSS - 只需书写 HTML 代码，无需书写 CSS，即可快速构建美观的网站。 | Tailwi ......
CSS基础-过渡动画
CSS3新添加了过渡动画， 即使用者定义好 一个元素的**开始状态**和**结束状态**， CSS会根据变化曲线形成**补间动画**效果。 CSS3中用**transition**属性来描述动画如何运动。  { background-color: #c7cac9; } table tbody tr:nth-child(even) { background-color: #ccc; } */ ` ......