首页
AI Coding
NEW
沸点
课程
直播
活动
AI刷题
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
会员
登录
注册
CSS
前端Hardy
创建于2024-10-21
订阅专栏
分享有趣的CSS小案例
等 41 人订阅
共195篇文章
创建于2024-10-21
订阅专栏
默认顺序
默认顺序
最早发布
最新发布
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”会通过一个圆形遮罩逐渐模糊和清晰,形成一种动态的视觉效果。 大家复制代码时,可能会因格式转换出现
HTML&CSS :惊爆!蚂蚁爬行秀
这段代码是一个HTML页面,它包含CSS样式,用于创建一个动态的蚂蚁爬行动画。蚂蚁在立方体的表面上爬行,形成一种有趣的视觉效果。 大家复制代码时,可能会因格式转换出现错乱,导致样式失效。建议先少量复制
HTML&CSS :哇塞!铅笔罐
这段代码创建了一个铅笔罐效果,通过CSS技术实现了铅笔的旋转和阴影效果,为页面添加了视觉吸引力和立体感。 大家复制代码时,可能会因格式转换出现错乱,导致样式失效。建议先少量复制代码进行测试,若未能解决
HTML&CSS :美爆了!这时钟也太好看了吧
这段代码创建了一个动态的闹钟动画效果,通过CSS技术实现了时针、分针和秒针的旋转效果,为页面添加了视觉吸引力和动态感。 大家复制代码时,可能会因格式转换出现错乱,导致样式失效。建议先少量复制代码进行测
HTML&CSS :必学!手把手教你画爱心
这段代码创建了一个动态的 SVG 动画,通过 SVG 技术实现了心形路径的绘制和手形图形的移动,为页面添加了视觉吸引力和动态感。 大家复制代码时,可能会因格式转换出现错乱,导致样式失效。建议先少量复制
HTML&CSS :惊爆!动态卡片,交互超绝
这段代码创建了一个具有动态背景效果的卡片,通过 CSS 技术实现了背景的放大和文字颜色的变化效果,为页面添加了视觉吸引力和用户交互体验。 大家复制代码时,可能会因格式转换出现错乱,导致样式失效。建议先
HTML&CSS :惊艳!日夜切换的神奇卡片
这段代码是一个 HTML 页面,它包含 CSS 样式和一个简单的开关(toggle)功能,用于在“白天”和“黑夜”模式之间切换。页面显示了一个带有时间、日期和天气信息的卡片,以及一个圆形的背景。 大家
HTML&CSS :必学!超实用打字练习神器
这段代码是一个 HTML 页面,它包含 CSS 样式和 JavaScript 脚本,用于创建一个简单的打字练习工具。用户可以在输入框中输入文本,页面会实时反馈用户的输入是否正确,并高亮显示正确的字符和
HTML&CSS :用DeepSeek打造会自动判胜的五子棋游戏
DeepSeek 代码生成:五子棋游戏 这段代码是一个 HTML 页面,它包含 CSS 样式和 JavaScript 脚本,用于创建一个简单的五子棋游戏。用户可以在棋盘上轮流放置黑白棋子,游戏会自动检
HTML&CSS :如此丝滑优雅的导航栏
这段代码创建了一个动态的导航栏,通过 CSS 技术实现了按钮的激活和悬停效果,以及动态背景效果,为页面添加了视觉吸引力和用户交互体验。 演示效果 HTML&CSS HTML 结构 body: 包含页面
HTML&CSS :惊艳!CSS 打造动感圆形图片展示,美到出圈
这段代码创建了一个动态的圆形图片展示效果,通过 CSS 技术实现了图片的旋转和动态布局,为页面添加了视觉吸引力和动态感。 演示效果 HTML&CSS HTML 结构 body: 包含页面的可见内容。
HTML&CSS :动态选项卡效果,交互体验拉满
这段代码创建了一个带有动态勾选效果的选项卡,通过CSS技术实现了复选框的动态效果和烟花效果,为页面添加了视觉吸引力和用户交互体验。 演示效果 HTML&CSS HTML 结构 checklist: 创
下一页