腾讯云开发者社区-腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

call_me_R

专栏作者

311

文章

314811

阅读量

24

订阅数

推荐的十个CSS动画库

css 网站动画动效集合

你可以选择你喜欢的动画类型（比如：进入/退出），此外你也可以选择特定的一种（比如：scale-in），甚至，你可以为该动画选择不同的变化（比如：scale-in-right）。

2023-05-23

1.3K0

CSS REM - 什么是 REM？

css rem size width 浏览器

REM 代表 font size of the Root element，即 Root EM。REM 是值/数据类型长度的值。长度的另外一个值是我们老朋友 - 像素 px。每个接受长度作为值的属性都接受 REM 值。比如：margin, padding, font-size 等。

2023-05-23

6280

使用 CSS Gradient 的缺陷实现噪点画面

编程算法 css svg 渲染

你是否记得老式电视没有信号的噪点画面呢？或者说，当信号不好的时，失真的画面？如果你没有电视信号（失真）的概念，可以看下面的 GIF 图，你就会明白我说什么了。

2022-12-02

8350

创建水平滚动的正确方式【CSS 网格布局】

自从奈飞 Netflix 成为了家喻户晓的名字以来，在移动端中我们一直使用横向布局。水平滚动容器（列表）已经成为了一种常见的布局做法，而不是将东西都堆叠在页面上，这将减少占用小屏幕设备垂直的空间。

2022-11-22

2.5K0

黑客帝国 - 矩阵雨

css canvas height shadow width

实现的代码不多，这里贴上 JavaScript 文件的代码。代码即文档，若难以理解，请结合代码中的注释去学习。

2022-11-22

5560

从 Angular Route 中提前获取数据

angularjs bash json css

—\ntheme: fancy\n—\n\n### 介绍\n\n提前获取意味着在数据呈现在屏幕之前获取到数据。本文中，你将学到，在路由更改前怎么获取到数据。通过本文，你将学会使用 resolver，在 Angular App 中应用 resolver，应用到一个公共的预加载导航。\n\n### 你为什么应该使用 Resolver\n\nResolver 在路由跟组件之间扮演着中间件服务的角色。假设你有一个表单，没有数据时，你想向用户一个空的表单，当在加载用户数据时展示一个 loader，然后当数据返回时，填充表单并隐藏 loader。\n\n通常，我们都会在组件的 ngOnInit() 钩子函数中获取数据。也就是说，组件加载完之后，我们发起数据请求。\n\n在 ngOnInit() 中操作，我们需要在每个需要的组件加载后，在其路由页面中添加 loader 展示。Resolver 可以简化 loader 的添加使用。你可以只添加一个适用于每个路由的 loader，而不是每个路由中都添加 loader。\n\n本文将结合示例来解析 resolver 的知识点。以便于你可以牢记它并在项目中使用它。\n\n### 在应用中使用 Resolver\n\n为了在应用中使用 resolver，你需要准备一些接口。你可以通过 JSONPlaceholder 来模拟，而不需要自己开发。\n\nJSONPlaceholder 是一个很棒的接口资源，你可以借助它更好学习前端的相关概念而不被接口所约束。\n\n现在，接口的问题解决了，我们可以开始 resolver 的应用了。一个 resolver 就是一个中间件服务，所以我们将创建一个服务。\n\nbash\n ng g s resolvers/demo-resolver --skipTests=true\n\n\n> –skipTests=true 跳过生成测试文件\n\nsrc/app/resolvers 文件夹中创建了一个服务。resolver 接口中有一个 resolve() 方法，它有两个参数：route（ActivatedRouteSnapshot 的实例）和 state(RouterStateSnapshot 的实例)。\n\nloader 通常是在 ngOnInit() 中编写所有的 AJAX 请求，但是逻辑将会在 resolver 中实现，替代 ngOnInit()。\n\n接着，创建一个服务来获取 JSONPlaceholder 中列表数据。然后在 resolver 中底调用，接着在路由中配置 resolve信息，（页面将会等待）直到 resolver 被处理。在 resolver 被处理之后，我们可以通过路由来获取数据然后展示在组件中。\n\n### 创建服务并编写逻辑获取列表数据\n\nbash\n ng g class models/post --skipTests=true\n\n\npost.ts\n\ntypescript\nexport class Post {\n id: number;\n title: string;\n body: string;\n userId: string;\n}\n\n\nmodel 就绪，是时候获取帖子 post 的数据了。\n\npost.service.ts\n\ntypescript\nimport { Injectable } from "@angular/core";\nimport { HttpClient } from "@angular/common/http";\nimport { Post } from "../models/post";\n\n@Injectable({\n providedIn: "root"\n})\nexport class PostsService {\n constructor(private _http: HttpClient) {}\n\n getPostList() {\n let URL = "https://jsonplaceholder.typicode.com/posts";\n return this._http.get<Post[]>(URL);\n }\n}\n\n\n现在，这个服务随时可被调用。\n\ndemo-resolver.service.ts\n\ntypescript\nimport { Injectable } from "@angular/core";\nimport {\n Resolve,\n ActivatedRouteSnapshot,\n RouterStateSnapshot\n} from "@angular/router";\nimport { PostsService } from "..

