帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索：
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置：
首页
»
精选常用代码
» svg时间显示牌效果
svg时间显示牌效果
浏览：914次
-
评论：1次
-
发布时间：2020-02-27
Html
Css
Js
svg { height:100%; width:100%; } .words { font-size:22vh; font-weight:bold; text-transform:uppercase; fill:none; stroke-width:4px; stroke-dasharray:90,310; animation-name:drawing; animation-duration:8s; animation-iteration-count:infinite; animation-timing-function:linear; } .words-1 { stroke:deepskyblue; text-shadow:0 0 50px deepskyblue; animation-delay:-2s; } .words-2 { stroke:lightseagreen; text-shadow:0 0 50px lightseagreen; animation-delay:-4s; } .words-3 { stroke:orange; text-shadow:0 0 50px orange; animation-delay:-6s; } .words-4 { stroke:purple; text-shadow:0 0 50px purple; animation-delay:-8s; } @keyframes drawing { 100% { stroke-dashoffset:-400; } }
function showtime() { var noatime = new Date(); var h = noatime.getHours(), m = noatime.getMinutes(), s = noatime.getSeconds(); h = checktime(h); m = checktime(m); s = checktime(s); return h + ":" + m + ":" + s; } function checktime(x) { if (x < 10) { x = "0" + x; } return x; } var div1 = document.getElementsByTagName("text"); setInterval(function() { for (var i in div1) { div1[i].innerHTML = showtime(); } }, 1000);
↑上面代码改变，会自动显示代码结果
jQuery调用版本：
1.11.3
<!doctype html><html><head><meta charset="utf-8"><title>svg时间显示牌效果-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明：注册即送10牛币，每日签到可获得5牛币，成为VIP会员可永久免牛币下载！
充值积分
充值会员
更多说明»
代码描述：svg动态显示当前时间，态霓虹灯文字时钟
原生js获取本地时间信息，css3 svg实现动态霓虹灯文字时钟特效。
打字机打印每个文字效果
上传图片转换base64并预览效果
讨论这个常用代码（1）
回答他人问题或分享心得会奖励牛币
Lv2 入门
qq***75
2020年03月17日
特效看着不错。
回复
文明上网，理性发言！ 😉 阿里云幸运券，
戳我领取
发表评论
提交回复
我的积分余额：
0
已下载次数：
914
所需牛币：
5
开始下载
牛币获取：
签到、评论、充值
» 在线充值
（10牛币=1元）
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值
鄂公网安备 42090202000075号 - 鄂ICP备2021002952号-1
微博登录
QQ登录
微信扫码登录
