收集的一些动画特效和代码段-白红宇

收集的一些动画特效和代码段

阅读量：6134 次

发布时间：2019-06-21

本文共 3103 字，大约阅读时间需要 10 分钟。

平时看到比较好的动画或特效就收集着，有时间就研究研究。有就更新。。。

1. CSS3 Tencent QQ Logo：

代码段：

1.日期格式

简单使用ToString()来格式化datetime.now日期的显示。

如：

DateTime.Now.ToString("yyyy-MM-dd")

得到的结果是：

2013-01-22

也可以格式化为毫秒

string s = DataTime.Now.ToString("yyyy-MM-dd HH:mm:ss:fff");

这是 Jose 在 CoderWall 分享的一个：在浏览器地址栏中输入一行代码：data:text/html, <html contenteditable> ，回车即可把浏览器变临时编辑器。

data:text/html, <html contenteditable>

注：contenteditable 是 HTML5 的一个属性，所以这个小技巧只能用于支持该属性的浏览器。

在此基础上，又有网友定制了自己的编辑器：

　　a) 　有背景颜色，居中，大字体：

　　data:text/html, <html><head><link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><style type="text/css"> html { font-family: "Open Sans" } * { -webkit-transition: all linear 1s; }</style><script>window.οnlοad=function(){

var e=false;var t=0;setInterval(function(){

if(!e){t=Math.round(Math.max(0,t-Math.max(t/3,1)))}var n=(255-t*2).toString(16);document.body.style.backgroundColor="#ff"+n+""+n},1e3);var n=null;document.οnkeydοwn=function(){

t=Math.min(128,t+2);e=true;clearTimeout(n);n=setTimeout(function(){

e=false},1500)}}</script></head><body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;">

　　b) 　全屏，大字体

　　data:text/html, <textarea style="font-size: 1.5em; width: 100%; height: 100%; border: none; outline: none" autofocus />

　　c) 居中，大字体

　　data:text/html, <body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;">

　　d) 加标题，居中，大字体

　　data:text/html, <title>Text Editor</title><body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;">

　　e) 全屏，utf-8格式，小字体

　　data:text/html;charset=utf-8, <html contenteditable>

　　f) 居中，加标题，utf-8格式，大字体 (个人比较喜欢)

　　data:text/html;charset=utf-8, <title>TextEditor</title><body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;" spellcheck="false">

　　g) 居中，加标题，utf-8格式，大字体

　　data:text/html;charset=utf-8, <title>TextEditor</title><body contenteditable style="font-size:2rem;font-family:monaco;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;" spellcheck="false"><h1>Text Editor</h1><p>Start Here.

　　h) 全屏,不是编辑器，直接输出body中的内容

　　data:text/html, body{font-family:helvetica;font-size:15px;line-height:22px;color:#666;width:600px;margin:40px auto;background:#FFF;border:1px solid #DADADA;padding:50px; }

　　i) 全屏，加图标，小字体

　　data:text/html, <link rel="shortcut icon" href="http://g.etfv.co/http://www.sublimetext.com"/><html contenteditable>

　　j) 居中，加标题，utf-8格式，黑底绿字，大字体，将代码添加到记事本，再改后缀名，用Chrome打开即可。

　　<!DOCTYPE html><head><meta charset="utf-8"><title>TextEditorLocal</title><script>window.οnlοad=function(){

f1()}; function f1(){

a=window.localStorage['e'];if(a) document.body.innerHTML=a};function f2(t,e){

if(e.keyCode==13){window.localStorage['e']=t.innerHTML}}</script><body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;word-wrap:break-word;background:black;color:green;" spellcheck="false" onkeypress="f2(this,event);"></body></html>

转载于:https://www.cnblogs.com/ludard/archive/2013/01/09/2852952.html

你可能感兴趣的文章