使用示例(我想要的)
div::after {
content: var(--mouse-x) ' / ' var(--mouse-y);
}
显示它不工作的测试用例:
CodePen:Jase Smith的伪元素"内容:"属性(测试用例)中的CSS变量
document.addEventListener('mousemove', (e) => {
document.documentElement.style.setProperty('--mouse-x', e.clientX)
document.documentElement.style.setProperty('--mouse-y', e.clientY)
// output for explanation text
document.querySelector('.x').innerHTML = e.clientX
document.querySelector('.y').innerHTML = e.clientY
})/* what I want!! */
div::after {
content: var(--mouse-x, 245)" / " var(--mouse-y, 327);
}
/* setup and presentation styles */
div::before {
content: 'mouse position:';
}
div {
position: absolute;
top: 0;
left: 0;
transform: translate(calc(var(--mouse-x, 245) * 1px), calc(var(--mouse-y, 327) * 1px));
width: 10em;
height: …在我的网站中,我希望有一个淡入淡出的标题,然后使用不同的文本,然后输出,然后恢复正常(循环).以下是我希望它的工作方式:
h1 {
font-size: 600%;
animation-name: head;
animation-duration: 4s;
animation-iteration-count: infinite;
}
@keyframes head {
0% {font-size:600%; opacity:1;}
25% {font-size:570%; opacity:0;}
50% {font-size:600%; opacity:1;}
65% {font-size:570%; opacity:0;}
80% {font-size:600%; opacity:1; innerHtml="Changed Text"}
90% {font-size:570%; opacity:0;}
100% {font-size:600%;opacity:1; innerHtml="Original Text"}
}
但是,我还没有找到任何方法来改变CSS3动画中的文本.这可能吗？