周末小哥我看完了几个星期没追的行尸走肉和生活大爆炸（感谢大A站！）,感觉生活真的好空虚，没想到我现在居然会对游戏失去了兴趣！！！代码的魔力真的是无法用语言形容。。。（我真假。。。）百无聊赖，在电脑上装了个sublime text，准备写几行代码满足一下我空虚的心灵。那感觉真是，春风拂过泸沽湖，秋雨浸润九寨沟！（我是小哥。。。不是小益达。。。）尤其感受了那css3狂拽酷炫叼炸天的各种效果。真心觉得，web前端是个充满惊喜的编程工作！

　　说一些题外话，装上sublime text3时，小哥我的所有css3语法都不能够高亮显示，虽然语法没问题。可以执行，但是跟css高亮一比，有强迫症的我怎么看怎么觉得别扭。在百度上Google一下发现了解决的方法。分享给大家。

　　大家可以看一看对比图：

　　

　　左侧为未高亮显示，右侧为高亮显示，是不是感觉看上去有一种莫名的酸爽！

　　1.首先我们打开sublime text3 ，然后ctrl+shift+p,打开控制台（package control），选择Add Repository　　，输入以下网址： https://github.com/i-akhmadullin/Sublime-CSS3

　　2.之后选择：Install Package：Sublime-CSS3。

　　3.在菜单中点击查看>语法>打开具有当前当前拓展名的。。。>CSS3  搞定！

　　方法来源：https://github.com/i-akhmadullin/Sublime-CSS3 （国外的大神太多了~而且都是洋码子，看着就牛x！）

　　

　　言归正传，这两天一直在研究css3的效果，其中的transition带给我的神奇感觉，在此分享给大家！

　　transition(过渡效果)有四个属性值：transition-property(过渡效果属性名称)、

　　　　　　　　　　　　　　　　　　  transition-duration(过渡效果持续时长)、

　　　　　　　　　　　　　　　　　　  transition-timing-funcition(过渡效果的速度曲线)、

　　　　　　　　　　　　　　　　　　  transition-dalay(过渡效果延时生效时长)。

　　transition属性同样也有简写方式，即依次按上面的顺序写出即可。下面的代码为：宽度改变 改变时长为两秒 遵循的时间函数为匀速 延时2s进行。

-webkit-transition:width 2s linear 2s,

　　下面是我自己写的一个demo。大家可以看一下效果。

　　html代码如下：

<!DOCTYPE html>

 2 <html lang="en">

 3 <head>

 4     <meta charset="UTF-8">

 5     <title>过渡</title>

 6     <link rel="stylesheet" type="text/css" href="过渡.css">

 7 </head>

 8 <body>

 9     <div>效果展示</div>

10 </body>

11 </html>

　　css代码如下：

div{

    width:100px;

    height:100px;

    background-color: blue;

    -webkit-transition:width 2s,height 2s ,-webkit-transform 2s;/*简写方式 改变的属性名 改变时长*/

    -webkit-transition-timing-function:cubic-bezier(0.25,0.1,0.251); /*改变的时间函数 linear ease ease-in ease-out ease-in-out cubic-bezier(n,n,n,n) */

    -webkit-transition-delay:1s;    /*改变效果延时响应*/

}

div:hover{

    width:200px;

    height: 200px;

    -webkit-transform:rotate(1080deg);

}

　　其中有一点需要说明的是transition-timing-function属性。属性值除了预设的linear ease等，还遵循贝塞尔曲线函数，后面设定四个0~1的参数。大家有兴趣可以研究一下。

　　希望大家的it路越来越宽！哥斯拉与君同行！

　　

