首页
AI Coding
NEW
沸点
课程
直播
活动
AI刷题
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
会员
登录
注册
CSS
前端Hardy
创建于2024-10-21
订阅专栏
分享有趣的CSS小案例
等 44 人订阅
共206篇文章
创建于2024-10-21
订阅专栏
默认顺序
默认顺序
最早发布
最新发布
HTML&CSS:酷炫!摇摆的小草与稻草人
这段 HTML 代码创建了一个包含画布元素的页面,用于绘制一个动态的草地场景,其中包含摇摆的草叶和一个稻草人图像。 演示效果 HTML&CSS HTML 结构 canvas grass:定义一个画布元
HTML&CSS: 打造的拼图游戏,你能通关吗?
这段 HTML 代码创建了一个具有动画效果和交互功能的页面,展示了一系列的图像拼块,类似于一个拼图游戏。 演示效果 HTML&CSS HTML 结构 box:一个容器,用于包含多个图层. layer:
HTML&CSS:惊爆!齿轮动画,为你的网页添动力
这段代码创建了一个包含四个齿轮的动画效果,每个齿轮以不同的速度和方向旋转,模拟了一个机械齿轮组的运作。 演示效果 HTML&CSS HTML 结构 gearbox: 创建一个类名为“gearbox”的
HTML&CSS:如何让 Flappy Bird 游戏在页面 “活” 起来
这段代码创建了一个动态的 Flappy Bird 游戏动画,通过 CSS 动画技术模拟了小鸟的飞行动作和背景的滚动,为页面添加了趣味性的视觉效果。 演示效果 HTML&CSS HTML 结构 load
HTML&CSS:CSS 版吃豆人动画,带你找回童年欢乐
这段代码创建了一个动态的吃豆人动画,通过 CSS 动画技术模拟了吃豆人的动作和眼睛的移动,为页面添加了趣味性的视觉效果。 演示效果 HTML&CSS HTML 结构 loader: 创建一个类名为“l
HTML&CSS:惊爆!3D 翻转卡片,图片信息惊艳呈现
这段代码创建了一个具有 3D 翻转效果的卡片,用于展示篮球明星詹姆斯和韦德的空中接力。当用户将鼠标悬停在卡片上时,卡片会放大并显示额外的信息,同时图片会消失,突出显示文本内容。 演示效果 HTML&C
HTML&CSS:零门槛解锁红绿灯特效
这段代码创建了三个具有不同灯光效果的开关按钮。当用户点击开关时,可以触发不同的灯光动画。灯光效果通过 CSS 动画实现,包括闪烁和关闭动画。 演示效果 HTML&CSS HTML 结构 wrap:定义
HTML&CSS:美到窒息!超炫丝滑的动态圆形加载动画
这段代码创建了一个包含多个动态移动的圆形点的动画效果。每个点都有自己的动画,它们在容器内上下移动,并在移动过程中改变色相,创建一种动态的视觉效果。这种效果可以用作网页的背景动画、加载动画或其他装饰性动
HTML&CSS:手把手教你实现进度加载条
这段代码创建了一个动画加载条,通过 CSS 动画模拟加载进度的填充和光效的变化。这种效果适用于页面加载、数据加载或其他需要显示进度的场景。加载条的动画效果使得等待过程更加直观和有趣。 演示效果 HTM
HTML&CSS:超炫丝滑的卡片水波纹效果
这段代码创建了一个卡片,卡片上有三个波动效果,这些波动效果通过 CSS 的@keyframes 动画实现,创建了一个旋转的动画效果。这种效果适用于创建动态的视觉效果,例如音乐播放器的封面、动态背景或其
HTML&CSS:手把手教你实现设备开关效果
这段代码创建了一个超级酷炫逼真的物理开关控件,用户可以通过点击开关来切换状态。当复选框被选中时,开关的样式会发生变化,包括背景色、边框和 SVG 图标的颜色。这种效果适用于创建美观的交互式开关,例如在
HTML&CSS:手把手教你实现优雅的汉堡菜单图标
这段代码是一个 HTML 页面,它包含了内联的 CSS 样式,用于创建一个汉堡菜单图标,这个图标可以通过复选框控制显示和隐藏。点击获取更多 演示效果 HTML&CSS HTML 结构 burger:定
HTML&CSS:超炫!逼真的3D 键盘按钮
这段代码用于创建一个模拟键盘按键的视觉效果,每个按键都有 3D 效果,都有一个渐变背景和阴影效果,使其看起来像是凸起的物理按钮。这种效果适用于游戏界面或其他需要键盘操作的场景,为用户提供视觉上的反馈和
HTML&CSS:惊!优雅的3D折叠按钮
这段代码创建了一个具有 3D 效果和动画的按钮,按钮上有 SVG 图标和文本。按钮在鼠标悬停时会显示一个漂浮点动画,图标会消失并显示一个线条动画。这种效果适用于吸引用户注意并提供视觉反馈。按钮的折叠效
HTML&CSS&JS:全网颜值最高的登录注册页面,建议收藏
这段代码实现了一个用户注册和登录的界面,用户可以通过点击按钮在注册和登录表单之间切换。界面使用了背景图、圆角、阴影等样式,使其看起来更加美观。通过JavaScript的事件监听,用户的交互行为能够动态
HTML&CSS:超级酷炫的3D照片墙
这段代码创建了一个 3D 图片轮播效果,其中包含 8 张图片。图片在 3D 空间中围绕 Y 轴旋转,形成一个循环的轮播效果。CSS 的@keyframes 动画定义了图片的旋转路径,而 transfo
HTML&CSS:丝滑优雅的加载动画效果
这段代码是一个 HTML 页面,它包含了内联的 CSS 样式,用于创建一个动画加载器(loader)点击获取更多源码 演示效果 HTML&CSS HTML 结构 loader:定义了一个类名为 loa
HTML&CSS:惊艳!这么漂亮的渐变文字!
这段代码创建了一个具有动态光效的标题,通过 CSS 变量和关键帧动画,实现了一个视觉上吸引人的效果。光效元素在标题周围移动,并且它们的边框半径会不断变化,模拟出光线闪烁的效果。这种效果通常用于吸引用户
HTML&CSS:这个3D开关控件能获取年度人气奖吗?
这段代码创建了一个具有 3D 效果的开关控件,当用户点击滑块时,滑块会移动到开关的另一侧,同时改变背景颜色,模拟开关的开启和关闭状态。动画效果增加了页面的互动性和视觉吸引力。点击获取更多源码 演示效果
HTML&CSS:动态星空按钮
这段代码创建了一个具有动态背景和光晕效果的按钮,模拟了太空中星星闪烁的效果。按钮在鼠标悬停和按下时有不同的视觉效果,增加了页面的互动性。 演示效果 HTML&CSS HTML 结构 type="but
下一页