js实现多彩中文文字飘动浮动动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：js实现多彩中文文字飘动浮动动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>

        * {
            margin: 0;
            padding: 0;
        }
        html {
            font-size: 20px;
        }
        body {
            background: #000;
        }
        p {
            width: 80%;
            margin: 100px auto 30px;
            line-height: 1.5;
        }
        button {
            width: 150px;
            height: 50px;
            background: orange;
            outline: none;
            border: none;
            cursor: pointer;
            border-radius: 10px;
            margin: 0 auto;
            display: block;
            font-size: 20px;

        }
    </style>
</head>

<body>
    <article>
        <p class="text" id="text">
            你说帘外海棠，锦屏鸳鸯；后来庭院春深，咫尺画堂。你说笛声如诉，费尽思量；后来茶烟尚绿，人影茫茫。你说可人如玉，与子偕臧；后来长亭远望，夜色微凉。你说霞染天光，陌上花开与谁享；后来烟笼柳暗，湖心水动影无双。你说彼岸灯火，心之所向；后来渔舟晚唱，烟雨彷徨。你说水静莲香，惠风和畅；后来云遮薄月，清露如霜。你说幽窗棋罢，再吐衷肠；后来风卷孤松，雾漫山冈。你说红袖佯嗔，秋波流转思张敞；后来黛眉长敛，春色飘零别阮郎。你说暗香浮动，刹那光芒；后来玉殒琼碎，疏影横窗。你说良辰美景，乘兴独往；后来红尘紫陌，雪落太行。你说赋尽高唐，三生石上；后来君居淄右，妾家河阳。你说玉楼朱颜，飞月流觞迎客棹；后来幽谷居士，枕琴听雨卧禅房。你说高山流水，客答春江；后来章台游冶，系马垂杨。你说锦瑟韶光，华灯幢幢；后来荼蘼开至，青苔满墙。你说天地玄黄，风月琳琅；后来月斜江上，云淡天长。
        </p>
        <button id="btn" ele-range>放松一下</button>
    </article>
    <script  type="text/javascript" charset="utf-8">

  function Neontext(id) {
  	var ele = document.getElementById(id),
  		eletext = ele.innerText,
  		arr = eletext.split(""),
  		_this = this;
  	this.resetTime = 10; //最大值100
  	this.color = [
  		'#f44336', '#e91e63', '#9c27b0',
  		'#673ab7', '#3f51b5', '#2196f3',
  		'#03a9f4', '#00bcd4', '#009688',
  		'#4caf50', '#8bc34a', '#cddc39',
  		'#ffeb3b', '#ffc107', '#ff9800',
  		'#ff5722', '#795548', '#9e9e9e',
  		'#607d8b'
  	];
  	this.randomColor = function() {
  		var colorIndex = Math.floor(this.color.length * Math.random());
  		return this.color[colorIndex];
  	}
  	
  	this.posRangencala = function(){
  		return ele.hasAttribute("ele-range")?{
  			minRange: {
  				x: ele.getBoundingClientRect().left,
  				y: ele.getBoundingClientRect().top
  			},
  			maxRange: {
  				x: ele.getBoundingClientRect().right,
  				y: ele.getBoundingClientRect().bottom
  			}
  		}:{
  			minRange: {
  				x: 0,
  				y: 0
  			},
  			maxRange: {
  				x: document.documentElement.clientWidth,
  				y: document.documentElement.clientHeight
  			}
  		}
  	}

  	this.spanArr = (function() {
  		ele.innerHTML = "";
  		var spanArr = [];
  		arr.forEach(function(value, index) {
  			var spanDom = document.createElement("span");
  			spanDom.style.display = "inline-block";
  			spanDom.innerHTML = value;
  			spanDom.style.position = "relative";
  			spanDom.style.color = _this.randomColor();
  			spanDom.own = {
  				pos: {
  					x: 0,
  					y: 0
  				},
  				ran: {
  					x: -.5 + Math.random(),
  					y: -.5 + Math.random()
  				},
  				speed: {
  					x: 1,
  					y: 1
  				},
  				dir: {
  					x: 1,
  					y: 1
  				}
  			}
  			ele.appendChild(spanDom);
  			spanArr.push(spanDom);
  		}) 		
  		return spanArr;
  	})()
  	this.spanOrigin = function() {
  		this.spanArr.forEach(function(value, index) {
  			value.own.realPos = {
  				minx: value.getBoundingClientRect().left,
  				maxx: value.getBoundingClientRect().right,
  				miny: value.getBoundingClientRect().top,
  				maxy: value.getBoundingClientRect().bottom
  			}
  		})
  		this.posRangen = this.posRangencala();.........完整代码请登录后点击上方下载按钮下载查看