css /*loading*/
.loader {
width: 100px;
height: 101px;
border: 8px solid;
border-top-color: hsl(154,100%,31%);
border-left-color: hsl(216,87%,52%);
原创
2021-05-13 21:31:56
1043阅读
效果图源代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>css loading</title> <style> .
原创
2022-10-10 06:23:21
149阅读
项目中有个活动页加载时有个loading动画，效果如上图，连续绽放小球，问题就是太卡，经常出现一堆小球抱团卡住，遂进行优化注意：（仅在页面加载时卡顿，加载完毕，点击的时候不卡顿）查看代码发现动画借用的animejs 官网中的效果，通过canvas实现的，按理说canvas应该时性能很好的，不应该出现卡顿，问题在我的活动页中就是非常卡顿思考再三，把最终原因归结于首页加载时候，浏览器要加载资源，渲染d
转载
2024-07-04 05:21:39
137阅读
在讲CSS Modules之前，先想想什么是CSS Module？在我眼中CSS Module是对css进行模块化的管理，更加深入的解释就是用来管理css样式的导入与导出。灵活按需导入以便复用代码，导出的时候要合理的分割域的界限。CSS Module面对的问题模块化实际过程中遇到的问题有如下几点:样式污染命名混乱无法共享变量,具体来说，在主题样式文件库中设置了默认样式，然后想要在js中去获取，在原
转载
2023-09-27 12:49:55
55阅读
一、是什么 视差滚动（Parallax Scrolling）是指多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验 我们可以把网页解刨成：背景层、内容层、悬浮层 当滚动鼠标滑轮的时候，各个图层以不同的速度移动，形成视觉差的效果二、实现方式 使用css形式实现视觉差滚动效果的方式有：background-attachment
transform:translate3D方式一：ba
转载
2023-12-19 21:23:44
118阅读
用纯 css 实现 loading 加载动画效果。
原创
2024-03-03 10:54:42
1058阅读
* html<div class="weui-loading"></div>* css.weui-loading { width: 20px; height: 20px; display: inline-block; vertical-align: middle; -webkit-animation: weuiLoad...
原创
2021-08-13 10:33:30
718阅读
# CSS Loading 动效及其在 iOS 中的应用
在现代 web 开发中，用户体验尤为重要，尤其是在页面加载期间。为了让用户耐心等待，开发者通常会使用 Loading 动效来提升用户的体验。在 iOS 应用中，这种 Loading 动效尤为常见，下面我们将通过 CSS 示例来展示多种 Loading 动效，同时探讨其实现方式。
## 什么是 Loading 动效？
Loading 动
原创
2024-08-21 07:50:13
64阅读
最近在开发手机端APP页面功能时遇到一个需求:某个页面查询的数据有三种分类，需要展示在同一页面上,用户通过点击分类标签来查看不同类型的数据， 期望效果是用户点击标签切换时另一个页面能够以一个平滑切入的方式展示数据.示意图如下：话不多说了．首先上CSS<style type="text/css">
html, body{
height: 100%;
}
body{
o
转载
2023-10-19 07:48:32
196阅读
一、雪碧图
知乎视频www.zhihu.com
1.1概念 CSS Sprite也叫CSS精灵、CSS雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，由从前的多次请求变为一次请求。客户端每显示一图片都会向服务器发送请求，所以图片越多请求越多，造成延迟的可能性越大。所以页面有许多icon时，
转载
2024-08-01 13:44:56
63阅读
# 实现“iOS CSS 滑动 兼容 CSS”教程
## 整体流程
以下是实现“iOS CSS 滑动 兼容 CSS”的步骤：
| 步骤 | 描述 |
| ---- | ---- |
| 1 | 添加meta标签 |
| 2 | 使用-webkit-overflow-scrolling属性 |
| 3 | 使用-webkit-touch-callout属性 |
## 每一步具体操作
###
原创
2024-06-27 03:55:56
68阅读
（二） 上次分享了四个CSS3的加载动画，今天继续（标题接上一次）。 在线demo：http://liyunpei.xyz/loading.html （持续更新） 请注意：代码中的关键帧动画有的用的linear曲线，而有的用的是ease曲线。前者是匀速执行，整个动画以固定的速度执行；后者有加速减速阶
转载
2017-07-12 00:32:00
520阅读
2评论
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> dot {
原创
2023-03-07 01:23:02
198阅读
# iOS滑动CSS
在移动应用开发中，滑动效果是常见且重要的交互方式之一。iOS设备上的滑动效果可以通过CSS样式来实现。本文将介绍如何使用CSS样式实现iOS滑动效果，并提供相应的代码示例。
## 1. CSS滑动原理
在iOS设备上，滑动效果通常使用overflow属性和transform属性来实现。具体而言，可以通过以下步骤实现滑动效果：
1. 使用overflow属性将元素设置为
原创
2023-08-11 09:37:18
150阅读
## jQuery Loading Ajax遮罩CSS实现教程
### 1. 概述
在开发Web应用程序时，经常会使用Ajax来实现异步加载数据，提高用户体验。然而，在加载数据过程中，页面往往会出现空白或者无响应的情况，用户体验不佳。为了解决这个问题，我们可以使用jQuery来实现一个Loading Ajax遮罩效果，让用户知道数据正在加载中。
### 2. 实现步骤
下面是整个实现的步骤
原创
2023-08-15 05:29:39
145阅读
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>纯css制作loading效果</title> <style type="text/css"&am
原创
2022-06-30 17:25:41
207阅读
在开发 iOS 应用时，CSS 滑动效果常常是一个重要的用户体验元素。然而，在实际开发过程中，我们可能会面临“iOS CSS滑动”相关的问题。这篇博文将详细记录解决“iOS CSS滑动”问题的过程，包括环境配置、编译过程、参数调优、定制开发、部署方案以及生态集成的具体步骤。
### 环境配置
使用 iOS 进行 CSS 滑动效果的开发，我们必须首先确保开发环境的配置正确无误。以下是我配置的步骤
纯css制作loading效果 Loading...
原创
2021-07-27 20:50:33
418阅读
动画效果我们可以用js完成也可以用css3新增的动画完成，不过在工作中建议能用css完成的动画就用css别用js毕竟css渲染的效果比js更好让我们先来了解下 css中的动画知识CSS3动画是什么？动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。要创建 CSS3 动画，你需要了解 @keyframes 规则。@keyframes 规则是创建动画。
@keyfr
项目中遇到一个页面中是以一个scrollview横向Tab展示两个不同功能的显示，譬如消息和公告功能，但是由于滑动返回手势和scrollview的滑动返回手势冲突了，导致页面不再能够滑动返回。类似的还有图片浏览功能也出现过。 iOS系统中，滑动返回手势，其实是一个UIPanGestureRecognizer，系统默认的操作是只有滑动屏幕的左边的某个位置，UIPanGestureRecognize
转载
2023-06-14 21:56:52
114阅读
