如何从左到右转换盒子阴影

Question

如何从左到右转换盒子阴影

如何使框阴影从左向右变换而不将变换效果添加到文本本身.

此文本将根据内容更改大小,因此需要相应地调整box-shadow.

目前我的代码看起来像这样.

body {
	background-color: #FFFFFF;
	margin: 0px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.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%);
}


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;
	/*box-shadow: inset 0 -1.3vw 0 0 #00f9ff;  OLD SCRIPT*/
}    



#test1 {
    display: inline-block;
    height: auto;
    width: auto;
    visibility: visible;
    box-shadow: inset 0 -1.3vw 0 0 #00f9ff;

    font-family: "Times New Roman", Times, serif;
    text-align: center;
    line-height: 7.5vw;
    margin: 0;
    font-size: 7.7vw;
    font-weight: bold;
    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%;
}

@keyframes stretchRight {
    0% {
        transform: scaleX(0);

    }

    100% {
        transform: scaleX(1);
    }                           
}

Run Code Online (Sandbox Code Playgroud)

<html>
	<head>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<div class="container">
			<div id="test1"><a href="http://i.imgur.com/dqkgUe8.jpg">hello darkness my old</a></div>
			</div>
		</div>
	</body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 6

您要做的是使用可以设置动画的伪元素.我已将动画添加到悬停状态以进行更好的测试

body {
	background-color: #FFFFFF;
	margin: 0px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.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%);
}


a, a:visited, a:hover {
  position: relative;
	/*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;
}    




#test1 {
    display: inline-block;
    height: auto;
    width: auto;
    visibility: visible;

    font-family: "Times New Roman", Times, serif;
    text-align: center;
    line-height: 7.5vw;
    margin: 0;
    font-size: 7.7vw;
    font-weight: bold;
}


#test1 a:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  content: "";
  background: #00f9ff;
  transition: width .2s ease-in-out;
 }
 
 #test1 a:hover:after {
  width: 100%;
 }

Run Code Online (Sandbox Code Playgroud)

<html>
	<head>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<div class="container">
			<div id="test1"><a href="http://i.imgur.com/dqkgUe8.jpg">hello darkness my old</a></div>
			</div>
		</div>
	</body>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，10 月前
查看次数：	896 次
最近记录：	8 年，10 月前