周末苦逼码代码,为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路越来越宽!哥斯拉与君同行!

  

时间: 2024-11-07 15:50:29

周末苦逼码代码,为css3的强大所颤抖了的相关文章

【iOS开发-5】storyboard还是苦逼摞代码?看看各家之言

(1)代码手写UI,xib和StoryBoard间的博弈,以及Interface Builder的一些小技巧 对于菜鸟,建议用storyboard而不必花费太多时间在枯燥的代码里而失去兴趣.而至于代码,他说在用storyboard不可避免肯定会用到代码.这里面提到的xib应该是storyboard的前身.那个时候的XIB不太适合做版本管理,比如用diff检查两个版本之间的区别等,所以对于大一点的认真一点的工程都是代码优先,而XIB作为入门练习的赶脚.但storyboard既然是演化过来的,自然改

上海岳城科技致那些自嘲码农的苦逼程序员

好吧你可以说这是水文. 今天下午和经理聊了一些关于软件行业的话题,这两天晚上都有朋友向我倾诉程序员的茫然和苦楚,我觉得有些想法可以记录下来.时光佐证,其实我好久没写发骚的文字了,就啰嗦啰嗦.我不算一个梦想家,但是对于信念还比较固执.人各有志,赚钱多多的钱,没有什么不好.但是我希望赚钱能真正作为一项副产品,把自己希望的事情,当做一项事业去做. 互联网环境恶劣.软件环境恶劣,来到北京工作数个月,我有一些未曾体味到的感触.多少人都在议论吃青春饭的职业,多少人在自嘲重复劳动.苦逼工作,多少人在听到"程序

iOS学习计划,通过一个项目来掌握知识,来改变我苦逼的命运(附代码)

其实自从去年就开始在专研大众点评的第三方开发,一直断断续续.现在是给自己定目标的时候了.从这个项目中可以学到任意的关于Objective-c的知识. 1.网络编程 2.数据解析(json) 3.自定义控件 4.异步加载 5.Objective-c的高级特性,如反射(这里称为反射不知道合适吗,因为我之前学过c#,觉得它和c#的反射非常相似,暂且称为反射). 6.LBS开发. 7.导航.等等 下载 先把自己已经完成的代码上传上去,供大家阅读,如有缺陷,请多多包涵并指出,我们一起进步. 哎.写着写着有

让程序猿不再苦逼的四大神器

做程序猿「媛」是一个苦逼的活,大周六地早起在技术群里招呼.看到没有啥人响应,说了一句.「预计都没有醒」.然后一位哥们抛过来,「在加班」 ! 做 Web 开发更是一个苦逼的活.不像是做 iOS,搞定client.基本上就万事大吉了. 做 Web 开发不仅仅是要做后端.前端也须要了解和熟悉! 做前后端通吃的 DevOps 全栈project师绝对是最苦逼的活,不但须要做开发,而且还要了解运维.优化.不会运维的project师绝对不是一个好架构师. 但所幸的事.一个优秀的project师虽然非常忙,虽

【我拼搏的2016】-苦逼运维如何变身为SRE成长经历

提起运维很多人能联想到的字眼就有"苦逼"."辛苦"."加班"."背锅",随着国内互联网大潮的兴起,特别是最近几年互联网行业的火爆,催生了大批运维从业人员.类似于当年网络管理员的职业发展,由于普通人对于该领域专业知识的匮乏和良莠不齐的从业人员素质,拉低了整个社会对于这一职业的认知,和当今的运维职业何其相似. 作为运维大军中的一员,我也是经历过从自己摸索自学到专业培训机构系统化学习,再到逐渐完善知识体系和不断提高眼界认知,过程是极

PHP项目的“苦逼”经历与思考

PHP项目的"苦逼"经历与思考 PHP零基础.但因为项目人手不够的原因,被安排到一个用户"定制"项目. 该项目是用PHP生成的统计数据报表. 而用户又有新的3个需求,须要在已有的代码基础上完毕.       一.初识PHP 因为本人之前没有接触过PHP代码project,所以须要花费一点时间过一下PHP的基本的语法.个人感觉和C++非常像.有类的定义.继承和派生.但其又比C++简化非常多,没有C++.C的数据类型的概念.全部数据想用什么直接声明赋值就可以.而且.其字

你还在苦逼地findViewById吗?使用ButterKnife从此轻松定义控件

前段时间笔者在苦逼地撸代码~最后发现有些复杂的界面在写了一屏幕的findviewbyid~~~另一堆setOnXXXListener~有没有方便一点的方法让我们简单点不用每次都定义一次.find一次,强转一次,set一次~~ 后来笔者在收藏夹里找到同事好久曾经发给我的网址(呵呵,果然是一旦增加了收藏夹就再也不会看了)~~打开发现有个叫做butterknife的东东~ 那么接下来我们来看看ButterKnife如何将我们从findviewbyid中挽救出来的. ButterKnife简单介绍 呵呵

谋哥:App开发者的苦逼不值得怜悯!!

[谋哥每天一干货,第四十篇] 为什么取这个标题呢?因为昨天一些本来"支持"谋哥的人看到谋哥搞收费VIP群,觉得谋哥赚苦逼开发者的钱很不道德,且说谋哥我写的东西都不切实际,全部是一些思想性的东西,毫无实战意义,于是愤然离去. 华为老总任正非说:"我们需要将军,更需要战略家.思想家".有App赚钱实战经验的人都会知道,谋哥我写的文章都是基于实战,我不会告诉你具体某个 App怎么搞(除非你加入VIP群,我指导你),我只会说:"你买本<简约至上>看看.

让程序员不再苦逼的神器(上)

乘风破浪,启航未来! 做程序猿「媛」是一个苦逼的活,大周六地早起在技术群里招呼,看到没有啥人响应,说了一句,「估计都没有醒」,然后一位哥们抛过来,「在加班」 ! 做 Web 开发更是一个苦逼的活,不像是做 iOS,搞定客户端,基本上就万事大吉了.做 Web 开发不仅仅是要做后端,前端也需要了解和熟悉! 做前后端通吃的 DevOps 全栈工程师绝对是最苦逼的活,不但需要做开发,而且还要了解运维.优化,不会运维的工程师绝对不是一个好架构师! 但所幸的事,一个优秀的工程师尽管很忙,尽管要熟悉前后端.系