案例——文字折叠效果
程序员文章站
2022-05-31 20:54:35
文字折叠效果 1. 效果展示 2. 实现过程 ~~~html H e l l o W o r l d ~~~ 填充内容 CSS布局 ~~~css { margin：0px； padding：0px; } body{ background color:aquamarine; width:100%; h ......
文字折叠效果
- 效果展示
-
实现过程
-
<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> <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; width:100%; height:100vh; }height:100vh;——vh作用：将视口平分为100份，100vh就是占满屏幕
-
#char1{ width：100px； height:100px; background-color:red; } 给body标签加一个弹性盒子模型，#char1外边距auto，让文字在视口的中间
body{ background-color:aquamarine; width: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; width:0px; }利用伪类选择器在鼠标经过时显示文字
#char1:hover>span.my-hide{ opacity: 1; /* width:auto; */ width: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> <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; width: 100%; height: 100vh;/* vh:将视口平分为100份，100vh就占满视口*/ display: flex;/*弹性盒模型，必须指定高度，利用弹性盒模型，是div在视口的正中间 */ } #char1 { /*width: 100px;*/ height:100px; background-color: red; margin: auto; border-radius: 95px; padding: 0 50px; } /*当鼠标悬浮的时候，显示隐藏的审判标签*/ #char1:hover>span.my-hide{ opacity: 1; /* width: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; width:0px; }