折叠文字效果
原始图与效果图
在css3中新增加了许多样式,可玩非常高,下面我将上述文字折叠的动态分步骤详细的展示出来
首先我们要从三个方面编写代码。
1.主题框架
首先用一个大的盒子包裹住里面的若干个span标签,在每个是上述标签里面分别写上文本内容,具体可根据具体情况写入。
代码如下
2给框架写入样式
样式写入可以创建一 个 .css文件,在里面写css的样式,如此实现了结构(HTML)、
样式(CSS)、行为(JavaScript)三分离。之后用 link 标签引入即可。
代码如下
上述实现的动态效果,是transform和box-shadow两个属性,并设置了属性值实现的。
在写入属性及其属性值时,要了解transform属性具体指的是通过其可以完成简单的动画效果。
基本上在页面的动态效果都是可以通过合理运用transform来设置。下面是我整理关于transtion相关的知识点
transition-property:进行过渡的css属性
transition-duration:time(s)
transition-timing-function:
linear:匀速过渡。
ease:平滑过渡。
ease-in:由慢到快。
ease-out:由快到慢。
ease-in-out:由慢到快再到慢。
cubic-bezier(<number>, <number>, <number>, <number>):特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内
transition-delay:time(s); 延迟多长时间动画开始执行
希望以上展示的知识对你有所帮助,能解决你某些疑惑的地方