技术栈
若冰说css
若冰说
9 个月前
前端
·
javascript
·
css
·
若冰说css
HTML+CSS+JS:轮播组件
一个具有动画效果的卡片元素和一个注册表单,背景为渐变色,整体布局简洁美观。
若冰说
9 个月前
前端
·
css
·
若冰说css
旋转齿轮加载
实现了一个旋转齿轮的动画效果。具体来说,页面背景为深灰色,中间有一个齿轮装置,包括四个齿轮。每个齿轮都有内部的齿轮条,整体呈现出旋转的效果。其中,齿轮2是顺时针旋转的,齿轮1、3、4是逆时针旋转的。整体效果是四个齿轮交错旋转,形成一个动态的机械装置效果。
若冰说
9 个月前
前端
·
css
·
若冰说css
HTML+CSS:动态搜索框
这段代码实现了一个简单的搜索栏效果。页面背景为从天蓝色到深蓝色的渐变色,搜索栏包括一个圆形背景的搜索图标和一个输入框。当用户点击搜索图标时,输入框会从搜索图标的位置滑出,显示一个输入框和一个清除按钮。用户可以在输入框中输入搜索内容,点击右侧的按钮进行搜索。整体布局居中显示在页面上。
若冰说
9 个月前
前端
·
javascript
·
css
·
若冰说css
HTML+CSS+JS:花瓣登录组件
实现了一个具有动态花朵背景和简洁登录框的登录页面效果。
若冰说
10 个月前
前端
·
css
·
若冰说css
HTML+CSS:全景轮播
实现了一个简单的网页布局,其中包含了五个不同的盒子,每个盒子都有一个不同的背景图片,并且它们之间有一些间距。当鼠标悬停在某个盒子上时,它的背景图片会变暗,并且文字会变成白色。这些盒子和按钮都被放在一个容器中,整个页面看起来像一个画廊。
若冰说
10 个月前
前端
·
css
·
若冰说css
HTML+CSS:导航栏组件
实现了一个导航栏的动画效果,当用户点击导航栏中的某个选项时,对应的选项卡会向左平移,同时一个小圆圈会出现在选项卡的中心,表示当前选项卡的位置。这个效果可以让用户更加清晰地了解当前页面的位置和内容。
若冰说
10 个月前
前端
·
css
·
若冰说css
无际线复选框
实现了一个网格布局,其中每个网格是一个复选框,可以选择是否显示。每个复选框都有一个漂浮的天花板,表示它是一个房间的天花板。每个房间的天花板都有一个不同的形状和颜色,分别对应不同的房间。整个页面的背景是一个由两种颜色组成的渐变背景,其中一种颜色在页面顶部,另一种颜色在页面底部。整个页面的布局非常简洁,适合用于显示房间的天花板和选择是否显示。
若冰说
10 个月前
前端
·
css
·
若冰说css
HTML+CSS:3D轮播卡片
实现了一个3D翻转的卡片动画,其中每个卡片都有不同的图片和不同的旋转角度。整个动画循环播放,无限次。整个页面的背景是一个占据整个屏幕的背景图片,并且页面内容被隐藏在背景图片之下。
若冰说
10 个月前
前端
·
css
·
若冰说css
HTML+CSS:飞翔按钮
实现了一个按钮的动画效果,当鼠标悬停在按钮上时,按钮的背景颜色和图标会发生变化,并且图标会旋转45度并向右移动1.2em,同时按钮中的文字也会向右移动5em。当鼠标点击按钮时,按钮会变小并向下移动0.1em。整个效果看起来像是按钮在飞翔或跳跃。
若冰说
10 个月前
前端
·
css
·
若冰说css
32 登录页组件
实现了一个登录页面的样式,包括一个容器、左侧和右侧部分。左侧部分是一个背景图片,右侧部分是一个表单,包括输入框、复选框、按钮和忘记密码链接。整个页面的背景色为白色,容器为一个圆角矩形,表单为一个半透明的背景色,输入框和按钮为白色,边框为1像素的灰色。当鼠标悬停在输入框上时,输入框的边框变为红色。当点击按钮时,按钮的背景色变为蓝色。忘记密码链接为蓝色。整个页面的布局为左右布局,左侧占66%,右侧占34%。
若冰说
10 个月前
前端
·
css
·
若冰说css
31 3D日历组件
实现了一个3D文字旋转的效果,当鼠标悬停在容器上时,最后一个文字会旋转630度,而其他文字会逐渐旋转到水平面上方。
若冰说
10 个月前
前端
·
css
·
若冰说css
29 旋转工具箱
实现了一个菜单按钮的动画效果,当鼠标悬停在菜单按钮上时,菜单按钮会旋转315度,菜单按钮旋转的同时,菜单按钮旋转的8个小圆圈也会依次旋转360度,并且每个小圆圈的旋转方向和菜单按钮的旋转方向相反,当鼠标悬停在某个小圆圈上时,该小圆圈的旋转方向会变为顺时针旋转360度。整个效果看起来像是一只小鸟在飞翔,菜单按钮像是它的翅膀,菜单按钮旋转的同时,小圆圈也在飞翔。此外,这段代码还定义了一些自定义的图标,并使用了阿里巴巴的图标库。
若冰说
10 个月前
前端
·
css
·
若冰说css
弹跳小球加载
实现了一个加载动画,可以用来显示页面正在加载中的状态。具体来说,它使用了CSS的动画和变换来实现一个弹跳的圆圈和一个向右移动的线条。当页面加载完成后,这个动画会自动消失。
若冰说
10 个月前
前端
·
css
·
若冰说css
26 数字验证
实现了一个简单的数字密码输入表单,用户需要输入一个4位数字密码来验证身份。表单包含一个标题、描述、输入字段、两个按钮和一个关闭按钮。输入字段是一个4位数字密码,用户需要在每个输入框中输入数字来输入密码。两个按钮分别是“验证”和“清除”,用户可以点击这两个按钮来进行验证和清除操作。关闭按钮用于关闭表单。整个表单的样式和布局都比较简洁明了,适合在需要输入密码的场景中使用。
若冰说
10 个月前
前端
·
css
·
若冰说css
25 心形按钮
实现了一个心形的心形图案,当用户点击图案时,图案会旋转并缩小,同时背景颜色会变成白色。这段代码设置了页面的基本样式,包括高度、布局、对齐方式和背景颜色。