动态H5

本文介绍了多种前端动画技术,包括CreateJs系列(preloadJs预加载资源文件、soundJs音频控制、easelJs图形动画、TweenJs补间动画)、PageResponse.js页面响应式框架、textillate.js文字动画效果、TweenMax.js动画相关、swiper.js等,并提供了TweenMax左右抖动、CSS3闪烁动画及圆形光环闪烁效果的具体实现案例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、CreateJs系列
  • 1、preloadJs 预加载资源文件(图片、音乐…)
  • 2、soundJs 音频控制
  • 3、easelJs 图形动画
  • 4、TweenJs 补间动画
二、jquery
三、PageResponse.js 页面响应式框架
四、textillate.js 文字动画效果

  需强依赖 lettering.js、jquery、animate.css

五、TweenMax.js 动画相关
六、swiper.js

六、demo效果例子

1、TweenMax 左右抖动

TweenMax.to(".xxx", .1, { 
    rotationZ: 1,
    rotationZ: -1,
    repeat: -1,
    ease: Bounce.easeInOut
});

2、CSS3实现闪烁动画效果【改变亮度忽明忽暗】

.className{  
    -webkit-animation: twinkling 2s infinite ease-in-out;
    animation: twinkling 2s infinite ease-in-out  
}   
@-webkit-keyframes twinkling{  
    0%{  
        opacity: 0.8;  
    }  
    100%{  
        opacity: 1;  
    }  
}  
@keyframes twinkling{  
    0%{  
        opacity: 0.8;  
    }  
    100%{  
        opacity: 1;  
    }  
}  

3、css3圆形光环闪烁效果【圆环撑开, 轻微变大】

.className{
     -webkit-animation: scaleout 1.3s infinite ease-in-out;
     animation: scaleout 1.3s infinite ease-in-out;
}

@-webkit-keyframes scaleout {
    0% { -webkit-transform: scale(1.0) }
    100% {
        -webkit-transform: scale(1.1);
        opacity: 0;
    }
}
@keyframes scaleout {
    0% {
        transform: scale(1.0);

    } 100% {
          transform: scale(1.1);
          opacity: 0;
      }
}
参考链接

1、css3各种效果样式
http://www.xwcms.net/js/list/css3sl/css3sl_1.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值