1. 首頁 > 生活百科 > >

超強的純 CSS 鼠標點擊拖拽效果( 四 )

生活百科css


代碼也不多，如果你了解了上面的內容，下面的代碼將非常好理解：
<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;}我們通過上述的技巧，實現了一個僅僅使用 CSS 實現的自由拖拽的便簽貼 。我們可以自由的將其拖拽到任意地方 ?？纯葱Ч?br /> 當然，我們可以再配合上另外一個有意思是 HTML 屬性 -- contenteditable 。
contenteditable 是一個 HTML TAG 的屬性，表示元素是否可被用戶編輯 。如果可以，瀏覽器會修改元素的部件以允許編輯 。
簡單修改一下 DOM 結構：
<div class="g-container">    <div class="g-resize"></div>    <div class="g-content" contenteditable="true"> Lorem ipsum dolor sit amet consectetur?</div></div>此時 ， 元素不僅可以被拖動 ， 甚至可以被重寫，感受一下：

超強的純 CSS 鼠標點擊拖拽效果

推薦閱讀