首页
AI Coding
NEW
沸点
课程
直播
活动
AI刷题
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
会员
登录
注册
CSS
前端Hardy
创建于2024-10-21
订阅专栏
分享有趣的CSS小案例
等 45 人订阅
共206篇文章
创建于2024-10-21
订阅专栏
默认顺序
默认顺序
最早发布
最新发布
HTML&CSS:这个动态删除按钮打几分?
这段HTML和CSS代码创建了一个可交互的按钮,该按钮在鼠标悬停时会展开显示一个删除图标和文字标签 查看源码 演示效果 HTML&CSS HTML结构 button:这是一个按钮元素,用于触发点击事件
HTML&CSS:3D动态卡车
这个代码通过 CSS 的渐变、阴影、旋转、裁剪和动画等属性,创造了一个视觉上较为复杂的卡车图形。这些效果共同作用,使得卡车看起来更加立体和真实一键复制源码 演示效果 HTML&CSS HTML 结构
HTML&CSS:高颜值的个人资料卡片
这段代码通过 CSS 的过渡和变换属性,实现了一个具有动态效果的个人资料卡片,包括鼠标悬停时的动画效果。 演示效果 HTML&CSS card:这是个人资料卡片的容器。 cont:显示卡片的标题,例如
HTML&CSS:3D卡片翻转悬停效果
这段HTML、CSS代码定义了页面的背景、卡片的3D翻转效果、内容的布局和样式,以及伪元素的视觉效果。通过这些样式,可以实现一个在鼠标悬停时翻转显示另一面内容的3D卡片。 演示效果 HTML&CSS
HTML&CSS:领导说这个表单很不错,快来体验吧
这段代码是一个简单的HTML页面,它包含了一些CSS样式来美化两个输入框(用于用户名和密码) 演示效果 HTML&CSS container: 一个容器,用于居中显示输入框。设置容器的尺寸、背景颜色、
HTML&CSS:宇航员的星空漫游动画秀!快快收藏体验吧
这段 HTML 和 CSS 代码是一个简单的网页卡片设计,用于展示一个带有动画效果的宇航员卡片 演示效果 HTML&CSS card:一个类名为“card”的div元素,用于创建卡片布局。 image
HTML&CSS &JS:满屏喜欢你能否感动你?
这段代码是一个完整的 HTML 页面,包含了 HTML 结构、CSS 样式和 JavaScript 脚本。页面的主要功能是创建一个动态的文字墙效果,其中的文字会随机移动、变色。 演示效果 HTML&C
HTML&CSS :手把手教你实现属于自己的玫瑰花
这段代码通过 HTML 和 CSS 的结合,创建了一个动态的花朵效果,展示了 CSS 动画和定位的强大功能。 演示效果 HTML&CSS .flower 设置花朵的位置和布局。position: re
HTML&CSS 奇幻森林:小熊的甜蜜蛋糕派对大冒险
这个 HTML 页面包含了一个背景、多个下落的蛋糕图片和一个左右移动的loopy图片,实现了一个小熊吃蛋糕的效果 演示效果 HTML&CSS #back:定义了一个全屏的背景层,使用固定定位,背景颜色
HTML&CSS 创意工坊:卡片网格的鼠标魔法秀
这个HTML页面展示了一个包含SVG图标和文本的卡片网格。鼠标移入旋转放大的效果 演示效果 HTML&CSS .box:使用Flexbox布局,垂直和水平居中其子元素,高度设置为视口高度的100%。
HTML&CSS 创意工坊:雕琢个人博客的专属宝藏页面
这段HTML和CSS代码是一个个人博客页面的设计。 演示效果 HTML&CSS 一个欢迎区域(.welcome),包含一个标题和一段介绍性的文字。 文章列表(.articles),每个文章(.arti
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: 是一个容器元素,用于包裹所有的气泡元
下一页