HTML+CSS를 사용하여 애니메이션 프롬프트 도구 만들기
- 青灯夜游앞으로
- 2020-11-03 17:55:352688검색
도구 설명은 사용자가 아이콘을 배치하기 위해 추가 컨텍스트가 필요할 때, 버튼을 클릭하기 위한 확신이 필요할 때 또는 사용자를 향상시키기 위해 이미지와 함께 사용할 이스터 에그 제목을 사용할 수 있는 좋은 방법입니다. 인터페이스. 이제 HTML과 CSS만 사용하여 애니메이션 툴팁을 만들어 보겠습니다.
(권장 튜토리얼: CSS 튜토리얼)
Demo
우리 작업의 목표는 다음과 같습니다.
주요 목표는 툴팁을 쉽게 추가하는 것이므로 이렇게 하겠습니다. 사용자 정의를 추가하여 tooltip 속성을 정의하여 다음을 수행합니다. tooltip属性来做到这一点：
<span tooltip="message">visible text or icon, etc.</span><br/>
关于可访问性和功能的说明
如果您正在寻找508兼容的工具提示，或者需要更智能的工具提示，支持容器冲突检测和/或支持HTML内容与纯文本，那么有许多使用第三方脚本的解决方案可以满足您的这些需求。
让我们设定几个预期
不需要JavaScript
我们将会使用属性选择器（而不是类名），以及CSS内建的模式匹配
加到现有的DOM元素（你的标签中不需要新的元素）
代码例子中是没有前缀的（如有需要，为你的目标浏览器加上供应商前缀）
假设通过 mouseover/hover 来触发提示框
仅仅是纯文本提示框（HTML，图片等等都不支持）
当唤起提示框时，有巧妙的动画
下面我们开始
我们还要先处理一个问题，是关于"不需要额外标签"的。毕竟，这很巧妙。 我们的提示框真的不需要额外的DOM元素，因为它们完全是基于伪元素的（::before 和 ::after），我们可以通过CSS来控制。
如果你已经在其它样式集中使用了一个元素的伪元素，又希望在这个元素是加一个提示框，那么你可能需要稍稍做一些重构。
提示框
还有一个警告：CSS定位。为了提示框正常运作，它们的父元素（我们把提示框添加在它后面）需要是
position: relative，或者position: absolute，或position: fixed[foo] {<br/> background: rgba(0, 0, 0, 0.8);<br/> color: #fff;<br/>}<br/>
몇 가지 기대치를 설정해 보겠습니다
- JavaScript가 필요하지 않습니다
.this-thing,但是CSS有几个类型的选择器。我们巧妙的提示框打算使用属性选择器——也就是方括号表示法。<span foo>Check it out!</span><br/>
当浏览器看到诸如此类的东西时：
<span class="tooltip another-classname">lorem ipsum</span><br/><span tooltip="sit dolar amet">lorem ipsum</span><br/>
浏览器会知道，它需要应用
[foo]规则了，因为45a2772a6b6107b401db3c9b82c049c2标签有一个叫做foo的属性。在这个例子中，span - 우리는 속성 선택기( 대신 클래스 이름) 및 CSS 내장 패턴 일치
기존 DOM 요소에 추가(태그에 새 요소가 필요하지 않음)코드 예제에는 접두사가 없습니다(필요한 경우 대상 브라우저에 대한 공급업체 접두어를 추가하세요)
- 🎜 프롬프트 상자가 마우스 오버/호버를 통해 트리거된다고 가정합니다. 🎜🎜
- 🎜단지 일반 텍스트 프롬프트 상자입니다(HTML, 그림 등. 지원되지 않음) )🎜🎜
- 🎜프롬프트 상자가 호출되면 영리한 애니메이션이 나옵니다🎜🎜🎜🎜아래에서 시작하겠습니다
🎜🎜또한 "추가 태그가 필요하지 않습니다"에 관한 문제를 먼저 처리해야 합니다. " . 결국 깔끔해요. 우리의 툴팁은 CSS를 통해 수행할 수 있는 의사 요소(::before및::after)를 완전히 기반으로 하기 때문에 추가 DOM 요소가 실제로 필요하지 않습니다. 제어. 🎜🎜다른 스타일 세트에서 요소의 의사 요소를 사용한 경우 이 요소에 도구 설명을 추가하려면 일부 리팩토링을 수행해야 할 수 있습니다. 🎜🎜🎜🎜프롬프트 상자🎜🎜
🎜🎜CSS 위치 지정이라는 경고도 있습니다. 툴팁이 제대로 작동하려면 상위 요소(툴팁을 추가한 후)가 🎜- 🎜
position:relative code>여야 합니다. , 또는 🎜🎜<li>🎜<code>위치: 절대또는 🎜🎜 - 🎜
위치: 고정 🎜🎜🎜🎜기본적으로 position: static이 아닌 한 무엇이든 가능합니다. 이는 브라우저가 거의 모든 요소에 할당하는 기본 위치 지정 모드입니다. 툴팁은 절대적인 위치에 있으므로 절대값이 어느 범위 내에서 의미가 있는지 알아야 합니다. 🎜🎜 기본 위치 지정 지시어 static은 경계를 선언하지 않으며 상대 위치 지정을 위한 프롬프트 상자 컨텍스트를 제공하지도 않습니다. 따라서 도구 설명은 경계가 선언된 다음으로 가장 가까운 상위 요소를 사용합니다. 🎜🎜툴팁 사용 방법에 가장 적합한 위치 지시문을 결정해야 합니다. 이 튜토리얼에서는 상위 요소를 기준으로 위치를 가정합니다. UI가 절대적으로 배치된 요소에 의존하는 경우 해당 요소에 도구 설명을 배포하려면 일부 재구성(추가 마크업)이 필요할 수도 있습니다. 🎜🎜🎜🎜속성 선택기: 빠른 검토🎜🎜🎜🎜 대부분의 CSS 규칙은.this-thing과 같은 클래스 이름으로 작성되지만 CSS에는 여러 유형의 선택기가 있습니다. 우리의 기발한 툴팁은 속성 선택자, 즉 대괄호 표기법을 사용할 것입니다. 🎜[tooltip] {<br/> position: relative;<br/>}<br/>🎜브라우저에 다음과 같은 내용이 표시되면: 🎜[tooltip]::before,<br/>[tooltip]::after {<br/> line-height: 1;<br/> user-select: none;<br/> pointer-events: none;<br/> position: absolute;<br/> display: none;<br/> opacity: 0;<br/> <br/> /* opinions */<br/> text-transform: none; <br/> font-size: .9em;<br/>}<br/>🎜브라우저는45a2772a6b6107b401db3c9b82c049c2태그 때문에[foo]규칙을 적용해야 한다는 것을 알게 됩니다.foo라는 속성입니다. 이 예에서span자체는 반투명 검정색 배경과 흰색 텍스트를 갖습니다. 🎜🎜HTML 요소에는 다양한 내장 속성이 있지만 자체 속성을 제공할 수도 있습니다. 예를 들어 foo 또는 도구 설명입니다. 기본적으로 HTML은 이것이 무엇을 의미하는지 전혀 모릅니다. 그러나 CSS를 사용하면 이러한 사용자 정의 속성이 무엇을 의미하는지 HTML에 알릴 수 있습니다. 🎜🎜🎜🎜속성 선택기를 사용하는 이유는 무엇인가요? 🎜🎜🎜我们后面会使用属性选择器，主要是出于侧重分离的目的。使用属性而不是类名，并不会让我们在详细程度上获得更多益处，类和属性在详细程度上是相同的。 然而，通过使用属性，我们可以把我们的内容放在一块儿，因为HTML属性可以有值，而类名没有值。
在这个例子的代码中，来权衡一下类名
.tooltip对比属性[tooltip]。类名是[class]属性的值中的一个，而tooltip属性可以存放一个值，它就是我们要显示的文字。<span class="tooltip another-classname">lorem ipsum</span><br/><span tooltip="sit dolar amet">lorem ipsum</span><br/>
使用提示框
我们的提示框会使用两种不同的属性：
tooltip: 这个属性存放了提示框的内容（一个纯文本字符串）flow:可选；这个属性允许我们控制如何显示提示框。我们可以支持很多方位，但是我们会覆盖4各常用方位：上，左，右，下
1. 相对性
这是用在提示框的父元素上的。让我们来给定一个定位指令，这样提示框的组成部分（即
::before和::after伪元素）的绝对定位就可以以父元素做参照进行定位，而不是以整个页面或祖父元素或DOM树上方的其它外围元素作为参照进行定位。[tooltip] {<br/> position: relative;<br/>}<br/>2. 伪元素准备
在这里，我们要对
::before和::after设置常用属性。content属性是真正让伪元素工作的属性，不过我们稍后再讨论它。[tooltip]::before,<br/>[tooltip]::after {<br/> line-height: 1;<br/> user-select: none;<br/> pointer-events: none;<br/> position: absolute;<br/> display: none;<br/> opacity: 0;<br/> <br/> /* opinions */<br/> text-transform: none; <br/> font-size: .9em;<br/>}<br/>3、Dink
它是一个尖尖的小三角形，通过指向它的调用者，为提示框提供对话气泡的感觉。 注意到我们在边界颜色这一块，使用了
tranparent；由于上色要根据提示框的flow值来，所以之后再加上颜色。[tooltip]::before {<br/> content: '';<br/> z-index: 1001;<br/> border: 5px solid transparent;<br/>}<br/>content: '';声明中的值是一个空字符串，这并不是笔误。字符串里面，我们不想要任何东西，但是我们需要这个属性，使得伪元素得以存在。
为了生成一个三角形，我们定义了一个实现边框，在空的盒子（没有内容）上加了一些厚度，而不设定盒子的宽度和高度，仅仅对盒子的每一条边都给一个边框颜色。
4、气泡
这里是重点了。注意内容：attr（tooltip）部分说：“此伪元素应使用tooltip属性的值作为其内容。”这就是为什么对类名使用属性是如此之好！
[tooltip]::after {<br/> content: attr(tooltip); /* magic! */<br/> z-index: 1000;<br/> <br/> /* most of the rest of this is opinion */<br/> font-family: Helvetica, sans-serif;<br/> text-align: center;<br/> <br/> /* <br/> Let the content set the size of the tooltips <br/> but this will also keep them from being obnoxious<br/> */<br/> min-width: 3em;<br/> max-width: 21em;<br/> white-space: nowrap;<br/> overflow: hidden;<br/> text-overflow: ellipsis;<br/> <br/> /* visible design of the tooltip bubbles */<br/> padding: 1ch 1.5ch;<br/> border-radius: .3ch;<br/> box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);<br/> background: #333;<br/> color: #fff;<br/>}<br/>请注意，dink和气泡的
z-index值。 这些是任意值，但请记住，z索引值是相对的。 含义：z-index为3的元素内部的z-index值为1001只是意味着1001元素将是该z-index：3容器中最顶层的元素。气泡的
z-index应比Dink的z-index至少降低1步。 如果它等于或高于该dink，那么如果您的工具提示使用了框阴影，则最终会在dink上产生不一致的着色效果。5、交互作用
我们的提示框是通过把鼠标移动到带提示框的元素上面，来激活的。差不多是这样。
[tooltip]:hover::before,<br/>[tooltip]:hover::after {<br/> display: block;<br/>}<br/>如果您在第2步中回顾我们的样式块，应该会看到我们使用了
opacity：0;连同显示：无； 用于我们的工具提示部分。 我们这样做是为了在显示和隐藏工具提示时可以使用CSS动画效果。display属性是不能做成动画的，但是opacity属性可以！我们留到最后来处理动画的问题。如果你对动画提示框没兴趣，只要把第2步中的
opacity: 0;删掉，无视第7步即可。最后一件要应用到所有提示框上的是，如果提示框没有内容，能有一个方法来抑制提示框。如果你使用某种动态系统（Vue.js, Angular, 或者 React, PHP等等）来生成提示框的话，我们就不需要笨笨的空白气泡了！
/* don't show empty tooltips */<br/>[tooltip='']::before,<br/>[tooltip='']::after {<br/> display: none !important;<br/>}<br/>6、流控制
这一步会变得更加复杂，因为我们会使用一些不那么常见的选择器，来帮助我们的提示框基于 flow 值（或没有flow属性）来确定位置。
在我们写样式之前，让我们看看将要用到一些选择器模式。
[tooltip]:not([flow])::before,<br/>[tooltip][flow^="up"]::before {<br/> /* ...<br/> properties: values<br/> ... */<br/>}<br/>这是在告诉浏览器：“对于所有带有
tooltip属性来说，其中没有 flow 属性的元素，或者有flow元素，但它的值是以'up'开头的：将这些样式套用到这类元素的::before伪元素上。”我们在这里使用了一个模式，这样一来，这些东西可以扩展到其它流上，而步需要重复这么多的CSS。这个模式
flow^="up"使用了^=（开头）匹配符。 如果你想增加其它流控制的话，通过这个模式，也可以将样式应用在up-right和up-left方向上（代码中）。Up (default):
/* ONLY the ::before */<br/>[tooltip]:not([flow])::before,<br/>[tooltip][flow^="up"]::before {<br/> bottom: 100%;<br/> border-bottom-width: 0;<br/> border-top-color: #333;<br/>}<br/> <br/>/* ONLY the ::after */<br/>[tooltip]:not([flow])::after,<br/>[tooltip][flow^="up"]::after {<br/> bottom: calc(100% + 5px);<br/>}<br/> <br/>/* Both ::before & ::after */<br/>[tooltip]:not([flow])::before,<br/>[tooltip]:not([flow])::after,<br/>[tooltip][flow^="up"]::before,<br/>[tooltip][flow^="up"]::after {<br/> left: 50%;<br/> transform: translate(-50%, -.5em);<br/>}<br/>Down:
[tooltip][flow^="down"]::before {<br/> top: 100%;<br/> border-top-width: 0;<br/> border-bottom-color: #333;<br/>}<br/> <br/>[tooltip][flow^="down"]::after {<br/> top: calc(100% + 5px);<br/>}<br/> <br/>[tooltip][flow^="down"]::before,<br/>[tooltip][flow^="down"]::after {<br/> left: 50%;<br/> transform: translate(-50%, .5em);<br/>}<br/>Left:
[tooltip][flow^="left"]::before {<br/> top: 50%;<br/> border-right-width: 0;<br/> border-left-color: #333;<br/> left: calc(0em - 5px);<br/> transform: translate(-.5em, -50%);<br/>}<br/> <br/>[tooltip][flow^="left"]::after {<br/> top: 50%;<br/> right: calc(100% + 5px);<br/> transform: translate(-.5em, -50%);<br/>}<br/>Right:
[tooltip][flow^="right"]::before {<br/> top: 50%;<br/> border-left-width: 0;<br/> border-right-color: #333;<br/> right: calc(0em - 5px);<br/> transform: translate(.5em, -50%);<br/>}<br/> <br/>[tooltip][flow^="right"]::after {<br/> top: 50%;<br/> left: calc(100% + 5px);<br/> transform: translate(.5em, -50%);<br/>}<br/>7、对所有事物进行动画处理
动画是很神奇的。动画可以做到：
让用户感觉舒服
让用户感受到你的用户界面的空间感
注意到该看到的东西
让用户界面中本来非黑即白的生硬效果变得柔和
我们的提示框属于最后那一种。如果仅仅是让一个文字泡泡出现然后突然消失，效果是不令人满意的，我们可以让它更柔和一些。
@keyframes
我们需要两个关键帧 (
@keyframe) 动画。向上/向下提示框要用到tooltips-vert关键帧，而向左/向右提示框使用tooltips-horz关键帧。 注意，在这些关键帧中，我们只定义了提示框所需的终止状态。我们并不需要知道它们从何处来 (提示框本身就有状态信息)。我们只想控制它们要到哪儿去。
@keyframes tooltips-vert {<br/> to {<br/> opacity: .9;<br/> transform: translate(-50%, 0);<br/> }<br/>}<br/> <br/>@keyframes tooltips-horz {<br/> to {<br/> opacity: .9;<br/> transform: translate(0, -50%);<br/> }<br/>}<br/>现在，当用户将鼠标悬停在触发元素(带有
[tooltip]属性的元素)上时，我们需要将这些关键帧应用于工具提示。由于我们正在使用各种流来控制工具提示的显示方式，所以我们需要在样式中确定这些可能性。使用:hover将控制传递给动画
[tooltip]:not([flow]):hover::before,<br/>[tooltip]:not([flow]):hover::after,<br/>[tooltip][flow^="up"]:hover::before,<br/>[tooltip][flow^="up"]:hover::after,<br/>[tooltip][flow^="down"]:hover::before,<br/>[tooltip][flow^="down"]:hover::after {<br/> animation: <br/> tooltips-vert <br/> 300ms <br/> ease-out<br/> forwards;<br/>}<br/> <br/>[tooltip][flow^="left"]:hover::before,<br/>[tooltip][flow^="left"]:hover::after,<br/>[tooltip][flow^="right"]:hover::before,<br/>[tooltip][flow^="right"]:hover::after {<br/> animation: <br/> tooltips-horz <br/> 300ms <br/> ease-out <br/> forwards;<br/>}<br/>我们不能对
display属性进行动画，但是可以通过操作opacity属性，在提示框上加上淡入效果。我们也可以动画transform属性，它可以给提示框加上微妙的动作，触发的元素就像飞入某点的一样。主要
forward关键词在动画的声明中，这告诉动画当完成时不重置，而是继续停留在结束。效果如下：
更多编程相关知识，请访问：编程入门！！
- 🎜
위 내용은 HTML+CSS를 사용하여 애니메이션 프롬프트 도구 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!