foolyoghurt/animated_ellipsis.css

## animated_ellipsis.css
/* animated ellipsis */
.loading:after {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  animation: ellipsis 2s infinite;
  content: "\2026"; /* ascii code for the ellipsis character */
}
@keyframes ellipsis {
  from {
    width: 2px;
  }
  to {
    width: 15px;
  }
}

## blur-text.css
.blurry-text {
  color: transparent;
  text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

## debug_with_outline.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .outer {
        height: 100px;
        widht: 100px;
    }
    .inner {
        height: 50px;
        width: 50px;
    }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
    </div>
</body>
<script>
[].forEach.call(document.querySelectorAll("*"), function(a) {
    a.style.outline = "1px solid #" + (~~(Math.random() * (1 << 24))).toString(16);
});
</script>

</html>

## input_file_button.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .fileinput {
      position: relative;
    }
    .fileinput-btn {
      width: 60px;
      padding: 3px;
      background: #428BCA;
      border: 1px solid #357EBD;
      border-radius: 4px;
      text-align: center;
      line-height: 25px;
      color: #fff;
      font-size: 1.0em;
      cursor: pointer;
    }
    .fileinput-btn:hover {
      background-color: #3071A9;
      border-color: #285E8E;
    }
    .fileinput-file {
      visibility: hidden;
    }
    .fileinput-filename {
      display: inline-block;
      position: absolute;
      top: 0;
      left: 75px;
      height: 25px;
      padding: 3px;
      line-height: 25px;
    }
  </style>
</head>

<body>
  <div class="fileinput">
    <button class="fileinput-btn">上传</button>
    <input class="fileinput-file" type="file">
    <div class="fileinput-filename"></div>
  </div>

  <script>
    var basename = function(path) {
      return path.split(/[/\\]/).pop();
    };
    document.querySelector('.fileinput-btn').addEventListener('click', function(e) {
      e.preventDefault();
      var inputEl = this.nextElementSibling;
      inputEl.dispatchEvent(new Event('click'));
    });
    document.querySelector('.fileinput-file').addEventListener('change', function(e) {
      var filenameEl = this.nextElementSibling;
      filenameEl.textContent = basename(this.value);
    });
  </script>
</body>

</html>
	/* animated ellipsis */
	.loading:after {
	overflow: hidden;
	display: inline-block;
	vertical-align: bottom;
	animation: ellipsis 2s infinite;
	content: "\2026"; /* ascii code for the ellipsis character */
	}
	@keyframes ellipsis {
	from {
	width: 2px;
	}
	to {
	width: 15px;
	}
	}
	.blurry-text {
	color: transparent;
	text-shadow: 0 0 5px rgba(0,0,0,0.5);
	}
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.outer {
	height: 100px;
	widht: 100px;
	}
	.inner {
	height: 50px;
	width: 50px;
	}
	</style>
	</head>

	<body>
	<div class="outer">
	<div class="inner"></div>
	<div class="inner"></div>
	<div class="inner"></div>
	</div>
	</body>
	<script>
	[].forEach.call(document.querySelectorAll("*"), function(a) {
	a.style.outline = "1px solid #" + (~~(Math.random() * (1 << 24))).toString(16);
	});
	</script>

	</html>