首页
AI Coding
NEW
沸点
课程
直播
活动
AI刷题
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
会员
登录
注册
CSS
前端Hardy
创建于2024-10-21
订阅专栏
分享有趣的CSS小案例
等 41 人订阅
共195篇文章
创建于2024-10-21
订阅专栏
默认顺序
默认顺序
最早发布
最新发布
HTML&CSS:开启图片轮播的创意视觉密境
这个页面的设计是一个简单的图片轮播效果,适合用作网页的背景或者展示多个图片的场景 效果演示 HTML section full-height over-hide:这是最外层的容器,设置了全屏高度和隐藏
HTML & CSS:手把手教你实现骨架屏效果
效果演示 这个 HTML 和 CSS 代码创建了一个模拟加载效果的卡片,包含一个主加载条和两个辅助的加载条,用来模拟数据加载的过程。(骨架屏: 在需要等待加载内容的位置设置一个骨架屏,某些场景下比 L
HTML&CSS:熊猫与鼠标的眼神密语
这个 HTML 和 CSS 代码创建了一个具有动画效果的熊猫形象,它的眼睛会随着鼠标的移动而转动。 一键复制 container:作为最外层容器,用于包含熊猫形象。设置了宽度、高度、背景渐变色、边框半
HTML&CSS:卡片时钟数字动画,赶快体验一下吧!
这个 HTML 和 CSS 代码创建了一个卡片时钟的数字显示效果,使用了一个简单的数字动画来显示当前的时、分、秒。 一键复制 container:作为最外层容器,用于包含所有时钟的数字显示。使用 tr
HTML & CSS 魔法秀:打造翻转卡片登录注册页面
这段 HTML 和 CSS 代码创建了一个具有翻转卡片效果的登录和注册页面。下面是对重点标签和 CSS 样式的解释和总结: 一键复制 box:作为整个页面的容器,居中显示。 container:包含两
HTML&CSS&JS:超级酷炫丝滑的登录注册页面,赶快收藏吧
这段代码通过 HTML、CSS 和 JavaScript 的结合,实现了一个具有动画效果的登录和注册表单。用户可以通过点击按钮在登录和注册表单之间切换,同时覆盖层会相应地显示和隐藏。 一键复制 HTM
HTML&CSS浪漫表白:女朋友说你不懂浪漫?让她试试这个
这段代码通过HTML、CSS和JavaScript的结合,实现了一个交互式的表白页面,包括动画效果和用户交互。 一键复制 HTML 标签说明 script:引入了 jQuery 库和自定义的 fire
HTML&CSS:人民币雨特效,震撼来袭!来财来财来财......
效果演示 这段 HTML 和 CSS 代码创建了一个简单的网页,其主要功能是模拟人民币图片像雨一样从页面顶部落下的效果。 一键复制 @import url('https://fonts.googlea
HTML&CSS:彩色灵动气泡效果
效果演示 这段代码是一个HTML文档,包含了内联的CSS样式,用于创建一个具有动画效果的网页背景,其中包含多个彩色浮动的气泡元素。 HTML container: 是一个容器元素,用于包裹所有的气泡元
HTML&CSS:MacBook Air 3D 动画跃然屏上
效果演示 这段代码是一个HTML文档,它包含了内联的CSS样式,通过CSS3的3D转换和动画功能,创建了一个模拟的MacBook Air笔记本电脑的3D动画效果,包括屏幕的开合、键盘的按压效果以及阴影
纯HTML&CSS实现3D旋转地球
效果演示 这段 HTML 和 CSS 代码创建了一个带有动画效果的星空背景,其中包含闪烁的星星和一个旋转的地球图案。 HTML section-banner: 这是最外层的容器,用于包含所有的星星和地
HTML&CSS:比赛记分卡
效果演示 这段 HTML 和 CSS 代码创建了一个卡片式的体育比赛信息展示组件,用于显示篮球比赛的两个队伍名称、比赛时间、比分以及一些装饰性的视觉元素。 HTML card: 这是整个卡片的容器。
HTML&CSS:数据卡片可以这样设计
效果演示 这段 HTML 和 CSS 代码创建了一个实时温度的数据卡片。它使用了 CSS 的渐变、阴影、模糊和动画效果来增强视觉效果。 HTML outer: 外层容器,用于包含整个温度计组件。 do
HTML&CSS:翻书加载效果
效果演示 这段 HTML 和 CSS 代码创建了一个简单的翻书加载效果 HTML loader: 一个容器,用于包含加载动画。 ul 和 li: 无序列表和列表项,用于布局加载动画中的各个部分。 sv
HTML&CSS:3D金字塔加载动画
效果演示 这段代码通过CSS3的3D变换和动画功能,创建了一个旋转的金字塔加载动画,每个侧面都有不同的颜色渐变,底部还有一个模糊的阴影效果,增加了视觉的立体感。 HTML pyramid-loader
HTML&CSS:3D立方体loading
效果演示 这段代码通过HTML和CSS创建了一个动态的3D立方体动画,每个立方体都在不同的路径上移动,形成了一个有趣的视觉效果。 HTML boxes:这是包含所有立方体(盒子)的容器。 box:每个
惊艳!具有立体感的蓝牙耳机
效果演示 这段HTML与CSS代码创建了一个具有立体感的蓝牙耳机效果 HTML card:这是整个卡片的容器。 lc cavity:这个类名为cavity的div可能代表卡片上的一个凹陷或特殊区域。
探索 HTML 和 CSS 实现的蜡烛火焰
效果演示 这段代码是一个模拟蜡烛火焰的HTML和CSS代码。它创建了一个具有动态效果的蜡烛火焰动画,包括火焰的摆动、伸缩和光晕的闪烁。 HTML holder:这是蜡烛的容器,用于包含蜡烛的所有元素。
探索 HTML 和 CSS 实现的模拟时钟
效果演示 这段代码是一个模拟时钟的 HTML 和 CSS 代码。它创建了一个简单的数字时钟界面,包括时针、分针和秒针。 HTML face:这是时钟的主体部分,包含了时钟的所有元素。 v-index和
HTML&CSS 打造的酷炫菜单选项卡
效果演示 具有视觉吸引力的菜单选项 HTML card:最外层的容器,用于包裹整个卡片。 ul:无序列表,用于垂直排列列表项。 iso-pro:列表项,每个列表项代表一个社交媒体图标。 span:用于
下一页