javascript - HTML5 动画创建虚线边框,在悬停时平滑地向内移动
问题描述
我正在制作一个拖放模块 - 并且需要它以便在拖动过程发生时 - 外部周围的虚线移入并且框变为特定颜色。我不希望虚线的外观发生变化。可以选择让虚线动画围绕框的边缘移动
.
- 现在它确保内容不会跳转 - 使其绝对定位,使其与边界变形断开连接?
- css3 如何使边界平滑地移入/移出?
https://jsfiddle.net/L47xrsnt/4/
html
<div class="drag-drop">
<div class="drag-drop-border">
<div class="contents">
xx
</div>
</div>
</div>
css
.drag-drop {
.drag-drop-border {
border: 2px dashed pink;
}
&:hover {
padding: 15px;
background: gold;
}
}
解决方案
您可以尝试如下:
.box {
height: 100px;
background: yellow;
position: relative;
}
.box::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 3px;
border: 2px dashed pink;
transition: 0.5s;
}
.box:hover::before {
margin: 10px;
}
<div class="box">
</div>
推荐阅读
- azure - Azure Key Vault access policies and Managed Identities (ARM templates)
- javascript - UseSelector 返回未定义
- postgresql - 在 postgres 中创建仅具有查看权限的用户
- python - lxml - 从输入文件向元素添加命名空间
- python - 从高斯拟合返回值
- python - 在 Python 中比较两个数据框的最经济的方法
- java - 问题格式化 XMLGregorianCalendar - IllegalArgumentException
- reactjs - Redux 问题:调度 redux 操作以加载或更新我的表时,我看到显示的旧数据集合附加新数据
- sql - 有没有办法在 Amazon Athena 上查询选择用户名?
- wiremock - 如何使用棱镜获取关于请求 url 的 json 响应?