周末苦逼码代码，为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一次, ...
随机推荐
- log4j是什么
一.什么是log4jLog4j 是Apache的一个开放源代码项目,通过使用Log4j,我们可以控制日志信息输送的目的地是控制台.文件.GUI组件.甚至是套接口服务器.NT的事 件记录器.UNIX S ...
- Silverlight学习（三）
最近对WCFRIA+MVVM+Prism有了初步的认识,能够简单的实现一些数据库的交互.这节主要讲的是Silverlight通过domainservice和ado.net实体数据模型与数据库的交互.本 ...
- Asp.net MVC + EF6.0 经常出现的问题
1.运行视图时出现问题:未能加载文件或程序集"EntityFramework, Version=6.0.0.0, Culture=neutral, PublicKeyToken=b77a5c ...
- sed使用详解
sed :Stream EDitor(流编辑器) sed :模式空间(默认不编辑源文件,仅对模式空间中数据做处理) sed [options] 'AddressCommand' file ... -n ...
- 如果ie6跳转
try { (function(e) { /i.test(navigator.userAgent)) { window.location = "jump.html"; return ...
- Scrapy的架构初探
Scrapy,Python开发的一个web抓取框架. 1,引言 Python即时网络爬虫启动的目标是一起把互联网变成大数据库.单纯的开放源代码并不是开源的全部,开源的核心是“开放的思想”,聚合最好的想 ...
- 随学随用的python-note
Python笔记---------------[] 列表解析 >>> [(x,y) for x in range(3) for y in range(5)] [(0, 0), (0, ...
- [solaris]odbc-oracle,简单测试
#include <string> #include <iostream> #include <stdio.h> #include <sql.h> #i ...
- jQuery学习-事件之绑定事件（四）
今天我们来学习jQuery.Event对象.jQuery为了添加自己的处理机制,及可以传递用户自定义数据,于是Event对象就出世了. 1 jQuery.Event = function( src ...
- [开源]在iOS上实现Android风格的控件Toast
[开源]在iOS上实现Android风格的控件Toast iOS的风格和Apple其他产品一样,简单而粗暴.没有给人其他选择的余地,让你又爱又恨.同样的,Apple对待iOS平台的开发人员和对待大众消 ...