1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <style type="text/css">
  7. textarea {
  8. display: block;
  9. font-size: 1.4rem;
  10. padding: 18px 14px;
  11. color: #adadad;
  12. box-sizing: border-box;
  13. width: 80%;
  14. height: 100px;
  15. padding: 10px 14px;
  16. line-height: 1.5;
  17. -moz-box-sizing: border-box;
  18. box-sizing: border-box;
  19. border-color: #efefef;margin:50px; resize:vertical;
  20. max-height: 400px;
  21. }
  22. /* resize:horizontal 宽度可调整 */
  23. </style>
  24. </head>
  25. <body>
  26. <textarea class="comment-textarea" id="comment" placeholder="说点什么吧..." tabindex="4" ></textarea >
  27. <script type="text/javascript">
  28. !(function webpackUniversalModuleDefinition(root, factory) {
  29. if (typeof exports === 'object' && typeof module === 'object') module.exports = factory();
  30. else if (typeof define === 'function' && define.amd) define([], factory);
  31. else if (typeof exports === 'object') exports["POWERMODE"] = factory();
  32. else root["POWERMODE"] = factory()
  33. })(this, function() {
  34. return (function(modules) {
  35. var installedModules = {};
  36.  
  37. function __webpack_require__(moduleId) {
  38. if (installedModules[moduleId]) return installedModules[moduleId].exports;
  39. var module = installedModules[moduleId] = {
  40. exports: {},
  41. id: moduleId,
  42. loaded: false
  43. };
  44. modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  45. module.loaded = true;
  46. return module.exports
  47. }
  48. __webpack_require__.m = modules;
  49. __webpack_require__.c = installedModules;
  50. __webpack_require__.p = "";
  51. return __webpack_require__(0)
  52. })([function(module, exports, __webpack_require__) {
  53. 'use strict';
  54. var canvas = document.createElement('canvas');
  55. canvas.width = window.innerWidth;
  56. canvas.height = window.innerHeight;
  57. canvas.style.cssText = 'position:fixed;top:0;left:0;pointer-events:none;z-index:999999';
  58. window.addEventListener('resize', function() {
  59. canvas.width = window.innerWidth;
  60. canvas.height = window.innerHeight
  61. });
  62. document.body.appendChild(canvas);
  63. var context = canvas.getContext('2d');
  64. var particles = [];
  65. var particlePointer = 0;
  66. POWERMODE.shake = true;
  67.  
  68. function getRandom(min, max) {
  69. return Math.random() * (max - min) + min
  70. }
  71. function getColor(el) {
  72. if (POWERMODE.colorful) {
  73. var u = getRandom(0, 360);
  74. return 'hsla(' + getRandom(u - 10, u + 10) + ', 100%, ' + getRandom(50, 80) + '%, ' + 1 + ')'
  75. } else {
  76. return window.getComputedStyle(el).color
  77. }
  78. }
  79. function getCaret() {
  80. var el = document.activeElement;
  81. var bcr;
  82. if (el.tagName === 'TEXTAREA' || (el.tagName === 'INPUT' && el.getAttribute('type') === 'text')) {
  83. var offset = __webpack_require__(1)(el, el.selectionStart);
  84. bcr = el.getBoundingClientRect();
  85. return {
  86. x: offset.left + bcr.left,
  87. y: offset.top + bcr.top,
  88. color: getColor(el)
  89. }
  90. }
  91. var selection = window.getSelection();
  92. if (selection.rangeCount) {
  93. var range = selection.getRangeAt(0);
  94. var startNode = range.startContainer;
  95. if (startNode.nodeType === document.TEXT_NODE) {
  96. startNode = startNode.parentNode
  97. }
  98. bcr = range.getBoundingClientRect();
  99. return {
  100. x: bcr.left,
  101. y: bcr.top,
  102. color: getColor(startNode)
  103. }
  104. }
  105. return {
  106. x: 0,
  107. y: 0,
  108. color: 'transparent'
  109. }
  110. }
  111. function createParticle(x, y, color) {
  112. return {
  113. x: x,
  114. y: y,
  115. alpha: 1,
  116. color: color,
  117. velocity: {
  118. x: -1 + Math.random() * 2,
  119. y: -3.5 + Math.random() * 2
  120. }
  121. }
  122. }
  123. function POWERMODE() {
  124. {
  125. var caret = getCaret();
  126. var numParticles = 5 + Math.round(Math.random() * 10);
  127. while (numParticles--) {
  128. particles[particlePointer] = createParticle(caret.x, caret.y, caret.color);
  129. particlePointer = (particlePointer + 1) % 500
  130. }
  131. } {
  132. if (POWERMODE.shake) {
  133. var intensity = 1 + 2 * Math.random();
  134. var x = intensity * (Math.random() > 0.5 ? -1 : 1);
  135. var y = intensity * (Math.random() > 0.5 ? -1 : 1);
  136. document.body.style.marginLeft = x + 'px';
  137. document.body.style.marginTop = y + 'px';
  138. setTimeout(function() {
  139. document.body.style.marginLeft = '';
  140. document.body.style.marginTop = ''
  141. }, 75)
  142. }
  143. }
  144. };
  145. POWERMODE.colorful = false;
  146.  
  147. function loop() {
  148. requestAnimationFrame(loop);
  149. context.clearRect(0, 0, canvas.width, canvas.height);
  150. for (var i = 0; i < particles.length; ++i) {
  151. var particle = particles[i];
  152. if (particle.alpha <= 0.1) continue;
  153. particle.velocity.y += 0.075;
  154. particle.x += particle.velocity.x;
  155. particle.y += particle.velocity.y;
  156. particle.alpha *= 0.96;
  157. context.globalAlpha = particle.alpha;
  158. context.fillStyle = particle.color;
  159. context.fillRect(Math.round(particle.x - 1.5), Math.round(particle.y - 1.5), 3, 3)
  160. }
  161. }
  162. requestAnimationFrame(loop);
  163. module.exports = POWERMODE
  164. }, function(module, exports) {
  165. (function() {
  166. 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'];
  167. var isFirefox = window.mozInnerScreenX != null;
  168.  
  169. function getCaretCoordinates(element, position, options) {
  170. var debug = options && options.debug || false;
  171. if (debug) {
  172. var el = document.querySelector('#input-textarea-caret-position-mirror-div');
  173. if (el) {
  174. el.parentNode.removeChild(el)
  175. }
  176. }
  177. var div = document.createElement('div');
  178. div.id = 'input-textarea-caret-position-mirror-div';
  179. document.body.appendChild(div);
  180. var style = div.style;
  181. var computed = window.getComputedStyle ? getComputedStyle(element) : element.currentStyle;
  182. style.whiteSpace = 'pre-wrap';
  183. if (element.nodeName !== 'INPUT') style.wordWrap = 'break-word';
  184. style.position = 'absolute';
  185. if (!debug) style.visibility = 'hidden';
  186. properties.forEach(function(prop) {
  187. style[prop] = computed[prop]
  188. });
  189. if (isFirefox) {
  190. if (element.scrollHeight > parseInt(computed.height)) style.overflowY = 'scroll'
  191. } else {
  192. style.overflow = 'hidden'
  193. }
  194. div.textContent = element.value.substring(0, position);
  195. if (element.nodeName === 'INPUT') div.textContent = div.textContent.replace(/\s/g, "\u00a0");
  196. var span = document.createElement('span');
  197. span.textContent = element.value.substring(position) || '.';
  198. div.appendChild(span);
  199. var coordinates = {
  200. top: span.offsetTop + parseInt(computed['borderTopWidth']),
  201. left: span.offsetLeft + parseInt(computed['borderLeftWidth'])
  202. };
  203. if (debug) {
  204. span.style.backgroundColor = '#aaa'
  205. } else {
  206. document.body.removeChild(div)
  207. }
  208. return coordinates
  209. }
  210. if (typeof module != "undefined" && typeof module.exports != "undefined") {
  211. module.exports = getCaretCoordinates
  212. } else {
  213. window.getCaretCoordinates = getCaretCoordinates
  214. }
  215. }())
  216. }])
  217. });
    /* 调用*/
  218. POWERMODE.colorful = true;POWERMODE.shake = false;document.body.addEventListener('input', POWERMODE);
  219. </script>
  220. </body>
  221. </html>

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

  1. 第 21 章 CSS3 文本效果

    学习要点: 1.文本阴影 2.文本裁剪 3.文本描边 4.文本填充 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 中文本效果,其中也包含一些之前讲过的 CSS3 文本属性. 一.文本阴影 ...

  2. Cool!15个创意的 CSS3 文本效果【下篇】

    这里文章收集了15个创意的 CSS3 文本效果,所有的都是精心挑选,这些可能会增加创意的火花到你的下一个项目.其中有些是用于特定用途,而另一些则适用于多种用途.如果你想要一个精彩而又充满色彩的文字效果 ...

  3. [HTML] CSS3 文本效果

    CSS3 文本效果 CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow word-wrap 浏览器支持

  4. css3 文本效果

    CSS3 文本效果   1 CSS3 文本阴影在 CSS3 中,text-shadow 可向文本应用阴影,能够规定水平阴影.垂直阴影.模糊距离,以及阴影的颜色.text-shadow: 5px 5px ...

  5. 第七十八节,CSS3文本效果

    CSS3文本效果 一.文本阴影 CSS3提供了text-shadow文本阴影效果,这个属性在之前讲过,只是没有涉及浏览器 支持情况. 浏览器支持情况 text-shadow       Opera   ...

  6. CSS3:CSS3 文本效果

    ylbtech-CSS3:CSS3 文本效果 1.返回顶部 1. CSS3 文本效果 CSS3 文本效果 CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow bo ...

  7. HTML 学习笔记 CSS3 (文本效果)

    text-shadow 语法 text-shadow : none | <length> none | [<shadow>, ] * <shadow> 或none ...

  8. CSS3 文本效果(阴影)

    CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow box-shadow text-overflow word-wrap word-break CSS3 的文本阴 ...

  9. div模拟textarea文本域轻松实现高度自适应——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1362 一.关于tex ...

