jquery - 彩虹文字悬停 CSS
问题描述
创建自定义 CSS 类,其中单个字母改变颜色 - 在彩虹渐变中循环。
过渡: 0 毫秒进入 / 300 毫秒淡出。
无链接:成为一个名为“彩虹”的 CSS 类,我可以根据需要选择性地应用它。
代码:这是我尝试过的。
// add animation-delay properties to span elements
var animTime = 6, // time for the animation in seconds
hueChange = 3, // the hue change from one span element to the next
prefixes = ["","-webkit-","-moz-","-o-"],
numPrefixes = prefixes.length;
$('.unicorn').find('span').each(function (i) {
for (var j=0;j<numPrefixes;j++) {
$(this).css(prefixes[j]+'animation-delay', (animTime * ((i * hueChange) % 360) / 360) - animTime + 's');
}
});
.unicorn:hover span {
-webkit-animation: colorRotate 6s linear 0s infinite;
-moz-animation: colorRotate 6s linear 0s infinite;
-o-animation: colorRotate 6s linear 0s infinite;
animation: colorRotate 6s linear 0s infinite;
}
@-webkit-keyframes colorRotate {
from {
color: rgb(255, 0, 0);
}
16.6% {
color: rgb(255, 0, 255);
}
33.3% {
color: rgb(0, 0, 255);
}
50% {
color: rgb(0, 255, 255);
}
66.6% {
color: rgb(0, 255, 0);
}
83.3% {
color: rgb(255, 255, 0);
}
to {
color: rgb(255, 0, 0);
}
}
@-moz-keyframes colorRotate {
from {
color: rgb(255, 0, 0);
}
16.6% {
color: rgb(255, 0, 255);
}
33.3% {
color: rgb(0, 0, 255);
}
50% {
color: rgb(0, 255, 255);
}
66.6% {
color: rgb(0, 255, 0);
}
83.3% {
color: rgb(255, 255, 0);
}
to {
color: rgb(255, 0, 0);
}
}
@-o-keyframes colorRotate {
from {
color: rgb(255, 0, 0);
}
16.6% {
color: rgb(255, 0, 255);
}
33.3% {
color: rgb(0, 0, 255);
}
50% {
color: rgb(0, 255, 255);
}
66.6% {
color: rgb(0, 255, 0);
}
83.3% {
color: rgb(255, 255, 0);
}
to {
color: rgb(255, 0, 0);
}
}
@keyframes colorRotate {
from {
color: rgb(255, 0, 0);
}
16.6% {
color: rgb(255, 0, 255);
}
33.3% {
color: rgb(0, 0, 255);
}
50% {
color: rgb(0, 255, 255);
}
66.6% {
color: rgb(0, 255, 0);
}
83.3% {
color: rgb(255, 255, 0);
}
to {
color: rgb(255, 0, 0);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p class="unicorn"> <span style="color: hsl(0, 100%, 50%);">L</span><span style="color: hsl(4, 100%, 50%);">o</span><span style="color: hsl(7, 100%, 50%);">r</span><span style="color: hsl(10, 100%, 50%);">e</span><span style="color: hsl(13, 100%, 50%);">m</span><span style="color: hsl(16, 100%, 50%);"> </span><span style="color: hsl(19, 100%, 50%);">i</span><span style="color: hsl(23, 100%, 50%);">p</span><span style="color: hsl(26, 100%, 50%);">s</span><span style="color: hsl(29, 100%, 50%);">u</span><span style="color: hsl(32, 100%, 50%);">m</span><span style="color: hsl(35, 100%, 50%);"> </span><span style="color: hsl(38, 100%, 50%);">d</span><span style="color: hsl(42, 100%, 50%);">o</span><span style="color: hsl(45, 100%, 50%);">l</span><span style="color: hsl(48, 100%, 50%);">o</span><span style="color: hsl(51, 100%, 50%);">r</span><span style="color: hsl(54, 100%, 50%);"> </span><span style="color: hsl(57, 100%, 50%);">s</span><span style="color: hsl(60, 100%, 50%);">i</span><span style="color: hsl(64, 100%, 50%);">t</span><span style="color: hsl(67, 100%, 50%);"> </span><span style="color: hsl(70, 100%, 50%);">a</span><span style="color: hsl(73, 100%, 50%);">m</span><span style="color: hsl(76, 100%, 50%);">e</span><span style="color: hsl(79, 100%, 50%);">t</span><span style="color: hsl(83, 100%, 50%);">,</span><span style="color: hsl(86, 100%, 50%);"> </span><span style="color: hsl(89, 100%, 50%);">c</span><span style="color: hsl(92, 100%, 50%);">o</span><span style="color: hsl(95, 100%, 50%);">n</span><span style="color: hsl(98, 100%, 50%);">s</span><span style="color: hsl(102, 100%, 50%);">e</span><span style="color: hsl(105, 100%, 50%);">c</span><span style="color: hsl(108, 100%, 50%);">t</span><span style="color: hsl(111, 100%, 50%);">e</span><span style="color: hsl(114, 100%, 50%);">t</span><span style="color: hsl(117, 100%, 50%);">u</span><span style="color: hsl(120, 100%, 50%);">r</span><span style="color: hsl(124, 100%, 50%);"> </span><span style="color: hsl(127, 100%, 50%);">a</span><span style="color: hsl(130, 100%, 50%);">d</span><span style="color: hsl(133, 100%, 50%);">i</span><span style="color: hsl(136, 100%, 50%);">p</span><span style="color: hsl(139, 100%, 50%);">i</span><span style="color: hsl(143, 100%, 50%);">s</span><span style="color: hsl(146, 100%, 50%);">i</span><span style="color: hsl(149, 100%, 50%);">c</span><span style="color: hsl(152, 100%, 50%);">i</span><span style="color: hsl(155, 100%, 50%);">n</span><span style="color: hsl(158, 100%, 50%);">g</span><span style="color: hsl(162, 100%, 50%);"> </span><span style="color: hsl(165, 100%, 50%);">e</span><span style="color: hsl(168, 100%, 50%);">l</span><span style="color: hsl(171, 100%, 50%);">i</span><span style="color: hsl(174, 100%, 50%);">t</span><span style="color: hsl(177, 100%, 50%);">.</span><span style="color: hsl(180, 100%, 50%);"> </span><span style="color: hsl(184, 100%, 50%);">C</span><span style="color: hsl(187, 100%, 50%);">u</span><span style="color: hsl(190, 100%, 50%);">p</span><span style="color: hsl(193, 100%, 50%);">i</span><span style="color: hsl(196, 100%, 50%);">d</span><span style="color: hsl(199, 100%, 50%);">i</span><span style="color: hsl(203, 100%, 50%);">t</span><span style="color: hsl(206, 100%, 50%);">a</span><span style="color: hsl(209, 100%, 50%);">t</span><span style="color: hsl(212, 100%, 50%);">e</span><span style="color: hsl(215, 100%, 50%);"> </span><span style="color: hsl(218, 100%, 50%);">a</span><span style="color: hsl(222, 100%, 50%);">l</span><span style="color: hsl(225, 100%, 50%);">i</span><span style="color: hsl(228, 100%, 50%);">q</span><span style="color: hsl(231, 100%, 50%);">u</span><span style="color: hsl(234, 100%, 50%);">i</span><span style="color: hsl(237, 100%, 50%);">d</span><span style="color: hsl(240, 100%, 50%);"> </span><span style="color: hsl(244, 100%, 50%);">m</span><span style="color: hsl(247, 100%, 50%);">a</span><span style="color: hsl(250, 100%, 50%);">i</span><span style="color: hsl(253, 100%, 50%);">o</span><span style="color: hsl(256, 100%, 50%);">r</span><span style="color: hsl(259, 100%, 50%);">e</span><span style="color: hsl(263, 100%, 50%);">s</span><span style="color: hsl(266, 100%, 50%);"> </span><span style="color: hsl(269, 100%, 50%);">d</span><span style="color: hsl(272, 100%, 50%);">o</span><span style="color: hsl(275, 100%, 50%);">l</span><span style="color: hsl(278, 100%, 50%);">o</span><span style="color: hsl(282, 100%, 50%);">r</span><span style="color: hsl(285, 100%, 50%);">e</span><span style="color: hsl(288, 100%, 50%);">m</span><span style="color: hsl(291, 100%, 50%);">q</span><span style="color: hsl(294, 100%, 50%);">u</span><span style="color: hsl(297, 100%, 50%);">e</span><span style="color: hsl(300, 100%, 50%);"> </span><span style="color: hsl(304, 100%, 50%);">m</span><span style="color: hsl(307, 100%, 50%);">o</span><span style="color: hsl(310, 100%, 50%);">l</span><span style="color: hsl(313, 100%, 50%);">e</span><span style="color: hsl(316, 100%, 50%);">s</span><span style="color: hsl(319, 100%, 50%);">t</span><span style="color: hsl(323, 100%, 50%);">i</span><span style="color: hsl(326, 100%, 50%);">a</span><span style="color: hsl(329, 100%, 50%);">e</span><span style="color: hsl(332, 100%, 50%);"> </span><span style="color: hsl(335, 100%, 50%);">c</span><span style="color: hsl(338, 100%, 50%);">o</span><span style="color: hsl(342, 100%, 50%);">r</span><span style="color: hsl(345, 100%, 50%);">r</span><span style="color: hsl(348, 100%, 50%);">u</span><span style="color: hsl(351, 100%, 50%);">p</span><span style="color: hsl(354, 100%, 50%);">t</span><span style="color: hsl(357, 100%, 50%);">i</span>
</p>
有没有人对制作它有任何想法。任何帮助,将不胜感激?
解决方案
推荐阅读
- apache-kafka - 无法刷新状态存储(带有 Kafka Stream Binder 的 Spring Cloud Stream)
- javascript - 错误消息负载
- iis - 窗口服务器 2016 上 .NET 核心 2.1.3 中的 HTTP 错误 502.5
- javascript - 如何以角度对带有姓氏的列表进行排序?
- python - 将输入馈送到估计器时,预测结果保持不变
- python - Pandas GroupBy 每个月然后根据列中的字符串进行小计计数
- javascript - 如何重用整个 mmenu 实例
- python - 如何在 Python3 中安装袖扣?
- ios - 如何从自定义 UIView 类调用函数?
- sql - Netezza SQL 中的 REGEX 后视断言错误