web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置：
首页
>
网页特效
>
动画效果
基于SVG的里程表数字运动模糊特效插件
分类：
动画效果
日期：
2024-05-14
点击(0)
评论(0)
演 示
免费下载
简介
在页面中引入odoo.js文件。 ```html <script type="text/javascript" src="js/odoo.js"></script> ``` ##### HTML结构 使用一个div作为里程表的容器。 ```html <div class="js-odoo"></div> ``` ##### CSS样式 你可以自定义数字的字体和颜色等属性。 ```html .js-odoo { font-size: 60px; font-family: Roboto; fill: #fff; text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); } ``` ##### 初始化插件 可以通过下面的方法来初始化odoo.js插件。 ```html odoo.default({ el:'.js-odoo',value:'￥68,123,000' }) ``` 也可以在初始化时修改它默认的配置参数。 ```html odoo.default({ el: '.js-odoo', value: '£42,000,000', lineHeight: 1.35, letterSpacing: 1, animationDelay: 100, letterAnimationDelay: 100 }); ``` 如果要取消里程表动画，可以调用cancel()方法。 ```html const cancel = odoo.default({ el: '.js-odoo', value: '£42,000,000' }); cancel(); ```
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告
