当前位置：首页 > 网页特效 > 文字效果

基于SVG和animate.css的炫酷文字动画效果

分类：文字效果日期：2024-05-14 点击(0) 评论(0)

简介

##### HTML结构
在这个SVG文字动画效果中，通过内联的SVG来制作文字和路径。并通过<g>元素对各组文字进行分组，以实现文字的不同动画效果。例如文字“Thats”的HTML代码为：

```html
<g id="Thats">
  <g>
    <path class="st0" d="M28.8,9.6v2.9h-3.1v6.9h-3.2v-6.9h-3.1V9.6H28.8z"></path>
    <path class="st0" d="M33.8,13V9.6H37v9.9h-3.2v-3.6h-2.6v3.6H28V9.6h3.2V13H33.8z"></path>
    <path class="st0" d="M36.7,19.5L40,9.6h4.9l3.3,9.9h-3.7l-0.6-1.8h-2.9l-0.6,1.8H36.7z M42.4,11.8L41,15.7h2.7L42.4,11.8z"></path>
    <path class="st0" d="M57,9.6v2.9h-3.1v6.9h-3.2v-6.9h-3.1V9.6H57z"></path>
    <path class="st0" d="M58.1,13.9V9.6h2.1v2.2L58.1,13.9z"></path>
    <path class="st0" d="M69.6,12.6h-2.4c-1.2,0-1.3,0.3-0.5,1c1.5,1.3,2.2,2.6,2.2,3.8s-0.8,2-2.2,2.2h-5.2v-2.9h2.1
      c1.3,0,1.5-0.3,0.5-1.1c-1.6-1.5-2.3-2.8-2-4s1-1.8,2.2-1.8h5.4V12.6z"></path>
  </g>
</g>   
```             
#####  CSS样式
对于SVG路径预定义了两个class类：st0和st1。它们分别用于SVG路径的填充和描边。

```html
.st0{fill:#DBD43E;}
.st1{fill:none;stroke:#DBD43E;stroke-width:3;stroke-miterlimit:10;}  
```              
对于文字的动画效果，分别对每组文字使用不同的animate.css动画。

```html
#hanSaidToFin {
  animation: fadeIn 2s ease;
  margin-left: auto;
  margin-right: auto;
  width: 300px;
  margin-top: 5%;
}
 
#Thats {
  animation: bounceInUp 1s ease;
}
 
#Not {
  animation: bounceInUp 1s 0.15s ease;
}
 
#How {
  animation: bounceInUp 1s 0.25s ease;
}
 
#The {
  animation: bounceInUp 1s 0.4s ease;
}
 
#Force {
  animation: zoomInUp 1s 0.6s ease;
}
 
#Works {
  animation: wobble 1s 1.5s ease;
}        
```        
#####  JavaScript
该特效中使用walkway.js来制作SVG边框的路径动画。walkway.js的使用方法可以参考这里。

```html
var svg = new Walkway({
    selector: 'svg',
    duration: '1000'
});
svg.draw();    
```

web299.com

基于SVG和animate.css的炫酷文字动画效果

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果