zoukankan      html  css  js  c++  java
  • 收集的一些动画特效和代码段

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

    1. CSS3 Tencent QQ Logo:

    http://download.alloyteam.com/demo/css3-tencent-qq-logo-advanced/

    代码段:

    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");

    2.一行代码,浏览器变临时编辑器

    这是 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.onload=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.onkeydown=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-60rem;margin:0 auto;padding:4rem;">

      b)  全屏,大字体

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

      c)    居中,大字体

      data:text/html, <body contenteditable style="font-size:2rem;line-height:1.4;max-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-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-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-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;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.onload=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-60rem;margin:0 auto;padding:4rem;word-wrap:break-word;background:black;color:green;" spellcheck="false" onkeypress="f2(this,event);"></body></html>

    作者:ohkuy
    版权所有,欢迎转载,但请在文章页面明显位置给出原文链接,否则保留追究法律责任的权利。
  • 相关阅读:
    bzoj2428 [HAOI2006]均分数据 模拟退火
    Jersey入门三:创建一个JavaEE的Web项目
    Jersey入门二:运行项目
    Jersey入门一:从Maven Archetype创建jersey项目
    Bootstrap进阶七:LESS语法详解
    Bootstrap进阶六:动态样式语言LESS简介
    Bootstrap进阶五:Web开发中很实用的交互效果积累
    Bootstrap进阶四:jQuery插件详解
    Bootstrap进阶三:jQuery插件概览
    Bootstrap进阶二:基本组件
  • 原文地址:https://www.cnblogs.com/ludard/p/2852952.html
Copyright © 2011-2022 走看看