人物表情
CSS实现圣诞老人调皮、开心等四种创意表情动画效果使用CSS实现的圣诞老人开心等四种创意表情动画效果，实现原理也很简单，在html页面中分别定义眼睛、嘴巴、耳朵、胡子、鼻子等部位所代表的div元素，利用CSS的keyframes、transfo...
3D按钮
CSS 4款不同变换效果的3D按钮悬浮动画效果使用CSS实现的4款不同旋转效果的3D按钮。当鼠标悬停于3D按钮之上时，按钮旋转方向并且显示不一样的文字内容。是通过定义前后、上下左右上下六个面加上前后两个包装面实现的最终效果。使用起来也很方便...
开礼物盒
CSS晃动的圣诞礼物盒，悬浮礼物盒🎁打开盖子一款基于CSS实现节日气氛满满的🎁圣诞礼物开盒动画效果，呈现的效果：一个礼物盒子放于HTML页面中，如果迟迟不打开盒子会间接性的晃动，仿佛在邀请你打开它。当鼠标悬浮于礼物盒子表面，盒子盖子会被...
创意背景
CSS 创意动态渐变背景，linear-gradient实现的线型交叉图形变换效果基于 CSS 的 linear-gradient、keyframes 以及animation等关键属性实现的线性渐变动画效果，非常的吸引人！linear-gradient 是一种背景图像，它沿着...
电商布局
CSS的Flexbox实现的商品页面网格响应式布局，附带购物车增删商品交互效果使用 Flexbox 创建的产品页面可以实现一个简洁且响应式的网格布局。Flexbox 是 CSS3 中的一个布局模式，它能够使网页元素在不同的屏幕尺寸下保持良好的布局效果。它可以自动调整大小以...
立体开关
CSS实现等轴视角下的2.5D风格开关切换动画效果使用CSS的transition、transform以及grid-template-rows等关键属性实现的等轴视角下的2.5D风格立体开关动画效果，多用在游戏或其他创意场景中。附带阴影以及明暗...
旋转立方体
GSAP实现的3D立体魔方旋转动画效果，立方体的每个面都设置了错落动画使用GSAP的stagger仅需要20行脚本即可实现这种3D旋转立方体，立方体的每个面都包含错落动画，并且附带放大缩小以及颜色渐变的动画效果。这样的动画不仅能够吸引用户的注意力，还能提升网页的互...
创意文字
html中10种有创意的文字悬停动画效果使用splitting.js插件结合CSS实现的10种有创意的文字展示动画效果，将这些炫酷的文字动画效果应用于鼠标悬停或者初始化页面文字加载场景中，可以提高页面的交互性和用户体验。
查询动画
CSS定制搜索中动画效果（眼睛注视放大镜加载中动画）使用CSS实现的创意搜索动画效果，这是一种点击查询按钮且搜索结果未出现之前的一段动画效果，呈现的效果是：转动的眼球注视放大镜，且上方带有加载状态的三点动画。整个动画效果全是基于CSS实现的不依赖...
星级评分
CSS带表情反馈的星级评论插件实现了一个基于选择星星数量来改变面部表情的CSS评分系统，评分越低表情越沮丧失望，评分越高表情越欢喜满意。是基于CSS的不断变换（transform）以及动画（animation）实现的最终效果。
跳跃加载器
CSS实现的3D交叉跳跃的多彩小球动画加载器使用CSS实现的3D立体三色小球交叉移位疯狂跳跃Loading加载器动画效果。是基于CSS的keyframes、transform、animation以及box-shadow等关键属性实现的。这...
背景移动
CSS动态移动背景（平铺多个小图案朝一个方向缓慢移动）通过CSS实现的移动动态背景动画效果。呈现的效果：多种小图标平铺页面并且持续缓慢向右上角移动。实现方式：通过设置html页面的body元素的transform、background-*、ani...