前端
关注
分享
扫一扫
爱洋芋的土豆丶
愿做一颗树，一半在风中摇曳，一半在土里深藏。
展开
-
每日CSS小练习 人物资料卡(图片hover之后展现人物介绍)
效果如下： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...原创 2021-09-02 13:12:28 · 214 阅读 · 0 评论 -
HTML+CSS+JS实现网页初始加载动画（loading）
首先需要找一个loading的gif，在这里提供一个比较简单的加载动画然后是代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-w.原创 2021-08-15 22:43:56 · 1915 阅读 · 0 评论 -
HTML+CSS+JS实现响应式顶部导航栏
在Bootstrap的导航栏基础上做了修改，首先是使背景视频占满整个屏幕，然后初始状态时导航栏为透明色，当滚动条向下滚动一段高度后，导航栏不再透明且固定在页面顶部。因为使用的Bootstrap框架，所以导航栏是响应式的，会根据页面大小缩小为一个图标。下面的代码可以直接复制打开。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-原创 2021-08-15 22:17:07 · 2970 阅读 · 1 评论 -
HTML+CSS+JS实现返回顶部（BackToTop ）按钮
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.原创 2021-08-14 15:30:41 · 634 阅读 · 0 评论 -
CSS人物资料卡(蒙版效果)
初始时的效果： 鼠标移动资料卡上之后： <body> <div class="students"> <div class="student"> <div class="student_img"> <a href="#"><img src...原创 2021-07-23 09:42:45 · 370 阅读 · 0 评论