목차
Background
효과를 따라가려면 마우스를 클릭하고 드래그하세요
使用 resize,构建可拖拽改变大小的元素
resize를 사용하여 드래그하여 크기를 변경할 수 있는 요소를 만듭니다
将 resize 应用到本文实例中
解决溢出被裁剪问题
实际应用
最后
웹 프론트엔드 CSS 튜토리얼 순수 CSS를 영리하게 사용하여 마우스 클릭 및 드래그 효과를 구현하여 상호 작용을 더욱 생생하게 만듭니다!

순수 CSS를 영리하게 사용하여 마우스 클릭 및 드래그 효과를 구현하여 상호 작용을 더욱 생생하게 만듭니다!

Nov 08, 2022 pm 08:08 PM
css

이 기사에서는 순수한 CSS를 사용하여 마우스 클릭 및 드래그 효과를 구현하여 상호 작용을 더욱 생생하게 만드는 방법을 소개합니다. 모든 사람에게 도움이 되기를 바랍니다.

순수 CSS를 영리하게 사용하여 마우스 클릭 및 드래그 효과를 구현하여 상호 작용을 더욱 생생하게 만듭니다!

Background

요소를 이동하려면 마우스를 드래그하세요. 이는 약간 복잡한 상호작용입니다.

이 기사에서는 규칙을 깨고 순수한 CSS를 사용하여 얻을 수 있는 매우 강력한 마우스 클릭 및 드래그 효과를 소개합니다. [추천 학습: css 비디오 튜토리얼]

이전 기사 - 믿을 수 없는 순수 CSS 마우스 팔로우에서 우리는 다음과 같이 많은 흥미로운 순수 CSS 마우스 팔로우 효과를 소개했습니다.

그러나 보시다시피 위의 효과에서는 요소의 움직임이 그다지 부드럽지 않습니다. 위의 구현을 이해한다면 비교적 큰 한계가 있다는 것을 알게 될 것입니다.

이 기사에서는 여전히 CSS만 사용하여 매끄럽고 부드러운 마우스 클릭 및 드래그 요소 이동 효과를 구현합니다.

효과를 따라가려면 마우스를 클릭하고 드래그하세요

알겠습니다. 무슨 뜻인가요? 먼저 요소를 클릭하고 요소를 끌어서 이동할 수 있는 효과를 얻기 위한 가장 간단한 회로도를 살펴보겠습니다.

자, 계속 읽기 전에 여기서 잠시 멈춰도 됩니다. 일반적으로 이 효과는 JavaScript의 도움을 받아 달성되어야 합니다. 성능 관점에서:

  • 먼저 요소를 드래그하면 요소를 임의로 이동할 수 있습니다

  • 그런 다음 요소를 배치하고 다른 위치에 그대로 두세요

생각해 보세요. 그렇지 않으면 JavaScript를 사용하면 요소 공을 A 지점에서 B 지점으로 이동할 수 있는 방법이 있나요? 이 효과는 순수 CSS가 얻을 수 있는 효과와 완전히 다릅니다.

대답은 '예'여야 합니다! 전체 프로세스도 매우 영리합니다. 여기서는 강력한 resize 속성을 ​​사용해야 합니다. 그리고 독창적인 레이아웃을 구축함으로써 발생할 수 있는 다양한 문제를 해결할 수 있습니다. resize 属性。以及,配合通过构建一种巧妙的布局,去解决可能会遇到的各种难题。

使用 resize,构建可拖拽改变大小的元素

首先,我们利用 resize 属性来实现一个可改变大小的元素。

什么是 resize 呢?根据 MDN -- resize:该 CSS 属性允许你控制一个元素的可调整大小性。

其 CSS 语法如下所示:

{
/* Keyword values */
  resize: none;
  resize: both;
  resize: horizontal;
  resize: vertical;
  resize: block;
  resize: inline;
}
로그인 후 복사

