新增第176个小实例:输入框打字放大特效
This commit is contained in:
parent
fed1435caa
commit
3e161a19c9
|
@ -182,4 +182,5 @@
|
|||
172. HTML5+CSS3+Vue小实例:路飞出海的动画特效
|
||||
173. HTML5+CSS3+JS小实例:交互式图片鼠标悬停景深对焦效果
|
||||
174. HTML5+CSS3+JS小实例:简约的黑色分页
|
||||
175. HTML5+CSS3小实例:带功能区的图片悬停特效
|
||||
175. HTML5+CSS3小实例:带功能区的图片悬停特效
|
||||
176. HTML5+CSS3+Vue小实例:输入框打字放大特效
|
|
@ -0,0 +1,78 @@
|
|||
*{
|
||||
/* 初始化 */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body{
|
||||
/* 方便演示,满屏居中 */
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* 渐变背景 */
|
||||
background: linear-gradient(to bottom,#6a85b6,#bac8e0);
|
||||
/* 溢出隐藏 */
|
||||
overflow: hidden;
|
||||
}
|
||||
h1{
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
.input-box{
|
||||
position: relative;
|
||||
}
|
||||
.input-box input{
|
||||
/* 隐藏原生输入框 */
|
||||
opacity: 0;
|
||||
}
|
||||
.input-box label{
|
||||
min-width: 100%;
|
||||
min-height: 40px;
|
||||
background-color: #fff;
|
||||
/* 弹性布局 水平+垂直居中 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 4px;
|
||||
padding: 0 10px;
|
||||
cursor: text;
|
||||
/* 设置过渡 */
|
||||
transition: 0.2s;
|
||||
}
|
||||
.input-box input:focus ~ label{
|
||||
box-shadow: 0 5px 20px #6a85b6;
|
||||
}
|
||||
.input-box span{
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.input-animate{
|
||||
/* 打字动画:动画名 时长 加速后减速 */
|
||||
animation: print 0.2s ease-in-out;
|
||||
}
|
||||
.shake{
|
||||
/* 输入框颤动动画 */
|
||||
animation: shake 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
/* 定义动画 */
|
||||
/* 打字动画 */
|
||||
@keyframes print {
|
||||
0%{
|
||||
position: absolute;
|
||||
transform: scale(50);
|
||||
}
|
||||
99%{
|
||||
position: absolute;
|
||||
}
|
||||
100%{
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
/* 输入框颤动动画 */
|
||||
@keyframes shake {
|
||||
50%{
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
|
||||
<title>输入框打字放大特效</title>
|
||||
<link rel="stylesheet" href="176.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>输入框打字特效</h1>
|
||||
<div class="input-box">
|
||||
<input type="text" id="txtMessage" v-model="message">
|
||||
<label for="txtMessage">
|
||||
<span class="input-animate" v-for="m in message2">{{m}}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
<!-- 引入vue -->
|
||||
<script src="/js/vue.min.js"></script>
|
||||
<script src="176.js"></script>
|
|
@ -0,0 +1,28 @@
|
|||
new Vue({
|
||||
el: '.container',
|
||||
data: {
|
||||
message: ''
|
||||
},
|
||||
watch: {
|
||||
// 监听输入框的文字变化,来实现输入框的颤动效果
|
||||
message: {
|
||||
handler: function(newVal, oldVal){
|
||||
// 如果文字有变化
|
||||
if(newVal.length > oldVal.length){
|
||||
setTimeout(() => {
|
||||
document.querySelector('.input-box').classList.add('shake');
|
||||
setTimeout(() => {
|
||||
document.querySelector('.input-box').classList.remove('shake');
|
||||
}, 300);
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
message2: function(){
|
||||
// 把输入的内容拆分为单字
|
||||
return this.message.split('');
|
||||
}
|
||||
}
|
||||
})
|
Loading…
Reference in New Issue