Question

如何设置动画在我链接下的假框阴影下划线？我希望下划线从左到右。

我正在使用一个脚本来更改下划线的颜色，它会加载它在三种颜色之间交替显示的页面。

我试图添加＆＃34;动画：stretchRight;＆＃34;对a.red，a.blue，a.yellow，但它似乎不起作用。

我可以使用stretchRight类来使用其他元素，所以我知道它运行良好。我相信它与脚本有关。

以下是我正在处理的代码。

你们这些巫师可以帮我解决这个问题吗？

＆＃13;

body {
	background-color: #FFFFFF;
	margin: 0px;

}

.container {
	display: block;
	width: 85%;
	/*center vertically & horizontally*/
	position:absolute; top:50%; left:50%;
    -webkit-transform:translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
}

#wotd {
	text-align: center;
   	margin: 0;
	font-weight: bold;
	cursor: pointer;
    clear: none;
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
    animation: fadein 2s;
}

a, a:visited, a:hover {
	/*display: block; this makes the whole line justified*/
	-ms-text-align-last: justify;
    -moz-text-align-last: justify;
    text-align-last: justify;
	text-decoration: none;
    color: #000000;
	
}

a.red {
    box-shadow: inset 0 -1.3vw 0 0 #DB3069;
}

a.yellow {
    box-shadow: inset 0 -1.3vw 0 0 #fffd35;
}

a.blue {
    box-shadow: inset 0 -1.3vw 0 0 #00f9ff;
}	


@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/* Safari, Chrome and Opera > 12.1 */
    @-webkit-keyframes fadein {
   	from { opacity: 0; }
    to   { opacity: 1; }
}


/* This is WiP */
     

@keyframes stretchRight {
    0% {
        transform: scaleX(0);
    }

    100% {
        transform: scaleX(1);
    }                           
}

@-webkit-keyframes stretchRight {
    0% {
        -webkit-transform: scaleX(0);
    }

    100% {
        -webkit-transform: scaleX(1);
    }       
}

#object {
    display: block;
    height: 180px;
    width: 180px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 100px;
    visibility: visible;
}


.eee {
    box-shadow: inset 0 -1.3vw 0 0 #00f9ff;
    animation: stretchRight;
    -webkit-animation: stretchRight;  

    animation-duration: 1s;   
    -webkit-animation-duration: 1s;

    animation-timing-function: ease-out;    
    -webkit-animation-timing-function: ease-out;    

    transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -webkit-transform-origin: 0% 0%;
}

＆＃13;

<html>
	<head>
		<link rel="stylesheet" href="style.css">
	<body>
		<div class="container">
			<div id="wotd">blah blah blueee<a id="decor" href="https://stackoverflow.com/questions/44692808/integrating-a-script-within-css">pew pew paw</a></div>
			<div id="object" class="eee"></div>
		</div>
	</body>
	<script type="text/javascript">
		var classes = ['red', 'blue', 'yellow'];
		var random_class = classes[Math.floor(Math.random() * classes.length)];
		var title = document.getElementById('decor');
		classes.forEach((el) => {
   		title.classList.remove(el);
		});
		title.classList.add(random_class);
	</script>
</html>

＆＃13;

Answer 1

您需要在链接本身上指定动画，@keyframes必须指定要设置动画的CSS属性。

		var classes = ['red', 'blue', 'yellow'];
		var random_class = classes[Math.floor(Math.random() * classes.length)];
		var title = document.getElementById('decor');
		classes.forEach((el) => {
   		title.classList.remove(el);
		});
		title.classList.add(random_class);

body {
	background-color: #FFFFFF;
	margin: 0px;

}

.container {
	display: block;
	width: 85%;
	/*center vertically & horizontally*/
	position:absolute; top:50%; left:50%;
    -webkit-transform:translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
}

#wotd {
	text-align: center;
   	margin: 0;
	font-weight: bold;
	cursor: pointer;
  clear: none;
  -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
  animation: fadein 2s;
}

a, a:visited, a:hover {
	/*display: block; this makes the whole line justified*/
	-ms-text-align-last: justify;
    -moz-text-align-last: justify;
    text-align-last: justify;
	text-decoration: none;
    color: #000000;
	
}

a.red {
    box-shadow: inset 0 -1.3vw 0 0 #DB3069;
}

a.yellow {
    box-shadow: inset 0 -1.3vw 0 0 #fffd35;
}

a.blue {
    box-shadow: inset 0 -1.3vw 0 0 #00f9ff;
}	

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}   

@keyframes stretchRight {
    0% {
        transform: scaleX(0);
        border-bottom:none;
    }

    100% {
        transform: scaleX(1);
        border-bottom:1px solid black;
    }                           
}

#decor { 
         animation-duration: 3s;
         animation-name: stretchRight; 
}

		<div class="container">
			<div id="wotd">blah blah blueee<a id="decor" href="https://stackoverflow.com/questions/44692808/integrating-a-script-within-css">pew pew paw</a></div>
			<div id="object" class="eee"></div>
		</div>

使用box-shadow动画从左到右下划线

1 个答案: