css3
晨夕_love
地球上一个超级渺小的前端码农,希望能够学到更多的知识,请大家多多指点。
展开
-
深入理解CSS过渡transition
通过过渡transition,可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果。过渡属性看似简单,但实际上它有很多需要注意的细节和容易混淆的地方。本文将介绍和梳理关于CSS过渡的知识 定义 过渡transition是一个复合属性,包括transition-property、transition-duration、transition-timi转载 2016-07-25 16:08:36 · 4718 阅读 · 0 评论 -
css3百叶窗效果
经常我们在浏览一些网页的时候可能都会看见一些很酷炫的特效,比如百叶窗效果。以前的大多都是js写出来的,但是自从css3出来之后,我们也可以用css代码直接实现百叶窗效果。唉美中不足就是ie9以下不支持我们这个很炫的效果,这时你可以用js实现兼容性。js实现今天我们就暂且不谈,我们谈一下css3吧。要制作纯CSS的百叶窗效果,HTML结构是个关键。在html结构中,需要使用多幅相同的图片来组织一原创 2017-01-11 16:03:23 · 9132 阅读 · 0 评论 -
loading css3动画
现在很多的网站网页在加载的时候都有一个加载的动画标识,有些事用gif动画图片,有些使用存css3写的,还有一些是使用js实现的,今天我就来用存css3来写一个加载的动画效果。该效果使用咯css3的transform 里面的scale(缩放)、rotate(旋转)、translate(位移),还使用了css3的动画keframes animation。思路:1.定义一个大盒子,来装原创 2017-01-05 17:15:43 · 547 阅读 · 0 评论 -
canvas绘制可爱猫咪
有没有萌到你呢?转载 2016-11-09 15:22:20 · 2148 阅读 · 0 评论 -
Less学习收获
LESS 做为 CSS 的一种形式的扩展,它并没有阉割 CSS 的功能,而是在现有的 CSS 语法上,添加了很多额外的功能,所以学习 LESS 是一件轻而易举的事情,果断学习之!变量很容易理解:@nice-blue: #5B83AD;@light-blue: @nice-blue + #111;#header { color: @light-blue; }输出:转载 2016-10-10 15:07:25 · 439 阅读 · 1 评论 -
css3 animation(loading)
看见别人些的加载的动画,觉得特别炫酷,然后我也试着自己写咯一个,这个动画是用的纯html 和 css3写的。思路: 1、先定义一个大盒子,转需要用的元素 2、对需要做动画的标签进行定位操作 3、用css3实现你要的表情效果 其他的废话就不多少咯,具体请看下面的代码,不明白的地方,随时都可以call 我html代码:原创 2016-08-24 15:37:39 · 1081 阅读 · 0 评论 -
transform-style ~ animation (css3星环运动)
transform--style属性指定嵌套元素是怎样在三维空间中呈现。值描述flat子元素将不保留其 3D 位置。preserve-3d子元素将保留其 3D 位置。 然后我就自己用这个属性写咯一个比较炫的星环动画。html代码:原创 2016-08-19 11:20:19 · 801 阅读 · 0 评论 -
canvas (smile)
今天我在学习html5新增加的标签——canvas 画布,他像所有的dom对象一样它有自己本身的属性、方法和事件,其中就有绘图的方法,js能够调用它来进行绘图 ,最近在研读《html5与css3权威指南》下面对其中最好玩的canvas的学习做下读书笔记与实验。 context:一直觉得这个翻译成“上下文”真够蛋疼的,context是一个封装了很多绘图功能的对象,获取这个对象的方法原创 2016-08-29 16:16:47 · 477 阅读 · 0 评论 -
鼠标移动3D翻转动画特效
好久没有更新文章咯,今天我为大家带来一个酷炫的3D翻转特效效果例子(该效果是用的纯html+css3实现的哦)特别指示:1、用到咯;perspectivea) perspective属性设置镜头到元素平面的距离。所有元素都是放置在z=0的平面上。比如perspective(300px)表示,镜头距离元素表面的位置是300像素。2、transform-style原创 2016-08-04 14:21:52 · 2695 阅读 · 4 评论 -
(莲花绽放)animation
今天我在学习transation 时在网上看见一个网友写的莲花绽放很炫,我也试着写咯一下,效果如下所示html代码: -->css代码:body{background-color: #d4d4d4; height: 100%; overflow: hidden;} .bo原创 2016-07-20 16:47:11 · 1001 阅读 · 0 评论 -
css3制作正方体
今天学习transform的时候突然奇想,想写一个正方体,然后我就跟着我的想法,写咯一个,该正方体是全部用的html5+css3实现的,只要用transform 里面的rotate(旋转)、translate(位移)等,多的就不说咯,具体的看代码,html代码如下: 1 2 3 4 5原创 2016-07-26 16:36:20 · 1319 阅读 · 0 评论 -
流式布局flex学习
现在都很流行流式布局display:flex;,但是就是老是记不住他们的类型,今天抽空梳理咯一下父元素与子元素的他们各自拥有的属性(红色部分是我经常使用到的)父元素拥有的属性1、flex-direction 设置主轴对齐方式 row(默认值):主轴为水平方向,起点在左端。 row-reverse:主轴为水平方向,起点在右端。column:主轴为垂直方向,起点在上沿。...原创 2018-12-14 14:11:55 · 1301 阅读 · 0 评论