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 ...
随机推荐
- .Net时间运算 - DateTime类,TimeSpan类
DateTime类是.Net中用于处理时间类型数据的. 一.字段 MaxValue 表示 DateTime 的最大可能值.此字段为只读. MinValue 表示 DateTime 的最小可能值 ...
- android 中context的具体作用和意义
context在android中是非常重要的一个类,此类一般用于activity之中 从字面意思来看,这是环境变量,内部实现了一些方法,但是此类也可以看做是一个句柄,用来唯一标示activity 举个 ...
- xUtils 源码解析
1. 功能介绍 xUtils 一个 Android 公共库框架,主要包括四个部分:View,Db, Http, Bitmap 四个模块. View 模块主要的功能是通过注解绑定 UI,资源,事件. D ...
- 【摘自张宴的"实战:Nginx"】使用nginx的proxy_cache模块替代squid,缓存静态文件
#user nobody;worker_processes 1; error_log logs/static_source.error.log;#error_log logs/error.log no ...
- Luogu 1445 樱花
BZOJ 2721 唔,太菜了弄不来. 先通分:得到 $\frac{x + y}{xy} = \frac{1}{n!}$ 两边乘一下 $(x + y)n! - xy = 0$ 两边加上$(n!)^2$ ...
- jdbc--1 一些方法的封装
今日内容介绍1.JDBC2.DBUtils====================================================================1 JDBC概念和数据 ...
- 20169219《Linux内核原理及分析》第十二周作业
格式化字符串漏洞实验 格式化字符串攻击原理是利用格式化函数(如printf())的沿着堆栈指针向下打印的特性,通过只提供格式化字符串但不提供对应的变量,读取栈内空间的内容. 更进一步,通过将某个要攻击 ...
- bit byte的关系
字 word 字节 byte 位 bit 字长是指字的长度 1字=2字节(1 word = 2 byte) 1字节=8位(1 byte = 8bit) 一个字的字长为2个字节=2*8=16 一个字节 ...
- 类的继承与super()的意义以即如何写一个正确的异常类
这些东西都是我看了许多名师课程和自己研究的成果,严禁转载,这里指出了如何正确的自己定义一个异常类并看一看sun写的java的源代码话题一:子类的构造器执行是否一定会伴随着父类的构造执行? 1.this ...
- P与NP问题详解
P,NP,NPC问题,这或许是众多OIer最大的误区之一. 本文就为大家详细讲解如上三个问题. 前序: 你会经常看到网上出现“这怎么做,这不是NP问题吗”.“这个只有搜了,这已经被证明是NP问题了”之 ...