首页
AI Coding
NEW
沸点
课程
直播
活动
AI刷题
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
会员
登录
注册
CSS
前端Hardy
创建于2024-10-21
订阅专栏
分享有趣的CSS小案例
等 43 人订阅
共206篇文章
创建于2024-10-21
订阅专栏
默认顺序
默认顺序
最早发布
最新发布
HTML&CSS :告别卡顿,LOADING 文字动态效果
这段代码通过纯 CSS 实现了一个动态的“LOADING”文字效果,适合用于加载页面或等待提示。 大家复制代码时,可能会因格式转换出现错乱,导致样式失效。建议先少量复制代码进行测试,若未能解决问题,私
HTML&CSS :无限滚动图标导航栏
这段代码通过纯CSS实现了一个动态的水平滚动条效果,适用于展示社交媒体图标或其他需要滚动展示的内容。整体设计美观且富有动感,适合用于创意页面或导航栏。 大家复制代码时,可能会因格式转换出现错乱,导致样
HTML&CSS :这个标题特效,你必须要会
段代码实现了一个动态的标题效果,标题文字显示为“浪漫星空”(可编辑),背景为一张图片。当鼠标在页面上移动时,标题的背景图片会根据鼠标位置动态偏移,营造出一种星空随鼠标移动而变化的视觉效果。 大家复制代
HTML&CSS :立方体3D旋转,比想象中 “丝滑” 10 倍
这段代码通过纯CSS实现了一个动态的3D立方体效果,适合用于展示3D动画或创意页面。 大家复制代码时,可能会因格式转换出现错乱,导致样式失效。建议先少量复制代码进行测试,若未能解决问题,私信回复源码两
HTML&CSS :移动端导航栏
这段代码通过纯CSS实现了一个水平排列的按钮组,每个按钮包含一个SVG图标。按钮在鼠标悬停时会轻微上移,增强用户体验。整体设计简洁美观,适合用于导航栏、工具栏或其他需要图标按钮的场景。 大家复制代码时
HTML&CSS :高颜值星空按钮
这段代码通过纯CSS实现了一个具有星空背景、闪烁星星和流星动画的高颜值按钮。按钮在鼠标悬停和点击时具有动态交互效果,整体设计美观且富有动感,适合用于创意页面或特殊主题的按钮设计。 大家复制代码时,可能
HTML&CSS :超酷炫的3D动态药丸效果
这段代码通过纯CSS实现了一个动态的药丸动画,药丸在旋转的同时,侧面和内部都有丰富的动态效果。整体效果生动有趣,适合用于动画展示或创意页面。 大家复制代码时,可能会因格式转换出现错乱,导致样式失效。建
HTML&CSS :必学!打造 3D 立方体动画
这段代码通过纯CSS实现了一个动态的3D立方体动画,立方体在旋转的同时,每个侧面的文字会动态变化位置。整体效果生动有趣,适合用于动画展示或创意页面。 大家复制代码时,可能会因格式转换出现错乱,导致样式
HTML&CSS :必学!动态悬停卡片
这段代码实现了一个具有动态悬停效果的卡片界面,适合用于展示人物信息、产品介绍或其他内容。卡片的交互性和视觉效果使其更具吸引力和用户友好性。 大家复制代码时,可能会因格式转换出现错乱,导致样式失效。建议
HTML&CSS :眨眼睛特效
这段代码实现了一个动态的加载动画,模拟了一个眼睛的移动效果和一个旋转的圆形元素。 大家复制代码时,可能会因格式转换出现错乱,导致样式失效。建议先少量复制代码进行测试,若未能解决问题,私信我,我会发送完
HTML&CSS :炫酷的进度条动画
这段代码实现了一个具有动态背景、颜色变化和3D阴影的进度条动画。它不仅模拟了加载进度,还通过丰富的视觉效果增强了用户体验。 大家复制代码时,可能会因格式转换出现错乱,导致样式失效。建议先少量复制代码进
HTML&CSS :动态卡片效果
这段代码实现了一个带有动态效果的卡片,包含标题、内容和三个彩色图标。 大家复制代码时,可能会因格式转换出现错乱,导致样式失效。建议先少量复制代码进行测试,若未能解决问题,私信我,我会发送完整的压缩包给
HTML&CSS :AI聊天框界面
这段代码实现了一个带有动态效果的聊天机器人界面,包含输入框、操作按钮和标签区域,整体风格为深色主题,带有渐变和阴影效果。 大家复制代码时,可能会因格式转换出现错乱,导致样式失效。建议先少量复制代码进行
HTML&CSS :生日蛋糕
这段代码通过HTML和CSS实现了一个静态的蛋糕图形,通过伪元素和渐变背景色模拟了蛋糕的细节和装饰。整体效果是一个具有层次感和装饰性的蛋糕。 大家复制代码时,可能会因格式转换出现错乱,导致样式失效。建
HTML&CSS :惊爆!会跳舞的机器人
这段代码通过复杂的HTML结构和CSS样式,实现了一个动态的机器人效果,包含行走、眨眼和嘴巴动作。 大家复制代码时,可能会因格式转换出现错乱,导致样式失效。建议先少量复制代码进行测试,若未能解决问题,
HTML&CSS : canvas和 JavaScript 打造动态爱心
这个页面通过 canvas 和 JavaScript 实现了一个动态的爱心动画效果。每个爱心的大小、颜色和位置会根据时间动态变化,形成一种动态的视觉效果。用户可以通过点击画布重新生成动画。 大家复制代
HTML&CSS :让图片边框 “动” 起来
这段代码创建了一个带有动态边框效果的图片展示,通过CSS技术实现了边框的动态变化效果,为页面添加了视觉吸引力 大家复制代码时,可能会因格式转换出现错乱,导致样式失效。建议先少量复制代码进行测试,若未能
HTML&CSS :数字卡片翻转效果
这个页面实现了一个动态的数字翻转效果,用于显示分钟和秒。HTML 提供了结构,CSS 定义了样式和动画,JavaScript 则通过定时器动态更新数字,实现翻转效果。 大家复制代码时,可能会因格式转换
HTML&CSS&JS :日历卡片
这段代码是一个简单的HTML日历卡片页面,用于显示当前的星期几和日期。 大家复制代码时,可能会因格式转换出现错乱,导致样式失效。建议先少量复制代码进行测试,若未能解决问题,私信我,我会发送完整的压缩包
HTML&CSS :惊艳!文本放大镜
这段代码是一个HTML页面,它包含CSS样式,用于创建一个带有动态遮罩效果的文本动画。文本“Hardy”会通过一个圆形遮罩逐渐模糊和清晰,形成一种动态的视觉效果。 大家复制代码时,可能会因格式转换出现
下一页