css3文本域焦点烟花效果

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <title>Document</title>

   <style type="text/css">

     textarea {

       display: block;

       font-size: 1.4rem;

       padding: 18px 14px;

       color: #adadad;

       box-sizing: border-box;

       width: 80%;

       height: 100px;

       padding: 10px 14px;

       line-height: 1.5;

       -moz-box-sizing: border-box;

       box-sizing: border-box;

       border-color: #efefef;margin:50px; resize:vertical;

       max-height: 400px;

   }

   /*  resize:horizontal 宽度可调整 */

   </style>

 </head>

 <body>

  <textarea class="comment-textarea"  id="comment" placeholder="说点什么吧..." tabindex="4" ></textarea >

  <script type="text/javascript">

   !(function webpackUniversalModuleDefinition(root, factory) {

   if (typeof exports === 'object' && typeof module === 'object') module.exports = factory();

   else if (typeof define === 'function' && define.amd) define([], factory);

   else if (typeof exports === 'object') exports["POWERMODE"] = factory();

   else root["POWERMODE"] = factory()

 })(this, function() {

   return (function(modules) {

     var installedModules = {};

     function __webpack_require__(moduleId) {

       if (installedModules[moduleId]) return installedModules[moduleId].exports;

       var module = installedModules[moduleId] = {

         exports: {},

         id: moduleId,

         loaded: false

       };

       modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

       module.loaded = true;

       return module.exports

     }

     __webpack_require__.m = modules;

     __webpack_require__.c = installedModules;

     __webpack_require__.p = "";

     return __webpack_require__(0)

   })([function(module, exports, __webpack_require__) {

     'use strict';

     var canvas = document.createElement('canvas');

     canvas.width = window.innerWidth;

     canvas.height = window.innerHeight;

     canvas.style.cssText = 'position:fixed;top:0;left:0;pointer-events:none;z-index:999999';

     window.addEventListener('resize', function() {

       canvas.width = window.innerWidth;

       canvas.height = window.innerHeight

     });

     document.body.appendChild(canvas);

     var context = canvas.getContext('2d');

     var particles = [];

     var particlePointer = 0;

     POWERMODE.shake = true;

     function getRandom(min, max) {

       return Math.random() * (max - min) + min

     }

     function getColor(el) {

       if (POWERMODE.colorful) {

         var u = getRandom(0, 360);

         return 'hsla(' + getRandom(u - 10, u + 10) + ', 100%, ' + getRandom(50, 80) + '%, ' + 1 + ')'

       } else {

         return window.getComputedStyle(el).color

       }

     }

     function getCaret() {

       var el = document.activeElement;

       var bcr;

       if (el.tagName === 'TEXTAREA' || (el.tagName === 'INPUT' && el.getAttribute('type') === 'text')) {

         var offset = __webpack_require__(1)(el, el.selectionStart);

         bcr = el.getBoundingClientRect();

         return {

           x: offset.left + bcr.left,

           y: offset.top + bcr.top,

           color: getColor(el)

         }

       }

       var selection = window.getSelection();

       if (selection.rangeCount) {

         var range = selection.getRangeAt(0);

         var startNode = range.startContainer;

         if (startNode.nodeType === document.TEXT_NODE) {

           startNode = startNode.parentNode

         }

         bcr = range.getBoundingClientRect();

         return {

           x: bcr.left,

           y: bcr.top,

           color: getColor(startNode)

         }

       }

       return {

         x: 0,

         y: 0,

         color: 'transparent'

       }

     }

     function createParticle(x, y, color) {

       return {

         x: x,

         y: y,

         alpha: 1,

         color: color,

         velocity: {

           x: -1 + Math.random() * 2,

           y: -3.5 + Math.random() * 2

         }

       }

     }

     function POWERMODE() {

       {

         var caret = getCaret();

         var numParticles = 5 + Math.round(Math.random() * 10);

         while (numParticles--) {

           particles[particlePointer] = createParticle(caret.x, caret.y, caret.color);

           particlePointer = (particlePointer + 1) % 500

         }

       } {

         if (POWERMODE.shake) {

           var intensity = 1 + 2 * Math.random();

           var x = intensity * (Math.random() > 0.5 ? -1 : 1);

           var y = intensity * (Math.random() > 0.5 ? -1 : 1);

           document.body.style.marginLeft = x + 'px';

           document.body.style.marginTop = y + 'px';

           setTimeout(function() {

             document.body.style.marginLeft = '';

             document.body.style.marginTop = ''

           }, 75)

         }

       }

     };

     POWERMODE.colorful = false;

     function loop() {

       requestAnimationFrame(loop);

       context.clearRect(0, 0, canvas.width, canvas.height);

       for (var i = 0; i < particles.length; ++i) {

         var particle = particles[i];

         if (particle.alpha <= 0.1) continue;

         particle.velocity.y += 0.075;

         particle.x += particle.velocity.x;

         particle.y += particle.velocity.y;

         particle.alpha *= 0.96;

         context.globalAlpha = particle.alpha;

         context.fillStyle = particle.color;

         context.fillRect(Math.round(particle.x - 1.5), Math.round(particle.y - 1.5), 3, 3)

       }

     }

     requestAnimationFrame(loop);

     module.exports = POWERMODE

   }, function(module, exports) {

     (function() {

       var properties = ['direction', 'boxSizing', 'width', 'height', 'overflowX', 'overflowY', 'borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth', 'borderStyle', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'fontStyle', 'fontVariant', 'fontWeight', 'fontStretch', 'fontSize', 'fontSizeAdjust', 'lineHeight', 'fontFamily', 'textAlign', 'textTransform', 'textIndent', 'textDecoration', 'letterSpacing', 'wordSpacing', 'tabSize', 'MozTabSize'];

       var isFirefox = window.mozInnerScreenX != null;

       function getCaretCoordinates(element, position, options) {

         var debug = options && options.debug || false;

         if (debug) {

           var el = document.querySelector('#input-textarea-caret-position-mirror-div');

           if (el) {

             el.parentNode.removeChild(el)

           }

         }

         var div = document.createElement('div');

         div.id = 'input-textarea-caret-position-mirror-div';

         document.body.appendChild(div);

         var style = div.style;

         var computed = window.getComputedStyle ? getComputedStyle(element) : element.currentStyle;

         style.whiteSpace = 'pre-wrap';

         if (element.nodeName !== 'INPUT') style.wordWrap = 'break-word';

         style.position = 'absolute';

         if (!debug) style.visibility = 'hidden';

         properties.forEach(function(prop) {

           style[prop] = computed[prop]

         });

         if (isFirefox) {

           if (element.scrollHeight > parseInt(computed.height)) style.overflowY = 'scroll'

         } else {

           style.overflow = 'hidden'

         }

         div.textContent = element.value.substring(0, position);

         if (element.nodeName === 'INPUT') div.textContent = div.textContent.replace(/\s/g, "\u00a0");

         var span = document.createElement('span');

         span.textContent = element.value.substring(position) || '.';

         div.appendChild(span);

         var coordinates = {

           top: span.offsetTop + parseInt(computed['borderTopWidth']),

           left: span.offsetLeft + parseInt(computed['borderLeftWidth'])

         };

         if (debug) {

           span.style.backgroundColor = '#aaa'

         } else {

           document.body.removeChild(div)

         }

         return coordinates

       }

       if (typeof module != "undefined" && typeof module.exports != "undefined") {

         module.exports = getCaretCoordinates

       } else {

         window.getCaretCoordinates = getCaretCoordinates

       }

     }())

   }])

 });
     /* 调用*/

  POWERMODE.colorful = true;POWERMODE.shake = false;document.body.addEventListener('input', POWERMODE);

  </script>

 </body>

 </html>

