```
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html {
height: 100%;
}
body {
background: #6FA5F6;
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.password {
width: 350px;
height: 75px;
background: #121727;
border-radius: 10px;
position: relative;
overflow: hidden;
-webkit-box-shadow: 0 0 12px 0px rgba(1, 1, 1, 0.25);
box-shadow: 0 0 12px 0px rgba(1, 1, 1, 0.25);
}
.password--background {
background: #FEFEFE;
position: absolute;
width: 150%;
height: 100%;
right: -50%;
top: 0;
-webkit-transition: .20s all ease-in-out;
transition: .20s all ease-in-out;
border-radius: 5px;
}
.password--visibleToggle {
position: absolute;
width: 50px;
height: 50px;
right: 10px;
top: 10px;
z-index: 1;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
}
.password--visibleToggle-eye {
width: 25px;
height: 25px;
position: absolute;
right: 25px;
top: 25px;
-webkit-perspective: 1000px;
perspective: 1000px;
overflow: hidden;
}
.password--visibleToggle-eye.close {
-webkit-transition: .4s all ease-in-out;
transition: .4s all ease-in-out;
}
.password--visibleToggle-eye.open {
-webkit-transition: .2s .2s all ease-out;
transition: .2s .2s all ease-out;
}
.password--visibleToggle-eye img {
width: 100%;
}
.password--lock {
width: 20px;
height: 20px;
fill: #111;
-webkit-transition: all .5s;
transition: all .5s;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
left: 25px;
}
.password--input {
background: none;
border: none;
color: #575DBF;
position: absolute;
width: 200px;
left: 60px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 18px;
letter-spacing: 2px;
-webkit-transition: all .5s;
transition: all .5s;
outline: none;
font-family: 'Open Sans Condensed', sans-serif;
-webkit-text-security: none;
}
.password--input:focus {
border-bottom: 1px solid;
}
.password--visibleToggle:checked~.password--background {
width: 50px;
height: 50px;
border-radius: 50%;
right: 12.5px;
top: 12.5px;
}
.password--visibleToggle:checked~.password--input {
-webkit-text-security: circle;
}
.password--visibleToggle:checked~.password--lock {
fill: #fff;
}
.password--visibleToggle:checked~.password--visibleToggle-eye.close {
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.password--visibleToggle:checked~.password--visibleToggle-eye.open {
opacity: 0;
}
</style>
</head>
<body>
<div class="password">
<input type="checkbox" class="password--visibleToggle" checked>
<div class="password--background"></div>
<div class="password--visibleToggle-eye open">
<img src="http://jq22.qiniudn.com/eye-open.png" />
</div>
<div class="password--visibleToggle-eye close">
<img src="http://jq22.qiniudn.com/eye-close.png" />
</div>
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 30.221 30.221" style="enable-background:new 0 0 30.221 30.221;" xml:space="preserve" class="password--lock">
<g>
<path d="M25.534,14.457h-1.529V9.361c0-2.541-0.965-4.871-2.555-6.572C19.864,1.09,17.602-0.006,15.11,0
c-2.494-0.006-4.756,1.09-6.34,2.789C7.179,4.49,6.214,6.82,6.214,9.361v5.096H4.683c-0.629,0-1.145,0.512-1.145,1.145v13.471
c0,0.637,0.516,1.148,1.145,1.148h20.852c0.635,0,1.148-0.512,1.148-1.148V15.602C26.683,14.969,26.169,14.457,25.534,14.457z
M10.436,9.361c0-1.465,0.559-2.766,1.42-3.686c0.867-0.922,2-1.453,3.254-1.453c1.252,0,2.385,0.531,3.25,1.453
c0.865,0.92,1.42,2.221,1.42,3.686v5.096h-9.344V9.361z" />
</g>
</svg>
<input type="text" class="password--input" value="madewithlove" />
</div>
</body>
</html>
```
- 笔记内容来源
- 你不知道的JavaScript上
- vue
- 环境搭建
- node和npm安装配置
- 安装vue-cli并初始化vue项目
- 安装配置elementUI
- vuex安装配置
- axios安装配置
- main.js
- vue基础入门
- vue-router介绍
- vuex
- vue 原理学习源码学习
- js正则处理v-bind和语法
- 双向绑定
- 虚拟dom
- mvvm和render函数
- vue工作项目笔记
- elementUI 表格分页多选记忆功能
- elementUI表格展开一行
- keepAlive
- vue整合ckeditor5
- this.$router.push 内打开新窗口
- java修改上传图片的权限
- 兼容ie11
- 生成二维码
- base64图片下载(兼容IE10)
- vue新手引导程序intro.js
- vue插件 devtools
- vue刷新当前页面
- vue 锚点导航
- axios
- axios与springmvc
- vue-cli 3搭建vue
- git
- git常用命令
- 正则表达式
- 实例demo
- 1
- 新手引导页
- 纯css3从左显示下划线动画导航菜单
- 纯css3从中间显示下划线动画导航菜单
- css显示密码
- 倒计时时钟
- 星星评分
- 按钮悬停效果
- 步骤条
- css动画按钮
- input标题获得焦点上移
- css图片放大
- css镜像导航栏
- js
- 通信
- for in 和 for of
- 前端安全问题
- Promise
- 掘金冴羽学习笔记
- 模拟call
- 模拟bind
- 闭包
- 1 作用域
- 2 执行上下文栈
- 3 变量对象
- 4 作用域链
- 5 this
- 面向对象
- 基础知识点
- 渲染机制
- 其他
- 判断是否为数组
- http
- css
- 基础知识
- css阴影