简单解释一下:

  • resize: none:元素不能被用户缩放
  • resize: both:允许用户在水平和垂直方向上调整元素的大小
  • resize: horizontal:允许用户在水平方向上调整元素的大小
  • resize: vertical:允许用户在垂直方向上调整元素的大小
  • resize: block:根据书写模式(writing-mode)和方向值(direction),元素显示允许用户在块方向上(block)水平或垂直调整元素大小的机制。
  • resize: inline:根据书写模式(writing-mode)和方向值(direction),元素显示一种机制,允许用户在内联方向上(inline)水平方向或垂直方向调整元素的大小。

看一个最简单的 DEMO:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aut qui labore rerum placeat similique hic consequatur tempore doloribus aliquid alias, nobis voluptates. Perferendis, voluptate placeat esse soluta deleniti id!</p>
로그인 후 복사
p {
    width: 200px;
    height: 200px;
    resize: horizontal;
    overflow: scroll;
}
로그인 후 복사

这里,我们设置了一个长宽为 200px<p></p>

resize를 사용하여 드래그하여 크기를 변경할 수 있는 요소를 만듭니다

먼저 크기 조정을 사용합니다. code> 속성을 ​​사용하여 크기 조정 가능한 A 요소를 구현합니다. <p></p> 크기 조정이란 무엇인가요? MDN -- resize🎜에 따르면: 이 CSS 속성을 사용하면 크기 조정을 제어할 수 있습니다. 요소의 크기 조정. 🎜🎜CSS 구문은 다음과 같습니다: 🎜
<div></div>
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
🎜간단한 설명: 🎜
    🎜resize: none: 요소는 사용자가 크기를 조정할 수 없습니다🎜🎜resize: 둘 다 code>: 사용자가 요소의 크기를 가로 및 세로로 조정할 수 있도록 허용🎜🎜resize: 가로: 사용자가 요소의 크기를 가로로 조정할 수 있도록 허용🎜🎜resize: 세로: 사용자가 세로로 요소의 크기를 조정할 수 있음 방향🎜🎜resize: block: 쓰기 모드(writing-mode)와 방향 값(direction)에 따라 요소 표시를 통해 사용자는 블록 방향(block)에서 가로 또는 세로로 크기를 조정할 수 있습니다. 요소의 크기를 조정하는 메커니즘입니다. 🎜🎜resize: inline: 쓰기 모드(writing-mode)와 방향 값(direction)에 따라 요소는 사용자가 인라인 방향( 인라인) 요소의 크기입니다. 🎜🎜🎜가장 간단한 데모를 보세요: 🎜
.g-resize {
    width: 100px;
    height: 100px;
    border: 1px solid deeppink;
}
로그인 후 복사
로그인 후 복사
.g-resize {
    width: 100px;
    height: 100px;
    border: 1px solid deeppink;
    resize: both;
    overflow: scroll;
}
로그인 후 복사
로그인 후 복사
🎜여기서 가로로 드래그할 수 있도록 길이와 너비가 200px<p></p>를 설정했습니다. 너비를 변경하십시오. 효과는 다음과 같습니다: 🎜🎜🎜🎜🎜몇 가지 팁에 대한 간략한 요약: 🎜
  • resize 的生效,需要配合 overflow: scroll,当然,准确的说法是,overflow 不是 visible,或者可以直接作用于替换元素譬如图像、<video></video><iframe></iframe><textarea></textarea>
  • 我们可以通过 resizehorizontalverticalboth 来设置横向拖动、纵向拖动、横向纵向皆可拖动。
  • 可以配合容器的 max-widthmin-widthmax-heightmin-height 限制可拖拽改变的一个范围

这里,如果你的对 resize 还有所疑惑,或者想了解更多 resize 的有趣用法,可以看看我的这篇文章:CSS 奇思妙想 | 使用 resize 实现强大的图片拖拽切换预览功能

将 resize 应用到本文实例中

OK,接下来,我们将 resize 实际运用到我们本文的例子中去,首先,我们先简单实现一个 DIV:

<div></div>
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
.g-resize {
    width: 100px;
    height: 100px;
    border: 1px solid deeppink;
}
로그인 후 복사
로그인 후 복사

