原理其实很简单，找一张loading的静态图 旋转即可！ 知识点：transform<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width
......
519
0
0
2024-02-25
<ul class="accordion-container">
<li class="accordion-item" style="background-image: url(bg1.jpg);">
<p class="accordion-title">背景1</p>
......
438
0
0
2024-02-10
背景变色<div class="button"><span>hover me to change</span></div>
.button {
margin:40px auto;
width:200px;
height:60px;
padding:0 30px;
......
627
0
0
2024-02-10
示例代码01JQ实现$(".ion-ios-search").click(function() {
if (!$(".search").hasClass("active")) {
$(".search").addClass("active");
}
})
$(".ion-ios-close-empty").cli
......
308
0
0
2024-02-10
CSS 原生嵌套语法在之前，只有在 LESS、SASS 等预处理器中，我们才能使用嵌套的写法，像是这样：div {
& > p {
color: red;
}
&:hover {
color: yellow;
}
}
从 Chrome 112 开始，原生
......
329
0
0
2024-02-03
在本文中，我们将探索 CSS Grid repeat() 函数的所有可能性，它允许我们高效地创建 Grid 列和行的模式，甚至无需媒体查询就可以创建响应式布局。不要重复自己通过 grid-template-columns 和 grid-template-rows 属性，我们可以显式地设置网格中的行数和列数，并指定它们的大小。如果我们希望多行和/或多列的大小相
......
298
0
0
2024-02-03
本文章系《Unleashing the Power of CSS》（释放CSS的力量，暂且这么翻译吧）一书的学习笔记，希望通本书的学习，系统的梳理下CSS相关的高级新特性。本篇文章是其第一部分，由于全书英文版，理解和阅读会有偏差，欢迎各位大佬们指正，我们一起共同提高。开篇在过去的几年里，CSS引入了许多新的改进功能，并且跨浏览器的努力提高了兼容性，使这门语言
......
278
0
0
2024-02-02
css3在切图中占有半壁江山的位置，所谓人靠衣装，马靠鞍，一个网站好不好看除了设计本身，合理的布局以及完美css布局会让视觉更上一层楼今天主要分享几个在css3中常用的函数，希望看完在项目中有所思考和帮助正文开始...calc这是一个计算函数，通常在业务上使用也是非常之多，比如一个场景，一个三栏结构，如果想让内容铺满整个内容，但是头部与底部高度固定有人说这个
......
281
0
0
2024-01-31
今天给大家推荐一个拥有70K star的CSS框架——Tailwind CSSTailwind CSS 是目前获得star数量最多的css框架，less只有16.9k，sass 14.6k;今天就来探究一下为何Tailwind CSS这么受欢迎Tailwind CSS 是什么？Tailwind CSS是一个高度可定制的CSS框架，用于构建现代化的Web界面。
......
282
0
0
2024-01-20
作者简介Kay Huang，携程高级视觉设计师，专注于前端样式与动画领域。一 、背景携程火车票营销页使用 css 制作动画很多年了，这大大提高了动画给予页面丰富的视觉体验。不过，在开发的过程中，也遇到了一些性能相关问题和用户反馈，比如头部动画卡顿、页面打开时间较长、页面打开后部分数据加载时间较长等问题。为解决这些问题，我们借助性能检测工具定位问题，并查阅源码
......
272
0
0
2024-01-16
本文将介绍如何使用 linear-gradient 、background-size 等属性来实现网格背景效果。前言最近在开发一个拖拽式仪表盘时，需要在拖拽组件时添加网格辅助标线来帮助布局和对齐元素。最先想到的是使用 CSS 来实现这个效果，经过一番尝试，发现可以通过使用 CSS 的一些技术点，轻松实现不同类型的网格背景效果，包括实线网格和虚线网格。前驱知识
......
442
0
0
2024-01-07
目录实现过程（完整源码在最后）：1 老样子，定义基本样式：2.定义基本标签：3.定义每个按钮的基本样式：4. 鼠标经过按钮样式改变：5.设置环绕按钮的4根线上面那条的样式：5.以此类推，设置环绕按钮的其它3根样式：6.给第一，第三个按钮设置其它颜色：完整代码：话不多，先看效果：实现过程（完整源码在最后）：1 老样子，定义基本样式： *{
......
386
0
0
2023-09-09
位置是在设计之初就会考虑的因素。人们在阅读和浏览事物时，会遵循一些特定的规律，在用户界面设计上遵循这些规律，能帮助用户更容易、更快捷地看到并理解眼前的事物。其中有两条规律和位置设计元素有关： ①当眼睛偏离视中心时，在偏离距离相等的情况下，人眼对左上的观察最优，依次为右上、左下，而右下最差。因此，左上部和上中部被称为“最佳 视域 ”。 ②第二条规律
......
445
0
0
2023-06-27
[TOC]0x00 前言简述本章节，主要介绍HTML布局与区块的元素介绍, 比如头部，中部，尾部以及行内区块与行外区块等，具体讲解如下述所示。网页布局, 对改善网站的外观非常重要,请慎重设计您的网页布局。在HTML中虽然我们可以使用table标签来设计出漂亮的布局，但是table标签是不建议作为布局工具使用的(表格不是布局工具)。网站布局, 大多数网站会把内
......
488
0
0
2023-05-05
使用 CSS 让你的 HTML 项目更具风格。当你编写文档时，无论是为开源项目还是技术写作项目，你都应该有两个目标：文档应该写得好，同时要易于阅读。前者通过清晰的写作技巧和技术编辑来解决。第二个目标可以通过对 HTML 文档进行一些简单的更改来解决。超文本标记语言（HTML）是互联网的支柱。自 1994 年“万维网”问世以来，所有网络浏览器都使用 HTML
......
504
0
0
2023-05-01