随机推荐

  1. .Net时间运算 - DateTime类,TimeSpan类

    DateTime类是.Net中用于处理时间类型数据的. 一.字段 MaxValue 表示 DateTime 的最大可能值.此字段为只读. MinValue     表示 DateTime 的最小可能值 ...

  2. android 中context的具体作用和意义

    context在android中是非常重要的一个类,此类一般用于activity之中 从字面意思来看,这是环境变量,内部实现了一些方法,但是此类也可以看做是一个句柄,用来唯一标示activity 举个 ...

  3. xUtils 源码解析

    1. 功能介绍 xUtils 一个 Android 公共库框架,主要包括四个部分:View,Db, Http, Bitmap 四个模块. View 模块主要的功能是通过注解绑定 UI,资源,事件. D ...

  4. 【摘自张宴的"实战:Nginx"】使用nginx的proxy_cache模块替代squid,缓存静态文件

    #user nobody;worker_processes 1; error_log logs/static_source.error.log;#error_log logs/error.log no ...

  5. Luogu 1445 樱花

    BZOJ 2721 唔,太菜了弄不来. 先通分:得到 $\frac{x + y}{xy} = \frac{1}{n!}$ 两边乘一下 $(x + y)n! - xy = 0$ 两边加上$(n!)^2$ ...

  6. jdbc--1 一些方法的封装

    今日内容介绍1.JDBC2.DBUtils====================================================================1 JDBC概念和数据 ...

  7. 20169219《Linux内核原理及分析》第十二周作业

    格式化字符串漏洞实验 格式化字符串攻击原理是利用格式化函数(如printf())的沿着堆栈指针向下打印的特性,通过只提供格式化字符串但不提供对应的变量,读取栈内空间的内容. 更进一步,通过将某个要攻击 ...

  8. bit byte的关系

    字 word 字节 byte 位 bit 字长是指字的长度 1字=2字节(1 word = 2 byte) 1字节=8位(1 byte = 8bit)  一个字的字长为2个字节=2*8=16 一个字节 ...

  9. 类的继承与super()的意义以即如何写一个正确的异常类

    这些东西都是我看了许多名师课程和自己研究的成果,严禁转载,这里指出了如何正确的自己定义一个异常类并看一看sun写的java的源代码话题一:子类的构造器执行是否一定会伴随着父类的构造执行? 1.this ...

  10. P与NP问题详解

    P,NP,NPC问题,这或许是众多OIer最大的误区之一. 本文就为大家详细讲解如上三个问题. 前序: 你会经常看到网上出现“这怎么做,这不是NP问题吗”.“这个只有搜了,这已经被证明是NP问题了”之 ...