2022-09-08

6.1K0

谈谈前端性能优化

css 缓存 seo javascript

作为一个前端开发者，前端性能优化问题是无可避免的。比如，你使用 vue 去开发一个运营活动的项目，首屏加载缓慢，你应该怎么办呢？又比如，你开发官网，你选择 ssr 还是 spa 呢？

2022-04-25

2970

10 个不错的 CSS 小技巧

css 编程算法 javascript

CSS 大约有两百个属性。很多属性都是相互关联的，理清楚每一个属性细节是不可能的。所以，本文分享一些有用的 CSS 小技巧，方便开发者和设计师参考。

2022-04-25

9660

一个元素即可实现 3D 插图效果

图像处理 css

仅使用一个 <img> 标签，使用一个小技巧就可以创建一个 3D 插图，没有为伪元素，没有其他其他标签，没使用 SVG。仅仅是一个标签配合一些 CSS 样式。

2022-04-24

2930

没人告诉你关于 CSS 变量的那些事

编程算法 css

在这种情况下，!important 并不是 color 的一部分，而是增加了 --color 变量的特性。规范中指明：

2022-04-24

4520

Angular 中 SASS 样式的使用

sass css angularjs 编程算法

在 Angular 自定义指令 Tooltip 文章中，我们说会出一篇关于 sass 样式的文章，现在它来了。

2022-04-24

4.9K0

Angular 自定义指令 Tooltip

angularjs typescript css

Yeah，关注我的读者应该知道，上一篇文章了解 Angular 开发的内容，我们已经概览了 Angular 的相关内容。在自定义指令的部分，我们已经能够实现编写，但是，在实际场景中，我们还需要标准化的管理。

2022-04-15

1.3K0

推荐 5 个优秀的 Javascript 图标库 🚀

开源 css npm svg cdn

Feathericons 是精美的开源图标集合，每个图标按照24 * 24的规格进行设计。

2022-03-10

1.1K0

仅使用一个 DIV 配合 CSS 实现饼状图

css 编程算法

本文使用的是简写的变量，在生产环境中，为了达到可读性，我们应该使用--p -> --percentage， --b -> --border-thickness， --c -> --main-color 来表示。

2022-03-10

9670

仅使用 CSS 旋转制作八卦迷惑动画 🧘‍♀️

我之所以将其拿出来分享，一方面觉得它看起来比较酷，也像原作者所说的那样：看起来是个令人生畏的病毒，另一方面觉得作者的编码思路和代码值得了解学习下。

2022-03-10

6100

两个DIV实现雷达扫描效果

我：嗯！这就是一张动态图搞定的事情，叫UI出一个动图就完成了，此题已解，机智如我！

2022-03-10

6970

CSS八种让人眼前一亮的HOVER效果

巧用伪元素:before、:after等，让你的页面按钮眼前一亮。原文链接：8 amazing HTML button hover effects, that will make your website memorable。更多内容：github.com/reng99/blog…

2020-10-15

4860

WEB开发中40+高质量的免费资源【多图但值得一看】

对开发者来说，资源非常重要，因为在编码的时候可以提高很大程度上提高生产力。通过几个月，我收集到了一些链接，然后我很乐意跟大家分享其中部分。希望它们对你有所帮助。废话少说，这里提供了很棒的免费且最新的资源。

2020-06-16

8770

【译】用纯JavaScript写一个简单的MVC App

javascript html mvc css

我想使用model-view-controller体系结构模式并用纯JavaScript编写一个简单的应用程序。所以我着手做了，下面就是。希望能帮你理解MVC，因为这是一个很难理解的概念，刚接触时候会很疑惑。

2020-03-20

1.9K0

【译】推荐的十个CSS动画库

jquery java javascript css

你可以选择你喜欢的动画类型（比如：进入/退出），此外你也可以选择特定的一种（比如：scale-in），甚至，你可以为该动画选择不同的变化（比如：scale-in-right）。

2020-01-15

6570

点击加载更多

社区活动

腾讯技术创作狂欢月

“码”上创作 21 天，分 10000 元奖品池！

Python精品学习库

代码在线跑，知识轻松学

博客搬家 | 分享价值百万资源包

自行/邀约他人一键搬运博客，速成社区影响力并领取好礼

技术创作特训营·精选知识专栏

往期视频·千货材料·成员作品最新动态