css好玩的动态

折叠文字效果

  原始图与效果图

 

在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); 延迟多长时间动画开始执行

希望以上展示的知识对你有所帮助，能解决你某些疑惑的地方