周末苦逼码代码，为css3的强大所颤抖了的更多相关文章

  1. GitHub for mobile 来了，码农苦逼了！

    北京时间 2019 年 11 月 14 日 GitHub Universe 2019 大会上,GitHub 正式发布了 GitHub for mobile,即 GitHub 的移动版本,支持 iOS ...

  2. 苦逼三流小公司程序员这半年找工作经历(3)——选择offer

    本文按照企业规模.性质.规模,分成三类,点评一下遇到的这些公司.也算是为半年找工作经历的一个总结. 1,三流小公司 公司规模类似于笔者跳槽前所在企业,性质有外商独资.合资,当然大多数都是民营企业,规模 ...

  3. 无奈而又苦逼的二分版本号回退法定位新引入的bug！！！

    昨天測试人员和开发者都发现, 某新版本号有严重的bug.  群里已经開始嚷嚷了, 但没有谁知道是谁引入的问题.本来呢, 这个问题不应该是由我去定位, 但主管让我帮定位一下, 毕竟时间太紧急, 必须尽快 ...

  4. 从苦逼到牛逼，详解Linux运维工程师的打怪升级之路

    做运维也快四年多了,就像游戏打怪升级,升级后知识体系和运维体系也相对变化挺大,学习了很多新的知识点. 运维工程师是从一个呆逼进化为苦逼再成长为牛逼的过程,前提在于你要能忍能干能拼,还要具有敏锐的嗅觉感 ...

  5. PHP项目的“苦逼”经历与思考

    PHP项目的"苦逼"经历与思考 PHP零基础.但因为项目人手不够的原因,被安排到一个用户"定制"项目. 该项目是用PHP生成的统计数据报表. 而用户又有新的3个 ...

  6. 搞IT的技术人员为什么会如此苦逼

    http://www.cnblogs.com/springmvc-hibernate/archive/2012/05/10/2493733.html ————————————————————————— ...

  7. 谋哥：App开发者的苦逼不值得怜悯!

    [谋哥每天一干货,第四十篇]        为什么取这个标题呢?因为昨天一些本来“支持”谋哥的人看到谋哥搞收费VIP群,觉得谋哥赚苦逼开发者的钱很不道德,且说谋哥我写的东西都不切实际,全部是一些思想性 ...

  8. 苦逼IT才能看懂的笑话

    这是苦逼IT才能看懂的笑话1.栈和队列的区别是啥? 吃多了拉就是队列:吃多了吐就是栈 2.世界上最遥远的距离不是生与死,而是你亲手制造的BUG就在你眼前,你却怎么都找不到她... 3.<c++程 ...

  9. 你还在苦逼地findViewById吗？使用ButterKnife从此轻松定义控件

    前段时间笔者在苦逼地撸代码~最后发现有些复杂的界面在写了一屏幕的findviewbyid~~~另一堆setOnXXXListener~有没有方便一点的方法让我们简单点不用每次都定义一次.find一次, ...

随机推荐

  1. 使用repeater开发出现 回发或回调参数无效 的问题

    我的就是因为没有加IsPostBack,导致在页面每次刷新时都生成一遍,造成重复绑定Repeater控件,以致事件验证出错,加上就好了 protected void Page_Load(object ...

  2. c#变量在for循环内声明与外的区别

    1.这样写是错误的 #region 有这样的一个字符串类型的数组{"老杨","老苏","老马","老牛"};要求 变换成 ...

  3. Swift和Objective-C的差异性

    1:Type Swift提供了类型推断,不需要人工的去注释变量的类型信息,编译器会通过变量的值来推断类型.例如,编译器可以自动将该变量设置为字符串: // 自动推断,不显示 var name1 = & ...

  4. base库中的BarrierClosure

    说明说得很明白,就是等侍num_closures 为零的时候回调done_closure,代码也很简单,不加详述 #ifndef BASE_BARRIER_CLOSURE_H_ #define BAS ...

  5. dot.js教程文档api

    dot.js是一个短小精悍的js模板引擎,压缩版仅有4K大小,最近使用dot的时候整理出这个dot.js教程文档,其实称不上什么教程,只是对dot.js的介绍和实例,希望能帮助到一部分需要的人. 使用 ...

  6. 一分钟了解PHP

    PHP5编辑 PHP5在长时间的开发及多个预发布版本后,2004年7月13日,PHP5.0发布.该版本以Zend引擎Ⅱ为引擎,并且加入了新功能如PHP Data Objects(PDO).PHP5.0 ...

  7. 《UNIX网络编程》UDP客户端服务器：消息回显

    udp写的程序相比tcp简单一些,在socket()与bind()之后,不需要connect(),accept()等步骤,直接简化为了sendto()与recvfrom(). 编译运行同前面的tcp. ...

  8. Google机器学习教程心得（三） 好的feature

    什么造就好的Feature Google Machine Learning Recipes 3 官方中文博客 http://chinagdg.org/2016/03/machine-learning- ...

  9. 【自学php】第四天 - 使用数组

    php支持两种数组,数字索引数组和关联数组.关联数组有点类似Map,可以用字符串或其他数据类型做键对应相应的值保存在数组中. 1.初始化数组 数字索引数组的初始化可以使用如下代码: $products ...

  10. 各种HelloWorld

    http://blog.csdn.net/whxaing2011/article/details/20736759 ES总结: http://www.cnblogs.com/sunxucool/p/3 ...