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