超强的纯 CSS 鼠标点击拖拽效果( 四 ) _生活百科

下图中，你看到的所有元素，都只是 g-content 呈现出来的元素，整个效果就是这样：

文章插图
是的，可能你会有所疑惑，下面我用简单不同颜色，标识不同不同的 DOM 结构，方便你去理解。

红色边框表示整个 g-container 的大小
用蓝色矩形表示设置了 g-resize 元素的大小
关掉 ::-webkit-resizer 的透明设置，展示出 resize 框的可拖拽 ICON

.g-container { border: 3px solid red;}.g-resize { content: ""; background: blue; resize: both; overflow: scroll;}.g-resize::-webkit-resizer { // background-color: transparent;}看看这个图，整个原理基本就比较清晰的浮现了出来：

文章插图
完整的原理代码，你可以戳这里：CodePen Demo -- Pure CSS Auto Drag Demo
实际应用OK，用了比较大篇幅对原理进行了描述。下面我们举一个实际的应用场景。使用上述技巧制作的可拖动便签贴。灵感来自 -- scottkellum 。
代码也不多，如果你了解了上面的内容，下面的代码将非常好理解：
<div class="g-container"> <div class="g-resize"></div> <div class="g-content"> Lorem ipsum dolor sit amet consectetur?</div></div>完整的 CSS 代码如下：
body { position: relative; padding: 10px; background: url("背景图"); background-size: cover;}.g-container { position: absolute; display: inline-block;}.g-resize { content: ""; position: relative; width: 20px; height: 20px; resize: both; overflow: scroll; z-index: 1;}.g-content { position: absolute; bottom: -160px; right: -180px; color: rgba(#000, 0.8); background-image: linear-gradient( 160deg, rgb(255, 222, 30) 50%, rgb(255, 250, 80) ); width: 200px; height: 180px; pointer-event: none; text-align: center; font-family: "marker felt", "comic sans ms", sans-serif; font-size: 24px; line-height: 1.3; padding: 1em; box-sizing: border-box; &:before { content: ""; position: absolute; width: 20px; height: 20px; top: 0; left: 0; border-radius: 50%; background-image: radial-gradient( at 60% 30%, #f99, red 20%, rgb(180, 8, 0) ); background-position: 20% 10%; cursor: pointer; pointer-events: none; transform: scale(0.8); box-shadow: -5px 10px 3px -8.5px #000, -1px 7px 12px -5px #000; transition: all 0.3s ease; transform: scale(0.8); }}.g-container:hover .g-content::before { transform: scale(0.9); box-shadow: -5px 10px 6px -8.5px #000, -1px 7px 16px -4px #000;}.g-resize::-webkit-resizer { background-color: transparent;}