周末小哥我看完了几个星期没追的行尸走肉和生活大爆炸（感谢大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. TextField的所有属性和方法（转）

    转自:http://tsyouaschen.iteye.com/blog/600255 表一 TextField 对象的方法 方法 说明TextField.addListener 加入接收触发事件如文 ...

  2. Qt for Windows：Qt 5.4.0 MinGW 静态编译版本制作 (转)

    大致流程: 1.安装Qt(源码版)以及其他必要的环境 2.编译/安装 3.配置 4.使用 ----------正文分割线---------- 1.安装Qt(源码版) 1.1 下载Qt(两个地址二选一即 ...

  3. php的SQL连接操作的方法

    初学php,于是一开始就在sql(具体点说是mysql)里受挫严重.于是这里记下一些方法. 首先是基本方法.基本方法现在我不用了,所以我就附一下hustoj中的部分吧 基本方法的数据库连接操作: if ...

  4. CreateMutex() 、ReleaseMutex()

    功能: CreateMutex() 用于有独占要求的程序 (在其进程运行期间不允许其他使用此端口设备的程序运行,或不允许同名程序运行). 比如运行金山词霸时,一次只能运行一个实例,当运行第二个实例时, ...

  5. 封装jQuery插件的步骤

    引语:jQuery提供了很多插件,我们在开发的过程使用插件能节省时间简化开发也避免从头开始编写每个组件,单我们除了懂得使用别人已编写好的插件以外,也到懂得如何封装属于我们自己的插件,以下就是封装jQu ...

  6. Ajax制作无刷新评论系统

    index.html <script src="jquery.min.js"></script> <script> $(function(){ ...

  7. 打造完美的go开发环境

    这篇原来是给公司里使用go开发的交流用的,主要是工具的安装,用markdown写的,发布了内部gitlab上,仓促发布到blog上面,也没改啥格式,现在整理一下,然后增加一点说明 基础开发工具 sub ...

  8. MYSQL 数学运算符问题

    背景: 在mysql中   ’stringA' + 'stringB' 这种类型的操作,在mysql内部会自动转化为两个double 数进行运算. -------------------------- ...

  9. 解决：“Ubuntu 10.04 LTS _Lucid Lynx_ - Release i38...

    编译android源码,找不到g++.通过apt-get下载时候,总是提示“Ubuntu 10.04 LTS _Lucid Lynx_ - Release i386 (20100429)” 的盘片插入 ...

  10. C语言malloc和free实现原理

    以下是一段简单的C代码,malloc和free到底做了什么? int main() { char* p = (char*)malloc(32); free(p); return 0; } malloc ...