我一直在尝试，但似乎没有工作。
::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 lists背景颜色可动画，但选择是伪选择器可能会搞砸。
我可以引入一个JavaScript动画库但不确定是哪个。
我做错了什么？是否有可能在纯CSS（Chrome和FF是主要目标），如果不是我应该使用的JS解决方法？
答案 0 :(得分：2)
根据MDN docs on ::selection，它只允许一小部分CSS属性：
所以......它只是忽略了你的animation-name和animation-duration。
我认为这是一个很好的理由，我很高兴没有迷幻文字选择效果的网站。
使用JS，您可以get text selection position在其下方放置一个临时元素（使用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>
如果您决定使用类似的东西，只需更改元素大小比在每次选择更改后销毁和创建元素大小更有效。
请不要做坏事。 ：）
答案 1 :(得分：0)
是的，背景颜色是可动画的，但问题在于：
我们可以在css：
中的选择器::selection中使用这些属性
是的，我知道这很难过，但......这就是我们所拥有的
顺便说一下，您可以了解更多有关此链接的信息
https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3Aselection