* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.box1 {
position: relative;
width: 200px;
margin: 100px;
}
.box {
display: none;
position: absolute;
top: -40px;
width: 171px;
border: 1px solid black;
box-shadow: 0 2px 4px black; /* 阴影的制作 */
line-height: 20px;
font-size: 18px;
}
.box::before{
content: '';
width: 0;
height: 0;
position: absolute;
top: 20px;
left: 18px;
border: 8px solid black; /* 三角形的制作 */
border-color: #fff transparent transparent;
border-style: solid dashed dashed;
}
</style>
}`<body>
<div class="box1">
<div class="box"></div>
<input type="text" name="" id="">
</div>
<script>
var div =document.querySelector('.box')
var int =document.querySelector('input')
int.addEventListener('keyup',function(){ //每按一次按钮以后，就把表单的值给上面的盒子
if (int.value=='') {
div.style.display='none'
} else {
div.style.display='block';
div.innerText=int.value ;
}
})
</script>`
总结；重点一个是CSS阴影的的编写，怎么实现倒三角形，
JS利用键盘事件，表单的内容键盘按钮输入以后，自动把表单的值给上面的盒子
扫一扫
683
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
