案例——文字折叠效果

文字折叠效果

效果展示

实现过程

		<div id="char1">
			<span class="my-span ">H</span>
			<span class="my-span my-hide">e</span>
			<span class="my-span my-hide">l</span>
			<span class="my-span my-hide">l</span>
			<span class="my-span my-hide">o</span>&nbsp;

			<span class="my-span">W</span>
			<span class="my-span my-hide">o</span>
			<span class="my-span my-hide">r</span>
			<span class="my-span my-hide">l</span>
			<span class="my-span my-hide">d</span>
		</div>

填充内容

CSS布局

*{
    margin：0px；
    padding：0px;
}
body{
    background-color:aquamarine;
    100%;
    height:100vh;
}

height:100vh;——vh作用：将视口平分为100份，100vh就是占满屏幕

#char1{
    width：100px；
    height:100px;
    background-color:red;
}

给body标签加一个弹性盒子模型，#char1外边距auto，让文字在视口的中间

body{

    background-color:aquamarine;
    100%;
    height:100vh;
    dispaly：flex：
}
#char1{
    width：100px；
    height:100px;
    background-color:red;
    margin：auto；
}

【注意】
- 弹性盒模型，必须指定高度，利用弹性盒模型，是div在视口的正中间
利用border-radius使盒子倒角
```
#char1{
    border-radius：80px；
}
```
设置span样式

.my-span{
	color: white;
	font-size: 30px;
	line-height: 6.25rem;
	display: inline-block;
	/*添加样式数值在变幻时的过渡效果*/
	transition: 1s;
}

display: inline-block;设置成为行内块元素
transition: 1s;添加样式数值在变幻时的过渡效果
设置隐藏文字
```
.my-hide{
    opacity:0px;
    0px;
}
```
利用伪类选择器在鼠标经过时显示文字

#char1:hover>span.my-hide{
	opacity: 1;
	/* auto; */
	16px;/*当想要过度显示span时，不要使用width：auto；要是用确定数值的方式*/
}

- 上图为width：auto；时的效果

完整代码

html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文字折叠</title>
		<link rel="stylesheet" type="text/css" href="css/CharStyle.css" />
	</head>
	<body>
		<div id="char1">
			<span class="my-span ">H</span>
			<span class="my-span my-hide">e</span>
			<span class="my-span my-hide">l</span>
			<span class="my-span my-hide">l</span>
			<span class="my-span my-hide">o</span>&nbsp;

			<span class="my-span">W</span>
			<span class="my-span my-hide">o</span>
			<span class="my-span my-hide">r</span>
			<span class="my-span my-hide">l</span>
			<span class="my-span my-hide">d</span>
		</div>
	</body>
</html>

css代码

* {
	margin: 0px;
	padding: 0px;
}

body {
	background-color: aquamarine;
	 100%;
	height: 100vh;/* vh:将视口平分为100份，100vh就占满视口*/
	display: flex;/*弹性盒模型，必须指定高度，利用弹性盒模型，是div在视口的正中间 */
}
 #char1 {
	/* 100px;*/
	height:100px;
	background-color: red;
	margin: auto;
	border-radius: 95px;
	padding: 0 50px;
}
/*当鼠标悬浮的时候，显示隐藏的审判标签*/
#char1:hover>span.my-hide{
	opacity: 1;
	/* auto; */
	width :16px;当想要过度显示span时，不要使用width：auto；要是用确定数值的方式
}
.my-span{
	color: white;
	font-size: 30px;
	line-height: 6.25rem;
	display: inline-block;
	/* 添加样式数值在变幻时的过渡效果 */
	transition: 1s;
}
/* 隐藏字母的样式 */
.my-hide{
   opacity: 0;
   0px;
}