周末苦逼码代码，为css3的强大所颤抖了
周末小哥我看完了几个星期没追的行尸走肉和生活大爆炸（感谢大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的强大所颤抖了的更多相关文章
- GitHub for mobile 来了，码农苦逼了！
北京时间 2019 年 11 月 14 日 GitHub Universe 2019 大会上,GitHub 正式发布了 GitHub for mobile,即 GitHub 的移动版本,支持 iOS ...
- 苦逼三流小公司程序员这半年找工作经历(3)——选择offer
本文按照企业规模.性质.规模,分成三类,点评一下遇到的这些公司.也算是为半年找工作经历的一个总结. 1,三流小公司 公司规模类似于笔者跳槽前所在企业,性质有外商独资.合资,当然大多数都是民营企业,规模 ...
- 无奈而又苦逼的二分版本号回退法定位新引入的bug！！！
昨天測试人员和开发者都发现, 某新版本号有严重的bug. 群里已经開始嚷嚷了, 但没有谁知道是谁引入的问题.本来呢, 这个问题不应该是由我去定位, 但主管让我帮定位一下, 毕竟时间太紧急, 必须尽快 ...
- 从苦逼到牛逼，详解Linux运维工程师的打怪升级之路
做运维也快四年多了,就像游戏打怪升级,升级后知识体系和运维体系也相对变化挺大,学习了很多新的知识点. 运维工程师是从一个呆逼进化为苦逼再成长为牛逼的过程,前提在于你要能忍能干能拼,还要具有敏锐的嗅觉感 ...
- PHP项目的“苦逼”经历与思考
PHP项目的"苦逼"经历与思考 PHP零基础.但因为项目人手不够的原因,被安排到一个用户"定制"项目. 该项目是用PHP生成的统计数据报表. 而用户又有新的3个 ...
- 搞IT的技术人员为什么会如此苦逼
http://www.cnblogs.com/springmvc-hibernate/archive/2012/05/10/2493733.html ————————————————————————— ...
- 谋哥：App开发者的苦逼不值得怜悯!
[谋哥每天一干货,第四十篇] 为什么取这个标题呢?因为昨天一些本来“支持”谋哥的人看到谋哥搞收费VIP群,觉得谋哥赚苦逼开发者的钱很不道德,且说谋哥我写的东西都不切实际,全部是一些思想性 ...
- 苦逼IT才能看懂的笑话
这是苦逼IT才能看懂的笑话1.栈和队列的区别是啥? 吃多了拉就是队列:吃多了吐就是栈 2.世界上最遥远的距离不是生与死,而是你亲手制造的BUG就在你眼前,你却怎么都找不到她... 3.<c++程 ...
- 你还在苦逼地findViewById吗？使用ButterKnife从此轻松定义控件
前段时间笔者在苦逼地撸代码~最后发现有些复杂的界面在写了一屏幕的findviewbyid~~~另一堆setOnXXXListener~有没有方便一点的方法让我们简单点不用每次都定义一次.find一次, ...
随机推荐
- Array数组方法的总结
添加元素: 1. push(arg1,arg2,arg3....) 向数组的尾部添加元素,返回值是数组的长度. 2.unshift(arg1,arg2,arg3....) 向数组的头部添加元素,返回 ...
- javascript设计模式——Publish/Subscribe
推荐阅读http://dev.housetrip.com/2014/09/15/decoupling-javascript-apps-using-pub-sub-pattern/ 我们先引出问题的所在 ...
- js（1）不太注意的一些小事件
确认选择 除了向用户提供信息,我们还希望从用户那里获得信息.这里就用到了confirm 消息对话框. 语法:confirm(str); 参数说明: str: 在消息对话框中要显示的文本,返回的是布尔值 ...
- ASP.NET中怎样才能使自己的代码运行的效率更高
一.网页设计相关: 1,做好页面布局和内容规划,只放置合适的内容,并尽可能使页面设计的最小. 2,使用好的网页编辑器,如DW,FP,不要用VS自带的编辑器,因为它会产生很多无用的沉余代码,而且设计的界 ...
- Linux下安装jdk1.8
相信码农们绝对禁不住linux系统的诱惑,同样在linux的世界里少不了java,下面笔者就和大家分享一下我的jdk1.8安装过程吧,新接触linux的童鞋们完全可以按照我提供的图片中的命令来安装哦- ...
- 如何实现 Excel方式二维变色提示的 m*n 表格
此代码当m≠n 时,有问题.暂时还未解决此问题. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
- 管道通信之无名管道---pipe()
pipe()函数在子进程产生之前就应该存在. 父子进程之间只进行一次传递 /*============================================ > Copyright ( ...
- AutoItLibrary库入门
一.AutoItLibrary入门 1. 为什么要使用AutoItLibrary Selenium2library在我们实际测试web页面的时候基本上已经够用了,不过还是会有部分情况下会脱离Selen ...
- Selenium2Library使用Remote功能（转载并更新）
在selenium2library库的open browser中,除了我们常用的url,browser外,还有几个不常用的参数.如:remote_url的用法 1.下载selenium-server- ...
- VS2012中的全部预定义键盘快捷键列表
原文 http://www.elanblog.com/2013/05/14/vs2012-key-list/#sectionToggle7 Visual Studio 集成开发环境 (IDE) 包括若 ...