周末苦逼码代码，为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一次, ...
随机推荐
- 深入解析CSS样式层叠权重值
本文为转载内容,源地址:http://www.ofcss.com/2011/05/26/css-cascade-specificity.html 读到<重新认识CSS的权重>这篇,在文章最 ...
- input的样式简介
<input type="text" autocomplete="off" placeholder="" x-webkit-speec ...
- java工厂类与反射机制
java 简单工厂类 2012-04-22 15:44:07| 分类: java | 标签:java工厂类 简单工厂类 |举报|字号 订阅 简单工厂模式需要由以下角色组成: 接口 ...
- NSDictionary json格式字符串转字典，字典转json格式字符串
+ (NSDictionary *)dictionaryWithJsonString:(NSString *)jsonString { if (jsonString == nil) { return ...
- C++ Primer之 十二章 类
1.关于类的const对象 const对象只能调用声明为const的成员函数,在这篇csdn博客中也讨论了这个问题. 究其原因是因为 const 对象A 调用了非const函数F, F因为没有cons ...
- jacob 操作word转pdf
项目需要对上传的word及pdf进行在线预览,因基于jquery的pdf插件,很方面实现在线预览,而word实现在线预览费劲不少,于是想到在进行上传处理时,直接将word转成pdf,在预览时直接预览p ...
- 只有电信3G是公网ip。
只有电信3G是公网ip,其它网络拿到是内部网.
- 关于chrome浏览器更新后快捷工具失效的解决方法
更新chrome浏览器到29.0时发现快捷工具的双击关闭标签页失效了,解决办法: 1.打开chrome的文件夹.C:\Program Files (x86)\Google\Chrome\Applica ...
- Spring、Bean的生命周期
1.默认情况下,在Bean容器被实例化的时候,bean对象将被创建: public class PersonServiceImpl implements PersonIService { public ...
- 简单QT界面信号图形化输入输出
右键->转到槽,选择信号 就可以输入代码 右键->转到槽,选择信号 就可以输入代码 2个文本框接受输入数字,第3个文本框输出相加结果 void Dialog::on_pushButton_ ...