如下,非常普通,没有什么特别的:

但是,通过给这个元素加上 resize: both 以及 overflow: scroll,此时,这个元素的大小就通过元素右下角的 ICON 进行拖动改变。

简单修改下我们的 CSS 代码:

.g-resize {
    width: 100px;
    height: 100px;
    border: 1px solid deeppink;
    resize: both;
    overflow: scroll;
}
로그인 후 복사
로그인 후 복사

这样,我们就得到了一个灵活可以拖动的元素:

是的,我们的整个效果,就需要借助这个特性进行实现。

在此基础上,我们可以尝试将一个元素定位到上面这个可拖动放大缩小的元素的右下角,看着能不能实现上述的效果。

简单加一点代码:

<div></div>
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
.g-resize {
    position: relative;
    width: 20px;
    height: 20px;
    resize: both;
    overflow: scroll;
}
.g-resize::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: deeppink;
}
로그인 후 복사

我们利用元素的伪元素实现了一个小球,放置在容器的右下角看看效果:

如果我们再把整个设置了 resize: both 的边框隐藏呢?那么效果就会是这样:

Wow,整个效果已经非常的接近了!只是,认真看的话,能够看到一些瑕疵,就是还是能够看到设置了 resize 的元素的这个 ICON:

这个也好解决,在 Chrome 中,我们可以通过另外一个伪元素 ::-webkit-resizer ,设置这个 ICON 的隐藏。

根据 MDN - ::-webkit-resizer,它属于整体的滚动条伪类样式家族中的一员。

其中 ::-webkit-resizer 可以控制出现在某些元素底角的可拖动调整大小的滑块的样式。

所以,这里我就利用这个伪类:

.g-resize {
    position: relative;
    width: 20px;
    height: 20px;
    resize: both;
    overflow: scroll;
}
.g-resize::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: deeppink;
}
.g-resize::-webkit-resizer {
    background-color: transparent;
}
로그인 후 복사

这样,这里的核心在于利用了 .g-resize::-webkit-resizer 中的 background-color: transparent,将滑块的颜色设置为了透明色。我们就得到了与文章一开始,一模一样的效果:

解决溢出被裁剪问题

当然,这里有个很致命的问题,如果需要移动的内容,远比设置了 resize 的容器要大,或者其初始位置不在该容器内,超出了的部分因为设置了 overflow: scroll,将无法看到。

因此上述方案存在比较大的缺陷。

举个例子,假设我们需要被拖动的元素不再是一个有这样一个简单的结构:

