若冰说CSS
文章平均质量分 73
若冰说
源码 | 笔记 | 资料 | 知识解答 |
公众号:XiaoSaurus
展开
-
HTML+CSS 动态卡片
实现了一个带有动态背景和图片放大效果的卡片展示。卡片的背景是由两种颜色交替组成的斜线条纹,同时背景会以一定速度循环滚动。当鼠标悬停在卡片上时,卡片的图片会放大,并且卡片的背景会变为彩色。原创 2024-06-14 09:00:00 · 527 阅读 · 0 评论 -
HTML+CSS+JS 自定义下拉菜单
实现了一个下拉菜单的动画效果,包括一个主按钮和一个下拉菜单列表。点击主按钮会展开下拉菜单列表,同时箭头会旋转,列表项会逐渐显示出来。鼠标悬停在列表上时,会出现一个浮动图标。整个下拉菜单的样式比较简洁,使用了黑色和灰色的背景色,以及白色和淡灰色的文字和图标颜色。动画效果使用了 CSS 的过渡和变换属性。原创 2024-06-13 09:00:00 · 767 阅读 · 0 评论 -
HTML+CSS 多彩球体加载器
实现了一个加载动画的效果,包括多个圆形元素和动画效果。每个圆形元素都有一个白色的边框和一个浅灰色的背景色,同时还有一个绿色的填充色。当动画开始时,每个圆形元素的填充色会逐渐变为不同的颜色,同时产生一个闪烁的效果。整个动画的样式采用了阴影、边框、圆角等元素,使得动画看起来更加美观。原创 2024-06-12 08:45:00 · 1274 阅读 · 0 评论 -
HTML+CSS 交互式开关按钮
实现了一个交互式开关按钮的效果,包括一个标签和两个选项(Yes和No),当用户点击其中一个选项时,按钮会发生动画效果,同时选中的选项会被高亮显示。整个按钮的样式采用了渐变背景色、圆角边框、阴影等元素,使得按钮看起来更加美观。原创 2024-06-11 02:51:38 · 624 阅读 · 0 评论 -
HTML+CSS+JS 密码灯登录表单
实现了一个登录页面,包括一个标题、两个输入框(用户名和密码)、一个登录按钮和一个眼睛图标。点击眼睛图标可以显示或隐藏密码。页面背景有两个圆形的半透明元素,整个页面使用了flex布局,并且在水平和垂直方向上都居中对齐。登录框使用了阴影效果和圆角边框,并且在水平和垂直方向上都居中对齐。输入框和登录按钮都使用了圆角边框,并且在水平方向上居中对齐。在输入框中输入密码时,可以点击眼睛图标来显示或隐藏密码。同时,当点击眼睛图标时,页面背景会变成黑色,登录框的样式也会有所变化。原创 2024-06-09 09:45:00 · 719 阅读 · 0 评论 -
HTML+CSS+JS 动态展开式菜单
实现了一个可展开菜单按钮的效果,点击按钮会弹出一个菜单列表,菜单列表中包含多个选项。按钮的样式为一个圆形背景,中间有三条横线,表示可以展开。当按钮被点击后,三条横线会变成一个叉号,表示可以收起。菜单列表的样式为一个白色背景,四周有阴影,包含多个选项,每个选项都有一个图标和文字。当菜单展开时,选项会以渐变的方式出现。原创 2024-06-07 08:00:00 · 1098 阅读 · 0 评论 -
HTML+CSS 图片轮播卡片
实现了一个图片轮播卡片的效果,包括一个容器(.container)、一个卡片(.card)、一个图片(.img)、一个内容区域(.content)和一个滑动条(.slider)。卡片包含一张图片和一些文本内容,图片可以通过滑动条进行切换。整个卡片具有圆角和阴影效果,使其看起来更加美观。原创 2024-06-06 07:15:00 · 548 阅读 · 0 评论 -
HTML+CSS+JS 动态登录表单
HTML+CSS+JS 动态登录表单原创 2024-06-05 22:15:03 · 873 阅读 · 0 评论 -
HTML+CSS+JS 选项卡导航栏
实现了一个导航栏切换内容的效果。页面上方有一个导航栏,每个导航项都有一个圆形背景,点击导航项时,圆形背景会放大并显示对应的内容。每个内容区域都包含一个大号字母,数字会在内容区域显示时淡入。点击其他导航项时,当前内容区域会淡出并隐藏,同时新的内容区域会淡入并显示。原创 2024-06-04 08:00:00 · 654 阅读 · 0 评论 -
HTML+CSS+JS 倒计时动画效果
实现了一个倒计时动画效果,包括数字区域和倒计时结束区域。数字区域显示倒计时数字,数字进入时有动画效果,数字离开时也有动画效果。倒计时结束后,数字区域隐藏,倒计时结束区域显示,显示时也有动画效果。用户可以点击重新开始按钮重新开始倒计时。原创 2024-06-03 23:53:08 · 426 阅读 · 0 评论 -
HTML+CSS 文本动画卡片
实现了一个图片叠加文本动画效果的卡片(Card)布局。当鼠标悬停在卡片上时,卡片上的图片会变为半透明,同时显示隐藏在图片上的文本内容,并且文本内容有一个从左到右的渐显动画效果,伴随着一个白色渐变背景的动画效果。原创 2024-06-02 23:53:03 · 316 阅读 · 0 评论 -
HTML+CSS+JS 熊猫登录表单
实现了一个可爱的熊猫登录界面,页面背景使用了渐变色,熊猫的头部和身体使用了圆形和椭圆形的边框,使用了CSS的伪元素和阴影效果来实现熊猫的手和脚。登录框使用了flex布局,包括用户名和密码的输入框和登录按钮,使用了CSS的过渡效果和伪类来实现输入框的动态效果。整个页面使用了响应式布局,可以适应不同大小的屏幕。原创 2024-06-01 12:49:15 · 782 阅读 · 0 评论 -
HTML+CSS 响应式侧边栏菜单
实现了一个响应式的侧边栏菜单,当用户点击菜单按钮时,菜单会从左侧滑出,同时页面内容会向右移动,展示菜单选项。菜单选项包括一个头像和用户名,以及其他的菜单项,当用户将鼠标悬停在菜单项上时,菜单项会高亮显示。这段代码使用了CSS的flex布局和过渡效果,以及JavaScript的事件监听来实现菜单的响应式效果。原创 2024-05-31 21:55:05 · 809 阅读 · 0 评论 -
HTML+CSS 爱心跳动加载
实现了一个跳动的心形动画效果,通过使用伪元素和动画实现了一个心形图案。心形由多个小圆点组成,每个小圆点都有不同的颜色和大小,通过动画让它们不断地跳动,形成了一个跳动的心形效果。背景使用了径向渐变,让整个效果更加美观。原创 2024-05-30 07:30:00 · 287 阅读 · 0 评论 -
HTML+CSS 圆形菜单
实现了一个圆形菜单的效果,点击菜单按钮后,菜单项会从菜单按钮中心点向外展开,并且菜单项上有文字链接。可以将这段代码的效果称为“圆形菜单展开效果”。原创 2024-05-29 09:15:00 · 1397 阅读 · 0 评论 -
HTML+CSS TAB导航栏
这段代码实现了一个名为"Tab导航栏"的效果,它是一个基于CSS的导航栏,包含五个选项卡,每个选项卡都有一个带有渐变背景色的滑块,当用户点击选项卡时,滑块会滑动到相应的位置。同时,选中的选项卡会变为白色,未选中的选项卡会变为灰色。原创 2024-05-28 23:55:39 · 688 阅读 · 0 评论 -
HTML+CSS 玻璃按钮
HTML+CSS 玻璃按钮原创 2024-05-26 07:45:00 · 209 阅读 · 0 评论 -
HTML+CSS 响应式导航栏
HTML+CSS 响应式导航栏原创 2024-05-25 09:45:00 · 228 阅读 · 0 评论 -
HTML+CSS+JS 扩散登录表单动画
扩散登录表单动画原创 2024-05-24 00:15:18 · 382 阅读 · 0 评论 -
HTML+CSS:花式加载
实现了一个动态加载文本效果,通过定义变量和应用动画效果来实现文本的动态展示。原创 2024-03-04 08:15:00 · 611 阅读 · 0 评论 -
HTML+CSS+JS:日夜交替
实现了一个简单的日夜交替效果的动画。页面中包含了太阳、月亮和海洋的元素,通过切换按钮可以切换页面的主题,从白天切换到黑夜,或者从黑夜切换到白天。原创 2024-03-03 23:58:57 · 680 阅读 · 0 评论 -
HTML+CSS:未来属于CSS
一个带有不同背景颜色的网格布局,其中一些元素可能会更大或者字体更大。原创 2024-02-29 07:45:00 · 1091 阅读 · 0 评论 -
HTML+CSS+JS:动态滑块组件
实现了一个简单的滑块效果,其中包括一个滑块(slider)和一个可以拖动的球(ball)。当用户拖动球时,球会在滑块内部左右移动,同时改变颜色。原创 2024-02-26 02:01:06 · 556 阅读 · 0 评论 -
HTML+CSS+JS:轮播组件
一个具有动画效果的卡片元素和一个注册表单,背景为渐变色,整体布局简洁美观。原创 2024-02-25 22:32:45 · 1396 阅读 · 2 评论 -
旋转齿轮加载
【代码】旋转齿轮加载。原创 2024-02-24 23:56:54 · 865 阅读 · 0 评论 -
HTML+CSS:动态搜索框
这段代码实现了一个简单的搜索栏效果。页面背景为从天蓝色到深蓝色的渐变色,搜索栏包括一个圆形背景的搜索图标和一个输入框。当用户点击搜索图标时,输入框会从搜索图标的位置滑出,显示一个输入框和一个清除按钮。用户可以在输入框中输入搜索内容,点击右侧的按钮进行搜索。整体布局居中显示在页面上。原创 2024-02-23 23:51:32 · 1924 阅读 · 4 评论 -
HTML+CSS+JS:微光波浪文本动画
实现了一个文字闪烁效果,通过使用CSS动画和渐变来创建波浪状的动态效果。具体来说,文字会在不同时间点进行变换,包括颜色、旋转、缩放和透明度等属性的变化,从而呈现出类似波浪的动态效果。这种效果通常用于吸引用户的注意力或为页面增添一些动感和视觉吸引力。原创 2024-02-22 07:45:00 · 572 阅读 · 0 评论 -
HTML+CSS+JS:花瓣登录组件
实现了一个具有动态花朵背景和简洁登录框的登录页面效果。原创 2024-02-21 07:45:00 · 2202 阅读 · 1 评论 -
HTML+CSS:发光滑块
一个具有光晕效果的自定义滑动条,可以根据滑动条的位置和数值的变化来改变滑块的样式和颜色。原创 2024-02-20 08:00:00 · 795 阅读 · 0 评论 -
HTML+CSS+JS:焦点轮播
实现了一个简单的图片展示和交互效果,用户可以点击不同的图片进行查看,并且会有视觉反馈。原创 2024-02-19 08:12:54 · 837 阅读 · 0 评论 -
HTML+CSS:滑动按钮
实现了一个单选按钮组,用户可以选择其中一个选项。当用户选择一个选项时,会出现一个选择框,选择框会从选项的上方滑入,并在选项上方显示一个白色的背景。当用户再次选择一个选项时,选择框会从选项的上方滑出,并在新的选项上方显示一个白色的背景。整个效果类似于 iOS 或 Android 系统中的单选按钮组。原创 2024-02-04 09:00:00 · 1199 阅读 · 0 评论 -
HTML+CSS:WIFI开关按钮
实现了一个按钮的切换效果,当用户点击按钮时,按钮会从一个颜色渐变到另一个颜色,同时按钮的边框和阴影效果也会发生变化。同时,按钮的图标也会从一个颜色渐变到另一个颜色。这个效果可以用来提醒用户进行操作,或者用来显示系统状态。原创 2024-02-03 23:41:32 · 663 阅读 · 0 评论 -
HTML+CSS:导航栏组件
实现了一个导航栏的动画效果,当用户点击导航栏中的某个选项时,对应的选项卡会向左平移,同时一个小圆圈会出现在选项卡的中心,表示当前选项卡的位置。这个效果可以让用户更加清晰地了解当前页面的位置和内容。原创 2024-02-01 09:00:00 · 1552 阅读 · 0 评论 -
HTML+CSS:3D卡片组件
实现了一个名为“卡片”的效果,当鼠标悬停在一个特定的元素上时,该元素会变得更亮,并且会在其他元素上方显示一个卡片。当鼠标悬停在卡片上时,卡片会变得更亮,并且会在其他元素上方显示一个提示信息。这个效果可以用来展示一些信息或者链接,让用户更好地了解和交互。原创 2024-01-30 09:00:00 · 979 阅读 · 0 评论 -
HTML+CSS:全景轮播
实现了一个简单的网页布局,其中包含了五个不同的盒子,每个盒子都有一个不同的背景图片,并且它们之间有一些间距。当鼠标悬停在某个盒子上时,它的背景图片会变暗,并且文字会变成白色。这些盒子和按钮都被放在一个容器中,整个页面看起来像一个画廊。原创 2024-01-29 09:00:00 · 3315 阅读 · 1 评论 -
无际线复选框
这段代码实现了一个网格布局,其中每个网格是一个复选框,可以选择是否显示。每个复选框都有一个漂浮的天花板,表示它是一个房间的天花板。每个房间的天花板都有一个不同的形状和颜色,分别对应不同的房间。整个页面的背景是一个由两种颜色组成的渐变背景,其中一种颜色在页面顶部,另一种颜色在页面底部。整个页面的布局非常简洁,适合用于显示房间的天花板和选择是否显示。原创 2024-01-27 23:58:39 · 1035 阅读 · 0 评论 -
HTML+CSS:王者翻转框
实现了一个3D翻转卡片的效果,当鼠标悬停在卡片上时,卡片会从正面朝向翻转,从而实现3D效果。其中,卡片的正面和背面分别由一个div元素表示,通过CSS的transform属性实现3D效果。当鼠标悬停在卡片上时,通过CSS的hover属性实现翻转效果。原创 2024-01-26 23:59:40 · 405 阅读 · 0 评论 -
HTML+CSS:炫酷按钮组件
实现了一个带有发光效果的按钮。按钮在悬停或激活时会产生发光效果,并且按钮上的文字也会随之移动。原创 2024-01-25 23:57:21 · 470 阅读 · 0 评论 -
HTML+CSS:炫酷登录切换
实现了一个登录注册页面的切换效果,当用户点击登录或注册按钮时,会出现一个叠加层,其中包含一个表单,用户可以在表单中输入用户名和密码,然后点击提交按钮进行登录或注册。当用户点击返回按钮时,会将叠加层隐藏,并将登录或注册表单显示在主体区域。这个效果可以提高用户体验,让用户更加方便地登录或注册。原创 2024-01-24 23:43:38 · 2123 阅读 · 7 评论 -
HTML+CSS:展开动画
实现了一个网页上的图标悬浮效果,当鼠标悬浮在图标上时,会出现一个带有文字的悬浮框,文字内容为“打开微信”、“打开抖音”、“打开WeGame”或“打开STEAM”,字体大小和颜色会随着鼠标移动而变化。当鼠标悬浮在图标上时,悬浮框的背景颜色会变成灰色。原创 2024-01-23 23:51:00 · 723 阅读 · 0 评论