05、文字产生动态光影效果

来源：互联网发布：港澳台电视直播软件下载编辑：程序博客网时间：2024/06/09 16:54

<!doctype html><!--声明当前文档为html文档--><html lang="en"><!--语言为英语--><head><!--头部--><meta charset="UTF-8"><!--字符编码：utf-8国际编码  gb2312中文编码--><meta name="Keywords" content="关键词"><meta name="Description" content="描述"><title>Document</title><style>/*css样式表的衣柜*/body{background:#000;}#txt{margin:200px 300px;font:60px/120px "微软雅黑";color:rgba(255,255,255,0.3);background:-webkit-linear-gradient(-30deg,rgba(255,255,255,0) 100px,rgba(255,255,255,1) 180px,rgba(255,255,255,1) 220px,rgba(255,255,255,0) 300px) no-repeat;-webkit-background-clip:text;background-position:-500px 0px;/*transition:2s;*/}/*#txt:hover{background-position:700px 0px;}*/</style></head><body><!--身体--><div id="txt">VIP电子设计工作室！</div><script src="js/jquery.js"></script><script>/*setInterval(function(){$("#txt").animate({"background-position":"700px 0px"},2000,function(){$(this).animate({"background-position":"-500px 0px"},10)});},4000);*/var oDiv = document.getElementById("txt");var count = 0;var time = null;function auto(){time = setInterval(function(){count +=10;if (count>700){count = -500;clearInterval(time);}oDiv.style.backgroundPosition = count +"px 0px";},10);}setInterval(auto,3000);</script></body></html>

0 0