- 博客(82)
- 收藏
- 关注
RSS订阅原创 HTML+CSS 彩色浮雕按钮
实现了一个彩色按钮特效，包括一个按钮（button）和一个前景色（::before）。按钮具有四种不同的颜色，当鼠标悬停在按钮上时，前景色会出现渐变效果，并且按钮的颜色、文本阴影和边框阴影会发生变化。整个按钮具有立体感，使其看起来更加美观。
2024-06-26 07:15:00
389
原创 HTML+CSS 3D旋转登录表单
实现了一个具有3D旋转效果的登录框，背景为太空图片，登录框位于太空中心，可以通过输入用户名和密码进行登录。登录框使用了CSS3的3D变换和动画效果，使其具有立体感和动态效果。同时，登录框的样式也经过精心设计，使用了半透明的背景、模糊效果、阴影等元素，使其看起来更加美观和现代化。
2024-06-25 07:15:00
735
原创 HTML+CSS 旋转呼吸加载器
实现了一个旋转加载动画效果，包括一个圆形的加载框和两个不同颜色的圆形旋转动画。加载框和动画都使用了CSS的动画属性，实现了旋转和缩放的效果。整个加载动画的样式比较简单，使用了黑色和黄色的背景色，以及白色的文本颜色。
2024-06-16 07:45:00
746
原创 HTML+CSS 动态卡片
实现了一个带有动态背景和图片放大效果的卡片展示。卡片的背景是由两种颜色交替组成的斜线条纹，同时背景会以一定速度循环滚动。当鼠标悬停在卡片上时，卡片的图片会放大，并且卡片的背景会变为彩色。
2024-06-14 09:00:00
1007
原创 HTML+CSS+JS 自定义下拉菜单
实现了一个下拉菜单的动画效果，包括一个主按钮和一个下拉菜单列表。点击主按钮会展开下拉菜单列表，同时箭头会旋转，列表项会逐渐显示出来。鼠标悬停在列表上时，会出现一个浮动图标。整个下拉菜单的样式比较简洁，使用了黑色和灰色的背景色，以及白色和淡灰色的文字和图标颜色。动画效果使用了 CSS 的过渡和变换属性。
2024-06-13 09:00:00
1557
原创 HTML+CSS 多彩球体加载器
实现了一个加载动画的效果，包括多个圆形元素和动画效果。每个圆形元素都有一个白色的边框和一个浅灰色的背景色，同时还有一个绿色的填充色。当动画开始时，每个圆形元素的填充色会逐渐变为不同的颜色，同时产生一个闪烁的效果。整个动画的样式采用了阴影、边框、圆角等元素，使得动画看起来更加美观。
2024-06-12 08:45:00
1314
原创 HTML+CSS 交互式开关按钮
实现了一个交互式开关按钮的效果，包括一个标签和两个选项（Yes和No），当用户点击其中一个选项时，按钮会发生动画效果，同时选中的选项会被高亮显示。整个按钮的样式采用了渐变背景色、圆角边框、阴影等元素，使得按钮看起来更加美观。
2024-06-11 02:51:38
912
原创 HTML+CSS+JS 密码灯登录表单
实现了一个登录页面，包括一个标题、两个输入框（用户名和密码）、一个登录按钮和一个眼睛图标。点击眼睛图标可以显示或隐藏密码。页面背景有两个圆形的半透明元素，整个页面使用了flex布局，并且在水平和垂直方向上都居中对齐。登录框使用了阴影效果和圆角边框，并且在水平和垂直方向上都居中对齐。输入框和登录按钮都使用了圆角边框，并且在水平方向上居中对齐。在输入框中输入密码时，可以点击眼睛图标来显示或隐藏密码。同时，当点击眼睛图标时，页面背景会变成黑色，登录框的样式也会有所变化。
2024-06-09 09:45:00
765
原创 HTML+CSS+JS 动态展开式菜单
实现了一个可展开菜单按钮的效果，点击按钮会弹出一个菜单列表，菜单列表中包含多个选项。按钮的样式为一个圆形背景，中间有三条横线，表示可以展开。当按钮被点击后，三条横线会变成一个叉号，表示可以收起。菜单列表的样式为一个白色背景，四周有阴影，包含多个选项，每个选项都有一个图标和文字。当菜单展开时，选项会以渐变的方式出现。
2024-06-07 08:00:00
1289
原创 HTML+CSS 图片轮播卡片
实现了一个图片轮播卡片的效果，包括一个容器（.container）、一个卡片（.card）、一个图片（.img）、一个内容区域（.content）和一个滑动条（.slider）。卡片包含一张图片和一些文本内容，图片可以通过滑动条进行切换。整个卡片具有圆角和阴影效果，使其看起来更加美观。
2024-06-06 07:15:00
633
原创 HTML+CSS+JS 选项卡导航栏
实现了一个导航栏切换内容的效果。页面上方有一个导航栏，每个导航项都有一个圆形背景，点击导航项时，圆形背景会放大并显示对应的内容。每个内容区域都包含一个大号字母，数字会在内容区域显示时淡入。点击其他导航项时，当前内容区域会淡出并隐藏，同时新的内容区域会淡入并显示。
2024-06-04 08:00:00
693
原创 HTML+CSS+JS 倒计时动画效果
实现了一个倒计时动画效果，包括数字区域和倒计时结束区域。数字区域显示倒计时数字，数字进入时有动画效果，数字离开时也有动画效果。倒计时结束后，数字区域隐藏，倒计时结束区域显示，显示时也有动画效果。用户可以点击重新开始按钮重新开始倒计时。
2024-06-03 23:53:08
599
原创 HTML+CSS 文本动画卡片
实现了一个图片叠加文本动画效果的卡片（Card）布局。当鼠标悬停在卡片上时，卡片上的图片会变为半透明，同时显示隐藏在图片上的文本内容，并且文本内容有一个从左到右的渐显动画效果，伴随着一个白色渐变背景的动画效果。
2024-06-02 23:53:03
374
原创 HTML+CSS+JS 熊猫登录表单
实现了一个可爱的熊猫登录界面，页面背景使用了渐变色，熊猫的头部和身体使用了圆形和椭圆形的边框，使用了CSS的伪元素和阴影效果来实现熊猫的手和脚。登录框使用了flex布局，包括用户名和密码的输入框和登录按钮，使用了CSS的过渡效果和伪类来实现输入框的动态效果。整个页面使用了响应式布局，可以适应不同大小的屏幕。
2024-06-01 12:49:15
835
原创 HTML+CSS 响应式侧边栏菜单
实现了一个响应式的侧边栏菜单，当用户点击菜单按钮时，菜单会从左侧滑出，同时页面内容会向右移动，展示菜单选项。菜单选项包括一个头像和用户名，以及其他的菜单项，当用户将鼠标悬停在菜单项上时，菜单项会高亮显示。这段代码使用了CSS的flex布局和过渡效果，以及JavaScript的事件监听来实现菜单的响应式效果。
2024-05-31 21:55:05
980
原创 HTML+CSS 爱心跳动加载
实现了一个跳动的心形动画效果，通过使用伪元素和动画实现了一个心形图案。心形由多个小圆点组成，每个小圆点都有不同的颜色和大小，通过动画让它们不断地跳动，形成了一个跳动的心形效果。背景使用了径向渐变，让整个效果更加美观。
2024-05-30 07:30:00
330
原创 HTML+CSS 圆形菜单
实现了一个圆形菜单的效果，点击菜单按钮后，菜单项会从菜单按钮中心点向外展开，并且菜单项上有文字链接。可以将这段代码的效果称为“圆形菜单展开效果”。
2024-05-29 09:15:00
1477
原创 HTML+CSS TAB导航栏
这段代码实现了一个名为"Tab导航栏"的效果，它是一个基于CSS的导航栏，包含五个选项卡，每个选项卡都有一个带有渐变背景色的滑块，当用户点击选项卡时，滑块会滑动到相应的位置。同时，选中的选项卡会变为白色，未选中的选项卡会变为灰色。
2024-05-28 23:55:39
783
原创 HTML+CSS+JS：日夜交替
实现了一个简单的日夜交替效果的动画。页面中包含了太阳、月亮和海洋的元素，通过切换按钮可以切换页面的主题，从白天切换到黑夜，或者从黑夜切换到白天。
2024-03-03 23:58:57
782
原创 HTML+CSS+JS：动态滑块组件
实现了一个简单的滑块效果，其中包括一个滑块（slider）和一个可以拖动的球（ball）。当用户拖动球时，球会在滑块内部左右移动，同时改变颜色。
2024-02-26 02:01:06
748
原创 HTML+CSS：动态搜索框
这段代码实现了一个简单的搜索栏效果。页面背景为从天蓝色到深蓝色的渐变色，搜索栏包括一个圆形背景的搜索图标和一个输入框。当用户点击搜索图标时，输入框会从搜索图标的位置滑出，显示一个输入框和一个清除按钮。用户可以在输入框中输入搜索内容，点击右侧的按钮进行搜索。整体布局居中显示在页面上。
2024-02-23 23:51:32
2253
5
原创 HTML+CSS+JS：微光波浪文本动画
实现了一个文字闪烁效果，通过使用CSS动画和渐变来创建波浪状的动态效果。具体来说，文字会在不同时间点进行变换，包括颜色、旋转、缩放和透明度等属性的变化，从而呈现出类似波浪的动态效果。这种效果通常用于吸引用户的注意力或为页面增添一些动感和视觉吸引力。
2024-02-22 07:45:00
740
原创 HTML+CSS：滑动按钮
实现了一个单选按钮组，用户可以选择其中一个选项。当用户选择一个选项时，会出现一个选择框，选择框会从选项的上方滑入，并在选项上方显示一个白色的背景。当用户再次选择一个选项时，选择框会从选项的上方滑出，并在新的选项上方显示一个白色的背景。整个效果类似于 iOS 或 Android 系统中的单选按钮组。
2024-02-04 09:00:00
1472
原创 HTML+CSS：WIFI开关按钮
实现了一个按钮的切换效果，当用户点击按钮时，按钮会从一个颜色渐变到另一个颜色，同时按钮的边框和阴影效果也会发生变化。同时，按钮的图标也会从一个颜色渐变到另一个颜色。这个效果可以用来提醒用户进行操作，或者用来显示系统状态。
2024-02-03 23:41:32
711
原创 HTML+CSS：导航栏组件
实现了一个导航栏的动画效果，当用户点击导航栏中的某个选项时，对应的选项卡会向左平移，同时一个小圆圈会出现在选项卡的中心，表示当前选项卡的位置。这个效果可以让用户更加清晰地了解当前页面的位置和内容。
2024-02-01 09:00:00
1670
1
原创 HTML+CSS：3D卡片组件
实现了一个名为“卡片”的效果，当鼠标悬停在一个特定的元素上时，该元素会变得更亮，并且会在其他元素上方显示一个卡片。当鼠标悬停在卡片上时，卡片会变得更亮，并且会在其他元素上方显示一个提示信息。这个效果可以用来展示一些信息或者链接，让用户更好地了解和交互。
2024-01-30 09:00:00
1138
原创 HTML+CSS：全景轮播
实现了一个简单的网页布局，其中包含了五个不同的盒子，每个盒子都有一个不同的背景图片，并且它们之间有一些间距。当鼠标悬停在某个盒子上时，它的背景图片会变暗，并且文字会变成白色。这些盒子和按钮都被放在一个容器中，整个页面看起来像一个画廊。
2024-01-29 09:00:00
3458
1
原创 无际线复选框
这段代码实现了一个网格布局，其中每个网格是一个复选框，可以选择是否显示。每个复选框都有一个漂浮的天花板，表示它是一个房间的天花板。每个房间的天花板都有一个不同的形状和颜色，分别对应不同的房间。整个页面的背景是一个由两种颜色组成的渐变背景，其中一种颜色在页面顶部，另一种颜色在页面底部。整个页面的布局非常简洁，适合用于显示房间的天花板和选择是否显示。
2024-01-27 23:58:39
1051
原创 HTML+CSS：王者翻转框
实现了一个3D翻转卡片的效果，当鼠标悬停在卡片上时，卡片会从正面朝向翻转，从而实现3D效果。其中，卡片的正面和背面分别由一个div元素表示，通过CSS的transform属性实现3D效果。当鼠标悬停在卡片上时，通过CSS的hover属性实现翻转效果。
2024-01-26 23:59:40
420
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人