首页
沸点
课程
数据标注
HOT
AI Coding
更多
直播
活动
APP
插件
直播
活动
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
登录
注册
CSS
前端Hardy
创建于2024-10-21
订阅专栏
分享有趣的CSS小案例
等 69 人订阅
共229篇文章
创建于2024-10-21
订阅专栏
默认顺序
默认顺序
最早发布
最新发布
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: 创
HTML&CSS :实时报警图标
这段代码创建了一个带有动态点动画的警报加载器,通过 CSS 技术实现了点的动态变化效果,为页面添加了视觉吸引力和动态感。 演示效果 HTML&CSS HTML 结构 loader: 创建一个类名为“l
HTML&CSS :必学!跳一跳小圆点加载loading
这段代码创建了一个动态的“跳一跳”加载动画,通过 CSS 技术实现了小圆点的移动和旋转效果,为页面添加了视觉吸引力和动态感。 演示效果 HTML&CSS HTML 结构 leap-frog: 创建一个
HTML&CSS :下雪了
这段代码创建了一个动态的雪花飘落加载动画,通过 CSS 技术实现了雪花的下落和消失效果,为页面添加了视觉吸引力和动态感。 演示效果 HTML&CSS HTML 结构 loader: 创建一个类名为“l
HTML&CSS :这么丝滑的加载loading你不学学?
这段代码创建了一个动态的旋转加载动画,通过 CSS 技术实现了小条的旋转和伸缩效果,为页面添加了视觉吸引力和动态感。 演示效果 HTML&CSS HTML 结构 spinner: 创建一个类名为“sp
HTML&CSS 秘籍:打造超实用按钮工具提示
这段代码创建了一个带有工具提示的按钮,通过 CSS 技术实现了工具提示的显示和隐藏效果,为页面添加了用户交互体验。 演示效果 HTML&CSS HTML 结构 tipbox: 创建一个类名为“tipb
HTML&CSS:必看!萌萌哒的太阳
这段代码创建了一个太阳笑脸的动画效果,通过 CSS 技术实现了光线的伸缩、笑脸的旋转和抖动效果,为页面添加了视觉吸引力和动态感。 演示效果 HTML&CSS HTML 结构 sunbox: 包含整个动
下一页