css3文本域焦点烟花效果的更多相关文章

第 21 章 CSS3 文本效果
学习要点: 1.文本阴影 2.文本裁剪 3.文本描边 4.文本填充主讲教师:李炎恢本章主要探讨 HTML5 中 CSS3 中文本效果,其中也包含一些之前讲过的 CSS3 文本属性. 一．文本阴影 ...
Cool！15个创意的 CSS3 文本效果【下篇】
这里文章收集了15个创意的 CSS3 文本效果,所有的都是精心挑选,这些可能会增加创意的火花到你的下一个项目.其中有些是用于特定用途,而另一些则适用于多种用途.如果你想要一个精彩而又充满色彩的文字效果 ...
[HTML] CSS3 文本效果
CSS3 文本效果 CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow word-wrap 浏览器支持
css3 文本效果
CSS3 文本效果 1 CSS3 文本阴影在 CSS3 中,text-shadow 可向文本应用阴影,能够规定水平阴影.垂直阴影.模糊距离,以及阴影的颜色.text-shadow: 5px 5px ...
第七十八节，CSS3文本效果
CSS3文本效果一．文本阴影 CSS3提供了text-shadow文本阴影效果,这个属性在之前讲过,只是没有涉及浏览器支持情况. 浏览器支持情况 text-shadow Opera ...
CSS3：CSS3 文本效果
ylbtech-CSS3:CSS3 文本效果 1.返回顶部 1. CSS3 文本效果 CSS3 文本效果 CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow bo ...
HTML 学习笔记 CSS3 (文本效果)
text-shadow 语法 text-shadow : none | <length> none | [<shadow>, ] * <shadow> 或none ...
CSS3 文本效果(阴影)
CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow box-shadow text-overflow word-wrap word-break CSS3 的文本阴 ...
div模拟textarea文本域轻松实现高度自适应——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1362 一.关于tex ...

随机推荐

MySQL学习笔记之一---字符编码和字符集
前言: 一般来说,出现中文乱码,都是客户端和服务端字符集不匹配导致的原因. (默认未指定字符集创建的数据库表,都是latinl字符集, 强烈建议使用utf8字符集) 保证不出现乱码的思想:保证客户 ...
App.CSharp.Grid的ICells接口
using System;using System.Collections.Generic;using System.Text;using System.Drawing;using System.Wi ...
mysql in 方法查询按照 in队列里的顺序排序
String sql ' GROUP BY comm " + "order by field(comm,?,?,?,?,?,?,?,?)"; stmt = conn.pr ...
Codeforces 1136F Cooperative Game (神仙题)
这种题就是难者不会,会者不难. 博客讲的很详细了代码: #include <bits/stdc++.h> using namespace std; string s; int read( ...
ROS探索总结（六）——使用smartcar进行仿真
转自:https://www.ncnynl.com/archives/201609/843.html 总结: 一.机器人描述文件三个: 机器人主体body文件: gazebo属性文件: 主文件 sma ...
c++的单例模式及c++11对单例模式的优化
单例模式单例模式,可以说设计模式中最常应用的一种模式了,据说也是面试官最喜欢的题目.但是如果没有学过设计模式的人,可能不会想到要去应用单例模式,面对单例模式适用的情况,可能会优先考虑使用全局或者静态 ...
Struts2 看1
Struts2部分 1. JavaEE软件三层结构和MVC的区别? JavaEE软件三层机构是由sun公司提供JavaEE开发规范的:Web层(表现层).业务逻辑层.数据持久层.[其中WEB层会使用前 ...
C语言-郝斌笔记-004判断是否为回文数
判断是否为回文数 # include <stdio.h> int main(void) { int val; //存放待判断的数字 int m; ; printf("请输入您需要 ...
hdu5521 Meeting
传送门题目 Bessie and her friend Elsie decide to have a meeting. However, after Farmer John decorated hi ...
XML DTD语法详解
XML DTD详解 XML DTD详解前情提要与本文内容介绍前面的两篇XML相关博文: 第一篇是介绍格式正规的XML: 格式正规的XML:语法属性实体处理指令样式单 CDATA节第二 ...

css3文本域焦点烟花效果

css3文本域焦点烟花效果的更多相关文章

随机推荐

热门专题