用 css 实现一个圆形背景动效多选框，适用提醒用户勾选场景，突出多选框选项，可以有效增加用户识别度。
原创
精选
2024-08-21 12:07:29
367阅读
本节案例如下（其他动效篇幅原因逐步讲解，欢迎三连）：!请添加图片描述(https://s2.51cto.com/images/blog/202207/21152825_62d9001901e9b4790.gif?xossprocess=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,sh
原创
精选
2022-07-21 15:30:09
2953阅读
在开发 Vue.js 或 Nuxt.js 项目时，使用 CSS 动效组件库可以快速实现丰富的动画效果。以下是几个常用的 CSS 动效组件库和 Vue/Nuxt 动效组件库：1. CSS 动效组件库这些库提供了丰富的 CSS 动画效果，可以直接在 Vue 或 Nuxt 项目中使用。Animate.css
Animate.css 是一个非常流行的 CSS 动画库，提供了大量的预设动画效果，如 fade
大部分的c s s样式动画制作都是有类似的制作流程，总结了一套简单的c s s样式制作流程。方便以后需要写动画时有一定的思路第一步：设计动画CSS 动画样式的制作，首先需要明确动画的设计。想要什么样的动画效果？需要何种元素动画？需要何种时间间隔？需要何种过渡效果？明确以上问题，设计出想要的动画效果，然后开始编写 CSS 样式。第二步：选择元素在 HTML 中使用 CSS 动画样式需要选择元素和确定
转载
2024-03-27 08:38:49
129阅读
理解：transition 过渡transform 变换animation 动画 一、transition1.理解 过渡，用于平滑的改变CSS值，举个例子：change{
width:100px;
height:100px;
background:yellow;
transition:background 10s;
}
change:hover{
backgroun
转载
2024-06-20 18:14:54
48阅读
CSS轮廓设置轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。设置轮廓样式outline-style
outline-style属性用于设置元素的整个轮廓的样式。样式不能是none，否则轮廓不会出现。注意：请始终在outline-color属性之前声明outline-style属性。元素只有获得轮廓以后才能改变其轮廓的颜色。轮廓线不会占据空间，也不一定是矩
转载
2023-09-02 13:47:15
229阅读
# CSS 文字动效兼容iOS
随着前端技术的不断发展，CSS 动效越来越受到开发者的青睐。它不仅使得网站更具视觉吸引力，还能增强用户体验。然而，如何确保这些动效在不同平台上都能正常显示，尤其是 iOS 设备，成为了前端开发者需要考虑的重要问题。本文将深入探讨 CSS 文字动效的实现，特别是如何确保其兼容 iOS，并附带相应的代码示例。
## CSS 动效的基本概念
CSS 动效是通过 CS
原创
2024-09-16 04:56:33
61阅读
使用 svg + css 制作圆环loading动效 <svg class="load" viewBox="25 25 50 50"> <circle class="loading" cx="50" cy ...
转载
2021-08-28 11:48:00
874阅读
2评论
注：本文内容分享转载自HarmonyOS Developer官网文档一. CSS语法参考CSS是描述HML页面结构的样式语言。所有组件均存在系统默认样式，也可在页面CSS样式文件中对组件、页面自定义不同的样式。请参考通用样式了解兼容JS的类Web开发范式支持的组件样式。尺寸单位● 逻辑像素px（文档中以<length>表示）：○ 默认屏幕具有的逻
原创
精选
2023-09-01 14:59:37
547阅读
注：本文内容分享转载自HarmonyOS Developer官网文档点击查看《开发指导—利用CSS动画实现HarmonyOS动效（一）》3. background-position样式动画通过改变background-position属性（第一个值为X轴的位置，第二个值为Y轴的位置）移动背景图片位置，若背景图位置超出组件则超出部分的背景图不显示。<!-- xxx.hml
转载
2023-09-04 14:56:39
107阅读
# 点线背景动效 HTML5
在网页设计和开发中，动画效果可以为用户带来更加生动和吸引人的体验。其中，点线背景动效是一种常见的视觉效果，可以为网页增添一份独特的美感。在本文中，我们将介绍如何使用 HTML5 和 CSS3 来创建点线背景动效，并通过 JavaScript 实现动画效果。
## 流程图
```mermaid
flowchart TD
A(开始)
B(创建点线背景
原创
2024-03-26 07:44:25
180阅读
随着动态沉浸式体验的广泛普及，丰富而细腻的APP动效是考察UI设计师专业技能的因素之一。很多UI新手想知道APP动效设计需要遵守哪些原则，以下小编就给大家介绍一下。 1、具备个性化的动效设计。 这是动效设计最重要的原则之一，任何动效或动画都应该追求个性化，通过个性化盘活界面设计元素。应用不应该具有死板、机械的转换动效，应用的动效应该让用户感受到愉悦和优雅。 2、具备导向功能 动效设计的
转载
2024-03-30 09:41:55
81阅读
在前端开发中，jQuery 是一个强大的工具，尤其在实现动态视觉效果时非常有用。今天，我将分享如何使用 jQuery 和 CSS 实现一个文字逐字出现的动效。这个过程将涵盖环境准备、集成步骤、配置详解、实战应用、性能优化和生态扩展等方面。
### 环境准备
在开始之前，我们需要确保我们的开发环境是兼容的。我们将使用 HTML、CSS 和 jQuery，适用于大多数现代浏览器。
以下是我制作的
交互感比较强的一个动效按钮。
原创
精选
2024-08-14 14:37:33
570阅读
给网页增加一些动效会使得网页更加地生动。 animate.css封装了一个动画库，可直接使用封装好的动画效果。 其链接为：https://daneden.github.io/animate.css/ 我们可以选择动效，查看效果。 使用方式为：引用animate.css，在需要使用动效的元素加上类an
原创
2022-09-29 15:50:44
930阅读
阿里作为中国互联网企业的标杆，不仅一直在为广大人民群众提供快捷便利的服务。也不断引领行业，在各个专业领域，给专业人员提供了优质的工具与服务。对设计师而言，无论是每年一度的 UCAN大会，还是 Kitchen、语雀、Ant Design 等设计开发工具，都给广大设计师带来很大的便利。而最近，阿里又推出了一款基于 Lottie 的动效设计平台 ── 犸良。能够快速生成设计师想要的动态效果，并交付给开发
转载
2024-05-07 10:44:58
169阅读
Lottie前言动画是我们日常开发中必不可少的一个要点，比如某个场景要实现打勾的效果，一开始你的设想可能是这样子的： 用代码实现起来可能还好，绘制圆圈，一段圆弧圆周运动，绘制一个打勾路径，结合动画实现，美滋滋。但是等到设计师出图的那一天，是这样的： 看了效果图，内心有一句话不知道当不当讲 但是不要慌，你能不能想到竟然有这么一个库，可以让设计师"帮你实现动画效果"！没错，它就是
转载
2023-10-13 21:12:52
267阅读
简介前段时间由于产品的”神奇”(qi pa)需求，需要能下拉刷新放大，上划折叠，而且下半部分还是一个Tab+Viewpager布局。类似新浪微博的个人中心，但他的也不能下拉放大背景图，百度良久，发现有个别案例相似，比如appbarlayout-spring-behavior，作者的源码似乎是深入阅读了Framework层AppBarLayout的Behavior了，但是我做demo时，发现在fra
转载
2024-06-03 17:49:40
113阅读
！ 作者：laer_L 很久没写东西了，又来一下，可能看了这个东效你会觉得很简单，但是如果你看完，我相信你还是会发现简单里面还是有文章，也许并不是看起来那样简单，本文精华在于 性能老规矩还是先上GIF也许看到这个图，你就不想再继续看下去了，心想这个动画很简单啊，不就是创建循环创建view，再给每个view的动画，每个view的开始运动的方向随机，再给一个加速器就搞定了嘛，如果你也是这样想
转载
2024-04-29 05:52:14
101阅读
【代码】css 巧用 ::after 实现 tab 切换动效。
原创
2023-12-20 12:05:57
227阅读
