我可以在CSS3中为文本选择颜色设置动画吗？

Question

我一直在尝试，但似乎没有用。

::selection {
    background-color: #ffb7b7;
    animation-name: example;
    animation-duration: 4s;
}

::-moz-selection {
    background-color: #ffb7b7;
    animation-name: example;
    animation-duration: 4s;
}

@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

MDN 将背景色列出为可设置动画的，但是选择作为伪选择器可能会使事情搞砸。

我可以引入一个JavaScript动画库，但不确定是哪个。

我究竟做错了什么？ 如果不是纯CSS（Chrome和FF是主要目标），是否可以使用JS解决方法？

Answer 1

根据MDN的::selection文档 ，它仅允许CSS属性的一小部分：

• 颜色
• 背景颜色
• 光标
• 脱字色
• 大纲
• 文字修饰
• 文本强调色
• 文字阴影

所以……它只是忽略了您的animation-name和animation-duration 。

我认为这是有充分理由的，我很高兴没有这样的网站具有迷幻文字选择效果。

使用JS，您可以获取文本选择位置 ，在其下方放置一个临时元素（使用position: absolute或fixed ，以及负z-index ）并为其背景设置动画。

一个简短的示例（无效且无法正确处理多行选择）：

 "use strict"; function updateFakeSelection() { // remove the previous fake-selection element: document.querySelectorAll(".fake-selection").forEach(function (e) { return e.parentNode.removeChild(e); }); // get text selection position: var rect = window.getSelection().getRangeAt(0).getBoundingClientRect(); // create a new element: var div = document.createElement("div"); div.classList.add("fake-selection"); // position it: div.style.left = rect.left + "px"; div.style.top = rect.top - 1 + "px"; div.style.width = rect.width + "px"; div.style.height = rect.height + 2 + "px"; // (these '-1' and '+2' are there just to give it a bit of extra height) // …and finally place it to the document: document.body.appendChild(div); } // execute the function when the text selection is changed or window is scrolled: document.addEventListener("selectionchange", updateFakeSelection); window.addEventListener("scroll", updateFakeSelection); 

 ::selection { background-color: transparent; } ::-moz-selection { background-color: transparent; } .fake-selection { position: fixed; animation: colorchange 1.5s infinite alternate; z-index: -1; } @keyframes colorchange { 0% { background-color: hotpink; } 50% { background-color: crimson; } 100% { background-color: sandybrown; } } 

 <p>Aliquam ornare wisi eu metus. Fusce nibh. Ut tempus purus at lorem. Aenean placerat. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Fusce nibh. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Morbi scelerisque luctus velit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero.</p> <p>Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Fusce wisi. Sed ac dolor sit amet purus malesuada congue. Suspendisse sagittis ultrices augue. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Mauris elementum mauris vitae tortor. In rutrum. Etiam dictum tincidunt diam. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Fusce tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam in lorem sit amet leo accumsan lacinia. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Aliquam ante.</p> <p>Donec vitae arcu. Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Etiam posuere lacus quis dolor. Aenean fermentum risus id tortor. Aenean vel massa quis mauris vehicula lacinia. Aenean id metus id velit ullamcorper pulvinar. Aliquam id dolor. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus. Nullam feugiat, turpis at pulvinar vulputate, erat libero tristique tellus, nec bibendum odio risus sit amet ante. Nullam dapibus fermentum ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam erat volutpat. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. In enim a arcu imperdiet malesuada.</p> <p>Aliquam ornare wisi eu metus. Fusce nibh. Ut tempus purus at lorem. Aenean placerat. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Fusce nibh. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Morbi scelerisque luctus velit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero.</p> <p>Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Fusce wisi. Sed ac dolor sit amet purus malesuada congue. Suspendisse sagittis ultrices augue. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Mauris elementum mauris vitae tortor. In rutrum. Etiam dictum tincidunt diam. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Fusce tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam in lorem sit amet leo accumsan lacinia. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Aliquam ante.</p> <p>Donec vitae arcu. Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Etiam posuere lacus quis dolor. Aenean fermentum risus id tortor. Aenean vel massa quis mauris vehicula lacinia. Aenean id metus id velit ullamcorper pulvinar. Aliquam id dolor. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus. Nullam feugiat, turpis at pulvinar vulputate, erat libero tristique tellus, nec bibendum odio risus sit amet ante. Nullam dapibus fermentum ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam erat volutpat. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. In enim a arcu imperdiet malesuada.</p> 

如果您决定使用类似的内容，则更改元素大小比每次选择更改后销毁和创建元素都更有效。

请不要邪恶。 :)

Answer 2

是的，背景色可以设置动画，但这是问题所在：

我们可以在CSS的选择器::selection中使用这些属性：

• 颜色
• 背景颜色
• 光标
• 脱字色
• 大纲及其长手
• 文本修饰及其相关属性
• 文本强调色
• 文字阴影

是的，我知道这很可悲，但是...这就是我们所拥有的

顺便说一句，您可以了解更多有关此链接的信息

https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3Aselection