当前位置：首页 > 网页特效 > 图像/媒体

17种基于mo.js制作的炫酷图标动画特效

分类：图像/媒体日期：2024-05-14 点击(1) 评论(0)

简介

##### HTML结构
图标的HTML结构使用一个按钮来包裹一个Font Awesome图标。

```html
<button class="icobutton icobutton--thumbs-up">
  <span class="fa fa-thumbs-up"></span>
</button>
```
#####  制作图标动画
然后你就可以通过mo.js提供的方法来制作动画特效。

```html
var el = document.querySelector('.icobutton'),
  elSpan = el.querySelector('span'),
  // mo.js timeline obj
  timeline = new mojs.Timeline(),
 
  // tweens for the animation:
 
  // burst animation
  tween1 = new mojs.Burst({
    parent: el,
    duration: 1500,
    shape : 'circle',
    fill : [ '#988ADE', '#DE8AA0', '#8AAEDE', '#8ADEAD', '#DEC58A', '#8AD1DE' ],
    x: '50%',
    y: '50%',
    opacity: 0.6,
    childOptions: { radius: {20:0} },
    radius: {40:120},
    count: 6,
    isSwirl: true,
    isRunLess: true,
    easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
  }),
  // ring animation
  tween2 = new mojs.Transit({
    parent: el,
    duration: 750,
    type: 'circle',
    radius: {0: 50},
    fill: 'transparent',
    stroke: '#988ADE',
    strokeWidth: {15:0},
    opacity: 0.6,
    x: '50%',     
    y: '50%',
    isRunLess: true,
    easing: mojs.easing.bezier(0, 1, 0.5, 1)
  }),
  // icon scale animation
  tween3 = new mojs.Tween({
    duration : 900,
    onUpdate: function(progress) {
      var scaleProgress = scaleCurve4(progress);
      elSpan.style.WebkitTransform = elSpan.style.transform 
            = 'scale3d(' + scaleProgress + ',' + scaleProgress + ',1)';
    }
  });
 
// add tweens to timeline:
timeline.add(tween1, tween2, tween3);
 
// when clicking the button start the timeline/animation:
el.addEventListener('mouseenter', function() {
  timeline.start();
});        
```

web299.com

17种基于mo.js制作的炫酷图标动画特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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