Lucky0707-CSDN博客

原创 animate.css的使用

animate.css是一个CSS3动画库，它的里面预设了许多的常用动画。因为它把不同动画效果绑定到的是不同的类里面，所以我们想要使用的话，只需要先引用animate.css文件，再把你想要使用的那个类添加到元素上面就可以了。第一步：引入animate.css文件：（可使用：http://www.bootcdn.cn/animate.css/的服务）<head> <link rel="stylesheet" href="animate.min.css">&l

2021-10-24 14:27:57 4398

原创显示隐藏密码

在我们登录某个账号时，一般情况下都是需要输入密码的。在输入密码时，默认情况下都是以小黑点代替输入的密码，这样可以防止密码外泄。但是，有时候我们自己输入密码输到一般时，突然被打断了，再来输的时候已经忘记输到哪个了，又不想重新输入，这时便可以点击旁边的小眼睛可以快速看到自己已经输入过的密码，用户体验变得更好。效果：操作：首先使用html和css做出一个静态效果，代码如下：html部分： <div class="PwdBox"> <i...

2021-10-12 20:36:01 1208

原创倒计时

效果：源码：<!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-10-07 21:52:47 97

原创冒泡排序

冒泡排序原理：比较两个相邻的元素，将值大的元素交换到右边思路：原始数组：5、4、3、2、1第一轮比较（4次）：第1次比较因为5>4，所以5和4交换位置；第2次比较因为5>3，所以5和3交换位置；第3次比较因为5>2，所以5和2交换位置； ...

2021-10-07 21:29:08 110

原创旋转太极图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>太极图</title> <style> body { ba.

2021-09-26 16:39:09 184

原创旋转的风车

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>大风车</title> <style> #d1 { wid.

2021-09-26 16:34:19 89

原创 flex布局

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。flex主轴 flex-direction: row;flex侧轴 flex-direction: column;子集排列方式： /* 子集从左至右 */...

2021-09-21 13:41:23 58

m0_61685599的博客