html5
晨夕_love
地球上一个超级渺小的前端码农,希望能够学到更多的知识,请大家多多指点。
展开
-
深入理解CSS过渡transition
通过过渡transition,可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果。过渡属性看似简单,但实际上它有很多需要注意的细节和容易混淆的地方。本文将介绍和梳理关于CSS过渡的知识 定义 过渡transition是一个复合属性,包括transition-property、transition-duration、transition-timi转载 2016-07-25 16:08:36 · 4704 阅读 · 0 评论 -
(莲花绽放)animation
今天我在学习transation 时在网上看见一个网友写的莲花绽放很炫,我也试着写咯一下,效果如下所示html代码: -->css代码:body{background-color: #d4d4d4; height: 100%; overflow: hidden;} .bo原创 2016-07-20 16:47:11 · 996 阅读 · 0 评论 -
鼠标移动3D翻转动画特效
好久没有更新文章咯,今天我为大家带来一个酷炫的3D翻转特效效果例子(该效果是用的纯html+css3实现的哦)特别指示:1、用到咯;perspectivea) perspective属性设置镜头到元素平面的距离。所有元素都是放置在z=0的平面上。比如perspective(300px)表示,镜头距离元素表面的位置是300像素。2、transform-style原创 2016-08-04 14:21:52 · 2688 阅读 · 4 评论 -
js拖拽效果
平时遇见过很多页面上的某一些元素可以跟随鼠标的移动而移动,我觉这个效果特别的好玩,然后我就自己试着写咯一下这个效果,我写的效果页面是一个很简单的,我就定义咯一个div元素,然后鼠标按下去的时候 拖动鼠标,物体就会跟随我鼠标移动而移动,当鼠标放开的时候,物体就停止移动。首先我们在一个页面上添加一个div ,然后给他加上一些修饰的样式。原创 2016-09-12 15:56:36 · 677 阅读 · 1 评论 -
css3 animation(loading)
看见别人些的加载的动画,觉得特别炫酷,然后我也试着自己写咯一个,这个动画是用的纯html 和 css3写的。思路: 1、先定义一个大盒子,转需要用的元素 2、对需要做动画的标签进行定位操作 3、用css3实现你要的表情效果 其他的废话就不多少咯,具体请看下面的代码,不明白的地方,随时都可以call 我html代码:原创 2016-08-24 15:37:39 · 1072 阅读 · 0 评论 -
canvas绘制可爱猫咪
有没有萌到你呢?转载 2016-11-09 15:22:20 · 2128 阅读 · 0 评论 -
倒计时、计算时间
哈哈,最近我们公司在做双十一的优惠活动项目,现在距离双十一还有几天,所以我们需要做一个倒计时的功能,很荣幸的我完成咯这项艰巨而伟大的任务,以前我在做Date()的时候老是把getDay( )(一周中的某一天)、getTime()(返回1970年1月1日至今的毫秒数)、getDate()(返回一个月(0-31)之间的某一天)记混淆,但是自从我把这个做咯以后,我就已经明确知道他们之间的意义咯,再也不会原创 2016-11-09 15:45:20 · 2892 阅读 · 0 评论 -
流式布局flex学习
现在都很流行流式布局display:flex;,但是就是老是记不住他们的类型,今天抽空梳理咯一下父元素与子元素的他们各自拥有的属性(红色部分是我经常使用到的)父元素拥有的属性1、flex-direction 设置主轴对齐方式 row(默认值):主轴为水平方向,起点在左端。 row-reverse:主轴为水平方向,起点在右端。column:主轴为垂直方向,起点在上沿。...原创 2018-12-14 14:11:55 · 1288 阅读 · 0 评论