<div></div>
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
.g-content {
    width: 100px;
    height: 100px;
    background: black;
    pointer-event: none;
    
    &::before {
        content: "";
        position: absolute;
        width: 20px;
        height: 20px;
        background: yellow;
        border-radius: 50%;    
}
로그인 후 복사

而像是这样,是一个更为复杂的布局内容展示(当然下面展示的也比较简单,实际中可以想象成任意复杂结构内容):

如果将这个结构,扔到上面的 g-resize 中:

    <div></div>
로그인 후 복사

那么就会因为设置了 overflow: scroll 的原因,将完全看不到,只剩下一小块:

为了解决这个问题,我们得修改原本的 DOM 结构,另辟蹊径。

方法有很多,譬如可以利用 Grid  布局的一些特性。当然,这里我们只需要巧妙的加多一层,就可以完全解决这个问题。

我们来实现这样一个布局:

    <div></div>     <div></div>
로그인 후 복사

解释一下上述代码,其中:

  • g-container 设置为绝对定位加上 display: inline-block,这样其盒子大小就可以由内部正常流式布局盒子的大小撑开

  • g-resize 设置为 position: relative 并且设置 resize,负责提供一个可拖动大小元素,在这个元素的变化过程中,就能动态改变父容器的高宽

  • g-content 实际内容盒子,通过 position: absolute 定位到容器的右下角即可

看看完整的 CSS 代码:

.g-container {
    position: absolute;
    display: inline-block;
}
.g-resize { 
    content: "";
    position: relative;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    resize: both;
    overflow: scroll;
    z-index: 1;
}
.g-content {
    position: absolute;
    bottom: -80px;
    right: -80px;
    width: 100px;
    height: 100px;
    background: black;
    pointer-event: none;
    
    &::before {
        content: "";
        position: absolute;
        width: 20px;
        height: 20px;
        background: yellow;
        border-radius: 50%;
        transition: .3s;
    }
}
.g-container:hover .g-content::before {
    transform: scale(1.1);
    box-shadow: -2px 2px 4px -4px #333, -4px 4px 8px -4px #333;
}
.g-resize::-webkit-resizer {
    background-color: transparent;
}
로그인 후 복사

下图中,你看到的所有元素,都只是 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></div>     
 Lorem ipsum dolor sit amet consectetur?
로그인 후 복사
로그인 후 복사

完整的 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 实现的自由拖拽的便签贴。我们可以自由的将其拖拽到任意地方。看看效果:

순수 CSS를 영리하게 사용하여 마우스 클릭 및 드래그 효과를 구현하여 상호 작용을 더욱 생생하게 만듭니다!

当然,我们可以再配合上另外一个有意思是 HTML 属性 -- contenteditable

contenteditable 是一个 HTML TAG 的属性,表示元素是否可被用户编辑。如果可以,浏览器会修改元素的部件以允许编辑。

简单修改一下 DOM 结构:

    <div></div>     
 Lorem ipsum dolor sit amet consectetur?
로그인 후 복사
로그인 후 복사

此时,元素不仅可以被拖动,甚至可以被重写,感受一下:

纯 CSS 实现的效果,非常的有意思,完整的代码,你可以戳这里:Pure CSS Auto Drag Demo

最后

基于 resize 这个 CSS 属性,其实还有很多有意思的用法。譬如我之前使用了 Resize 实现了一个图片切换预览的功能:CSS 奇思妙想 | 使用 resize 实现强大的图片拖拽切换预览功能 可以一并看看,相信能碰撞出更多火花。

原文地址:https://www.cnblogs.com/coco1s/p/16774696.html

作者:ChokCoco

(学习视频分享:web前端

위 내용은 순수 CSS를 영리하게 사용하여 마우스 클릭 및 드래그 효과를 구현하여 상호 작용을 더욱 생생하게 만듭니다!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

vue에서 자리 표시자는 무엇을 의미합니까? vue에서 자리 표시자는 무엇을 의미합니까? May 07, 2024 am 09:57 AM

Vue.js에서 placeholder 속성은 사용자가 콘텐츠를 입력하지 않을 때 표시되는 입력 요소의 자리 표시자 텍스트를 지정하고 입력 팁이나 예제를 제공하며 양식 접근성을 향상시킵니다. 사용법은 입력 요소에 자리 표시자 속성을 설정하고 CSS를 사용하여 모양을 사용자 정의하는 것입니다. 모범 사례에는 입력과 관련성, 짧고 명확함, 기본 텍스트 방지, 접근성 고려 등이 포함됩니다.

js에서 스팬은 무엇을 의미하나요? js에서 스팬은 무엇을 의미하나요? May 06, 2024 am 11:42 AM

스팬 태그는 텍스트에 스타일, 속성 또는 동작을 추가할 수 있습니다. 색상 및 글꼴 크기와 같은 스타일을 추가하는 데 사용됩니다. ID, 클래스 등의 속성을 설정합니다. 클릭, 호버 등과 같은 관련 동작 추가 처리 또는 인용을 위해 텍스트를 표시합니다.

js에서 rem은 무엇을 의미합니까? js에서 rem은 무엇을 의미합니까? May 06, 2024 am 11:30 AM

CSS의 REM은 루트 요소(html)의 글꼴 크기에 상대적인 단위입니다. 여기에는 다음과 같은 특징이 있습니다. 루트 요소의 글꼴 크기를 기준으로 하며 상위 요소의 영향을 받지 않습니다. 루트 요소의 글꼴 크기가 변경되면 REM을 사용하는 요소가 그에 따라 조정됩니다. 모든 CSS 속성과 함께 사용할 수 있습니다. REM 사용의 장점은 다음과 같습니다. 반응성: 다양한 장치 및 화면 크기에서 텍스트를 읽을 수 있도록 유지합니다. 일관성: 웹사이트 전체에서 글꼴 크기가 일관되게 유지되어야 합니다. 확장성: 루트 요소 글꼴 크기를 조정하여 전역 글꼴 크기를 쉽게 변경할 수 있습니다.

Vue에 이미지를 삽입하는 방법 Vue에 이미지를 삽입하는 방법 May 02, 2024 pm 10:48 PM

Vue에 이미지를 도입하는 방법에는 URL, 필수 함수, 정적 파일, v-bind 지시어 및 CSS 배경 이미지 등 5가지 방법이 있습니다. 동적 이미지는 Vue의 계산된 속성이나 리스너에서 처리할 수 있으며, 번들 도구를 사용하여 이미지 로딩을 최적화할 수 있습니다. 경로가 올바른지 확인하세요. 그렇지 않으면 로딩 오류가 나타납니다.

스팬 태그의 기능은 무엇입니까 스팬 태그의 기능은 무엇입니까 Apr 30, 2024 pm 01:54 PM

SPAN 태그는 스타일, 색상, 글꼴 크기 등의 속성을 적용하여 텍스트를 강조 표시하는 데 사용되는 인라인 HTML 태그입니다. 여기에는 텍스트 강조, 텍스트 그룹화, 호버 효과 추가 및 동적인 콘텐츠 업데이트가 포함됩니다. 강조하려는 텍스트 주위에 <span>, </span> 태그를 배치하여 사용하며, CSS 스타일링이나 JavaScript를 통해 조작됩니다. SPAN 태그의 이점에는 의미의 명확성, 스타일 유연성 및 유지 관리 용이성이 포함됩니다.

js에서 프롬프트를 래핑하는 방법 js에서 프롬프트를 래핑하는 방법 May 01, 2024 am 06:24 AM

JavaScript에서 프롬프트() 메서드를 사용할 때 다음 세 가지 방법을 통해 줄 바꿈을 수행할 수 있습니다. 1. 줄을 끊으려는 위치에 "\n" 문자를 삽입합니다. 2. 줄 바꿈 문자를 사용합니다. 프롬프트 텍스트; 3. CSS의 "white" -space: pre" 스타일을 사용하여 줄바꿈을 강제합니다.

브라우저 플러그인은 어떤 언어로 작성되어 있나요? 브라우저 플러그인은 어떤 언어로 작성되어 있나요? May 08, 2024 pm 09:36 PM

브라우저 플러그인은 일반적으로 다음 언어로 작성됩니다. 프런트엔드 언어: JavaScript, HTML, CSS 백엔드 언어: C++, Rust, WebAssembly 기타 언어: Python, Java

js의 노드 란 무엇입니까? js의 노드 란 무엇입니까? May 07, 2024 pm 09:06 PM

노드는 HTML 요소를 나타내는 JavaScript DOM의 엔터티입니다. 이는 페이지의 특정 요소를 나타내며 해당 요소에 액세스하고 조작하는 데 사용될 수 있습니다. 일반적인 노드 유형에는 요소 노드, 텍스트 노드, 주석 노드 및 문서 노드가 포함됩니다. getElementById()와 같은 DOM 메서드를 통해 노드에 액세스하고 속성 수정, 하위 노드 추가/제거, 노드 삽입/교체, 노드 복제 등의 작업을 수행할 수 있습니다. 노드 순회는 DOM 구조 내에서 탐색하는 데 도움이 됩니다. 노드는 페이지 콘텐츠, 이벤트 처리, 애니메이션 및 데이터 바인딩을 동적으로 생성하는 데 유용합니다.

See all articles