周末苦逼码代码，为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一次, ...
随机推荐
- jqery ajax读取json文件
json文件数据 [ {"name":"哈哈··","email":"邮箱01","gender": ...
- Angular-UI-Router
原文 http://www.cnblogs.com/youngdze/p/4025538.html 主题 路由器JavaScript 路由 Route 为什么用 Route AJAX 请求不会留 ...
- android代码集锦
调用root权限的应用: /** * 执行Command命令的函数 * * @param command 命令 * @return 执行结果 */ public static boolean runR ...
- VS2010中查询替换使用
MSDN:http://msdn.microsoft.com/zh-cn/library/afy96z92.aspx 例子:
- JavaScript里面三个等号和两个等号的区别
== equality 等同,=== identity 恒等. ==, 两边值类型不同的时候,要先进行类型转换,再比较. ===,不做类型转换,类型不同的一定不等. 下面分别说明: 先说 ===,这个 ...
- MRP工作台任务下达之x组织屏蔽全部发放功能
应用 Oracle Manufacturing Planning 层 Level Function 函数名 Funcgtion Name MRPFPPWB-390 表单名 Form Name MR ...
- OleDbHelper
using System; using System.Collections.Generic; using System.Text; using System.Data; using System.D ...
- Java 四种线程池的使用
java线程线程池监控 Java通过Executors提供四种线程池,分别为: newCachedThreadPool:创建一个可缓存线程池,如果线程池长度超过处理需要,可灵活回收空闲线程,若无可回收 ...
- PHP开发调试环境配置
——基于wamp和Eclipse for PHP Developers 引言 为了搭建PHP开发调试环境,我曾经在网上查阅了无数的资料,但没有一种真正能够行的通的.因为PHP开发环境需要很多种软件相互 ...
- Java 集合嵌套List of List
在LeetCode上遇到这样返回值 public class Solution { public List<List<Integer>> levelOrder(TreeNode ...