Question

我希望蓝色框中的文字出现在它的开口处，但它应该是固定的，而不是调整到蓝色框的宽度。我还需要一些想法，以便以与我刚才类似的方式显示文本的其他有趣方式。（即最初不可见，但悬停时，文字可见）

body {
	margin: 0;
	width: 100%;
}
p {
	padding: 0 10px;
}
#page1 {
	position: relative;
	width: 100%;
	height: 100%;
	background-color: #77d47f;
}
#about {
	position: absolute;
	left: 5%;
	width: 504px;
	height: 100px;
}
#about_button {
	width: 100px;
	height: 100px;
	background-color: green;
	display: inline-block;
}
#about_text {
	transition: width 0.5s;
	height: 100px;
	width: 0;
	background-color: blue;
	display: inline-block;
	transform: translateX(-4px);
	overflow: hidden;
}
#about {
	top: 10%;
}

#about_button:hover + #about_text {
	width: 400px;
}

<html>
    <head>
	    <link rel="stylesheet" href="design.css">
	</head>
	<body>
		<div id="page1">
			<div id="about">
			    <div id="about_button"></div>
				<div id="about_text"><p>Hi, I am a Computer Science student. I am interested in designing</p></div>
			</div>
		</div>
	</body>
</html>

Answer 1

您可以使用带缩放的转换或翻译：

规模：

body {
	margin: 0;
	width: 100%;
}
p {
	padding: 0 10px;
}
#page1 {
	position: relative;
	width: 100%;
	height: 100%;
	background-color: #77d47f;
}
#about {
	position: absolute;
	left: 5%;
	width: 504px;
	height: 100px;
  overflow:hidden;
}
#about_button {
	width: 100px;
	height: 100px;
	background-color: green;
	display: inline-block;
}
#about_text {
	transition: transform 0.5s;
	height: 100px;	
  width:400px;
	background-color: blue;
	display: inline-block;
  transform-origin:0 0;
	transform: translateX(-4px) scale(0,1);
	overflow: hidden;
}
#about {
	top: 10%;
}

#about_button:hover + #about_text {
	
	transform: translateX(4px) scale(1,1);
}

<html>
    <head>
	    <link rel="stylesheet" href="design.css">
	</head>
	<body>
		<div id="page1">
			<div id="about">
			    <div id="about_button"></div>
				<div id="about_text"><p>Hi, I am a Computer Science student. I am interested in designing</p></div>
			</div>
		</div>
	</body>
</html>

翻译：

body {
	margin: 0;
	width: 100%;
}
p {
	padding: 0 10px;
}
#page1 {
	position: relative;
	width: 100%;
	height: 100%;
	background-color: #77d47f;
}
#about {
	position: absolute;
	left: 5%;
	width: 504px;
	height: 100px;
  overflow:hidden;
}
#about_button {
	width: 100px;
	height: 100px;
	background-color: green;
	display: inline-block;
  position:relative;
  z-index:1;
}
#about_text {
	transition: transform 0.5s;
	height: 100px;	
  width:400px;
	background-color: blue;
	display: inline-block;
  transform-origin:0 0;
	transform: translateX(-450px);
	overflow: hidden;
}
#about {
	top: 10%;
}

#about_button:hover + #about_text {
	
	transform: translateX(-4px);
}

<html>
    <head>
	    <link rel="stylesheet" href="design.css">
	</head>
	<body>
		<div id="page1">
			<div id="about">
			    <div id="about_button"></div>
				<div id="about_text"><p>Hi, I am a Computer Science student. I am interested in designing</p></div>
			</div>
		</div>
	</body>
</html>

Answer 2

您可以将文本作为后台的兄弟。看看小提琴。 https://jsfiddle.net/gwbdrskg/

这是HTML

<body>
        <div id="page1">
            <div id="about">
                <div id="about_button"></div>
                <div id="about_text">
        <div class="background"></div>
        <p class='text'>Hi, I am a Computer Science student. I am interested in designing</p>
        </div>
                </div>
            </div>
        </div>
    </body>

和CSS

body {
    margin: 0;
    width: 100%;
}
p {
    padding: 0 10px;
}
#page1 {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #77d47f;
}
#about {
    position: absolute;
    left: 5%;
    width: 504px;
    height: 100px;
}
#about_button {
    width: 100px;
    height: 100px;
    background-color: green;
    display: inline-block;
}
#about_text {
  display: inline-block;
  position: relative;
    width: 400px;
}
#about_text .background {
    transition: width 0.5s;
    height: 100px;
    width: 0;
    background-color: blue;
    display: inline-block;
    transform: translateX(-4px);
    overflow: hidden;
}

#about_text .text {
  position: absolute;
  top: 0;
}
#about {
    top: 10%;
}

#about_button:hover + #about_text .background {
    width: 400px;
}

显示文本作为背景宽度增加？

2 个答案: