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 ...

随机推荐

scrapy(1)安装
用的是python3.6 pip install -i https://pypi.douban.com/simple/ scrapy scrapy startproject Article scrap ...
spring-boot 热加载实现替换Jrebel
导读: 本文主要说说,在玩spring-boot时,我们经常要遇到重启服务这种浪费时间的事情,为了割掉这个痛点,我们一般有2中方式实现. 一个是springload , 另外一个是 spring-bo ...
【总结整理】webGIS须知
一般WebGIS项目中,前端展示数据的流程基本是先做数据入库.服务发布.然后前端调用展示 a.动态出图可以使用WMS中的GetMap请求. b.矢量查询可以使用WFS中的GetFeature请求. c ...
开发工具 idea 激活方法
1. 到网站 http://idea.lanyus.com/ 获取注册码. 2.填入下面的license server: http://intellij.mandroid.cn/ http://ide ...
Elasticsearch - glossary
From http://www.elasticsearch.org/guide/en/elasticsearch/reference/current/glossary.html glossary of ...
tarjan进阶
一.边双连通分量定义若一个无向图中的去掉任意一条边都不会改变此图的连通性,即不存在桥,则称作边双连通图.一个无向图中的每一个极大边双连通子图称作此无向图的边双连通分量. 实际求法和强连通分量差不多 ...
Luogu 3822 [NOI2017]整数
看懂了的大佬的题解.(这个id太巨了,找不到他的blog) 考虑直接暴力算进位均摊复杂度是对的,证明戳这里. 但是题目要求我们支持一个减操作,这就相当于返回之前操作前的结果,这对于这种均摊的复杂度的东 ...
Inheritance with EF Code First: Part 3 – Table per Concrete Type (TPC)
Inheritance with EF Code First: Part 3 – Table per Concrete Type (TPC) This is the third (and last) ...
hive和sequoiadb对接的问题
使用hive和spark对接的时候,当两个表做JOIN的时候,如果表的数据量很大一定要做 set hive.auto.convert.join=false
C++--VECTOR的简单应用
在c++中,vector是一个十分有用的容器,下面对这个容器做一下总结. 1 基本操作 (1)头文件#include<vector>. (2)创建vector对象,vector<in ...

css3文本域焦点烟花效果

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

随机推荐

热门专题