Question

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

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

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

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

<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>

Answer 2

如果您想使用animation，也要使用相同的box-shadow。创建一个与width,height,box-shadow div具有相同#test1的伪元素。首先将其缩放到0，然后将动画应用到它。

使用animation代替transition，您可以在页面加载时激活动画，而不是在hover focus等事件上激活动画。这是我认为您想要的

请参阅下面的代码段

#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;
  position: relative;
}

#test1:before {
  content: "";
  box-shadow: inset 0 -1.3vw 0 0 #00f9ff;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  transform: scaleX(0);
  transform-origin: left;
  animation-name: stretchRight;
  animation-delay: 0.5s;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  z-index:-1;
}

a {
  text-decoration: none;
}

@keyframes stretchRight {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

<div class="container">
  <div id="test1">
    <a href="http://i.imgur.com/dqkgUe8.jpg">hello darkness my old</a>
  </div>
</div>

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

2 个答案: