ScrollMagic 滚动网页小窗口动态展示缩略图或视频

滚动动画

ScrollMagic 滚动网页小窗口动态展示缩略图或视频

滚动动画效果是基于强大的动画滚动魔法 JavaScript 插件 ScrollMagic 创建的,该动画呈现的效果是:网页中的多个secton区域设置了缩略图小窗口,小窗口中可放置图片或者视频,...

CSS 倾斜旋转文本

文本倾斜

CSS 倾斜旋转文本

使用 CSS 的 transform等属性实现的倾斜文本效果,适当的调整参数可以实现文本翻转效果,中文以及英文都能很好的支持。

CSS 带圆角的半圆弧形效果

圆角弧形

CSS 带圆角的半圆弧形效果

使用CSS实现了带颜色过渡的圆弧效果,使用了 CSS 的 mask 以及 background 等属性控制圆弧形的张口弧度大小、粗细以及颜色,以上这些属性支持完全的自定义。

CSS 三种模糊擦除文字渐入效果

文字渐入效果

CSS 三种模糊擦除文字渐入效果

基于纯CSS实现的文字渐入效果,实现原理是基于 CSS 样式的mask-*、filter以及animation相关属性实现的模糊擦除动画效果,提供了三种不同的配色可供选择,同时也支

CSS 页面滚动背景渐变,视觉层次感超强的页脚淡出效果

淡出效果页脚

CSS 页面滚动背景渐变,视觉层次感超强的页脚淡出效果

仅仅使用 CSS 创建了一款时尚简约的页脚,该页脚会随着鼠标滚动逐渐呈现出来,同时页面主体内容背景会逐渐淡出的一种动画效果,这种设计使得页脚看起来像是

CSS 仿真台风扇动画效果

吹风电扇

CSS 仿真台风扇动画效果

使用纯 CSS 实现的 3D 仿真电风扇,非常逼真的还原了台扇的立体效果,并且实现了家用台扇的基本功能,有四个按钮,其中一个是开关按钮,另外三个是档位控制按钮,通过鼠标可以操控电扇的开关以及风速...

JavaScript 拖动俄罗斯方块到指定网格小游戏

消除游戏

JavaScript 拖动俄罗斯方块到指定网格小游戏

很简单的一款消除类小游戏,同时原生的JS以及CSS实现的,通过拖动方块到指定的网格位置,当网格填充满以后游戏胜利并且重置游戏,这款半成品小游戏实现的很简单,可以在此基础上随意发挥想象力创造出可玩...

GLSL 着色器实现的神经元信号 Canvas 动画效果

视觉噪音

GLSL 着色器实现的神经元信号 Canvas 动画效果

使用先进技术 GLSL 着色器生成的神经元放电动画效果,该效果与信号传播、自然界的噪音等动画效果同样类似,底层是利用随机数生成算法来模拟自然界的噪音,随着时间变化,图案会连续地演化,并且允许用户...

Three.js 实现的 3D 大雪纷飞粒子背景动画效果

下大雪背景

Three.js 实现的 3D 大雪纷飞粒子背景动画效果

基于开源 3D 图形组件库 Three.js 创建的鹅毛大雪纷飞的背景动画效果,逼真的下雪动画效果只需要简单的几十行代码即可搞定,非常的轻量级,能够实现秒加载!网站中加入此效果一定能够惊艳到用户...

svg 乐高积木玩具随机切换背景

玩具背景

svg 乐高积木玩具随机切换背景

这是一款由 svg 矢量图制成的乐高积木玩具背景图,通过 JavaScript 事件控制颜色效果以及在用户点击屏幕或者刷新页面时重新变换组合积木形状,通过简单的css控制svg的位置,特别的轻量...

带波浪切换按钮效果的响应式 gsap 内容轮播组件

揭幕式轮播

带波浪切换按钮效果的响应式 gsap 内容轮播组件

​gsap实现的揭幕式动画效果内容轮播切换插件,配备了基于 CSS 创建的波纹扩散动画效果的左右切换按钮,通过gsap组件实现的揭幕式切换动画效果,丝滑顺畅给用户一种利索的感觉。

CSS 3D 俄罗斯方块游戏基础版

3D旋转方块

CSS 3D 俄罗斯方块游戏基础版

使用纯 CSS 使用的 3D 旋转俄罗斯方块,初始化是一个旋转的 3D 地面,游戏开始后不同形状的立体方块从天而降落到地面,目前仅有这两步骤效果,没有添加消除的游戏效果,您可以在此动画效果上扩展...