CSS/CSS3
文章平均质量分 87
刻刻帝丶
这个作者很懒,什么都没留下…
展开
-
CSS3多重背景及背景图片裁剪、定位和尺寸
CSS3之前我们可以对背景添加一张图片 CSS3允许我们在一个元素上添加多个图片多重背景图片<div class="demo"></div>.demo { width: 600px; height: 200px; border: 1px solid black; background: url('1.png') no-repeat;}多重背景可以把多个图片资源添加原创 2016-11-15 22:57:50 · 18877 阅读 · 2 评论 -
CSS3你可能不知道的冷知识
可能我们在看一些网页的源码时 会发现自己从来没见过的属性或用法 今天我就来总结一下 CSS3的冷知识 样式计算在CSS中也可以进行简单的计算 通过calc函数可以实现 这样还可以使我们的元素自适应 当然计算的值应该是合法的值.demo { ... width: calc(100% - 500px); height: 200px;}这个demo中,元素的宽度值是原创 2016-12-02 22:05:28 · 4292 阅读 · 3 评论 -
强大而酷炫的CSS3动画库Animate.css使用方法
今天介绍一个强大的CSS3库 Animate.css 库如其名 ,是一个动画库 通过它我们非常轻松地添加动画效果 “Just-add-water CSS animations” 像灌水一样简单 我们只需要添加几个类名 下载地址及动画效果戳这里:Animate.css 使用这个库只需要把animate.css引入我们的文件即可<link rel="stylesheet" href="s原创 2016-12-23 12:00:01 · 13837 阅读 · 0 评论 -
CSS3颜色值RGBA与渐变色
CSS3之前渐变色图片只能用背景图片 CSS3的渐变色语法可以让我们省去下载图片的开销 并且在改变浏览器分辨率时有更好的效果颜色值RGBA我们熟悉的rgb颜色标准,是由r(red)、g(green)、b(blue)三种颜色叠加变化形成各种颜色 取值0~255,或0~100% rgba就是在rgb基础上增加了alpha不透明度参数.demo { width: 100px; he原创 2016-11-15 18:33:17 · 10039 阅读 · 2 评论 -
响应式布局:CSS3弹性盒flex布局模型
页面布局一直都是web应用样式设计的重点 我们传统的布局方式都是基于盒模型的 利用display、position、float来布局有一定局限性 比如说实现自适应垂直居中 随着响应式布局的流行,CSS3引入了更加灵活的弹性布局模型flex弹性布局使用弹性布局可以有效的分配一个容器的空间 即使我们的容器元素尺寸改变 它内部的元素也可以调整它的尺寸来适应空间 若想让一个元素变成弹性盒 很原创 2016-11-24 13:23:10 · 4176 阅读 · 0 评论 -
响应式布局:CSS3媒体查询Media Queries
利用我们的CSS3实现响应式布局 仅仅有弹性盒还不够 CSS3还扩展了media属性,增加了一个模块功能 Media Queries媒体查询功能媒体查询引入随着移动端的快速普及 越来越多的用户使用智能机、平板电脑等浏览页面 所有考虑到用户的需求 我们要保证用户在各种设备上浏览页面都有不错的体验 这样我们就需要媒体查询 它允许我们为不同的设备或者不同条件的设备设置不同的样式 不过如果原创 2016-11-24 21:21:40 · 1648 阅读 · 0 评论 -
CSS3多列布局columns相关属性
CSS3中增加了可以实现多列布局的属性 在此之前的实现很麻烦可能需要各种定位 现在我们只需要一个属性就可以实现 多列布局类似于我们的报纸布局 这样可以方便读者观看多列数量与多列宽度如果一行文字太长的话,我们可能会没有读下去的欲望像这样<div class="demo">......</div>.demo { width: 600px; height: 200px; b原创 2016-11-20 23:10:38 · 3705 阅读 · 0 评论 -
CSS3元素2D平面变换属性transform
CSS3的形状变换允许我们对元素拉伸、缩放等等 这篇我主要谈下一2D平面变换 属性transform可以进行变换 transform就是变形的意思 并且它主要通过函数来使用,有以下函数translate() 平移变换ratate() 旋转变换scale() 缩放变换skew() 倾斜变换matrix() 矩阵变换transform-origin则时定义变换的中心平移变换trans原创 2016-11-19 16:51:17 · 1592 阅读 · 0 评论 -
CSS3景深、三维变换属性及旋转三维立方体的实现
上周简单写了一下2D变换 今天来写写3D变换 三维立体效果我觉得是CSS3中最有意思的地方 不得不佩服那些开发者大神们 让我们能够通过几行CSS代码就能得到酷炫的视觉体验浏览器坐标系在讲正式语法之前,首先需要了解浏览器坐标系 这需要我们把浏览器界面想象成一个立体的场景这是网上流传很广的浏览器坐标系图片 从左到右的方向是浏览器x轴的正方向 从上到下的方向是浏览器y轴的正方向 而z轴正方原创 2016-11-23 13:42:02 · 14752 阅读 · 0 评论 -
CSS3动画animation相关属性与关键帧规则keyframes
我昨天写三维正方体的时候,就用到了动画的语法 今天就来系统复习一下 过渡transition有着它的局限性 虽然简单,但是它只能在两个状态之间改变 并且它需要事件的驱动才能够进行 不能够自己运动 所以为了解决这样的问题 我们需要animation动画动画若想实现动画效果 仅仅有animation属性是不够的 我们还需要@keyframes规则 先来看一个例子div class="原创 2016-11-23 20:53:54 · 7025 阅读 · 0 评论 -
CSS3元素过渡属性transition
过渡动画是动画的基础 在学习动画属性之前 我们需要先了解过渡属性transition过渡transition先来看一个小例子<div class="demo"></div>.demo { width: 100px; height: 100px; background-color: royalblue;}.demo:hover { width: 200px;}原创 2016-11-23 16:59:27 · 4188 阅读 · 0 评论 -
CCS3盒模型与盒模型属性box-sizing
这两天写的都是小知识点 因为确实有点忙 虽然很简单,但是本着全面总结的原则,还是要说一下 今天我来说一下这个CSS中的盒模型 以及CSS3中可以改变盒模型的属性盒模型盒模型是计算元素尺寸的模型规则 在我们CSS中盒模型分为两种W3C标准盒模型正常情况下我们用的都是这个标准的盒模型 标准盒模型中元素尺寸使用如下计算方式 元素实际宽度 = width + padding(左右内边距大小)原创 2016-11-21 22:42:03 · 2849 阅读 · 0 评论 -
CSS3伪类与伪元素的区别及注意事项
CSS中伪类与伪元素的概念是很容易混淆的 今天就来谈谈伪类与伪元素之间的区别定义首先先来看看伪类与伪元素的定义 w3c中对于它们是这么解释的伪类:用于向某些选择器添加特殊的效果伪元素:用于将特殊的效果添加到某些选择器讲道理,可能我语文不好,我觉得这两句话是等价的 :-) 根本不能看出有什么区别 都是对某些选择器“加特技”标准有这么一句话翻译过来是这样的 CSS 引入伪类和伪元素的概原创 2016-12-10 19:59:23 · 12806 阅读 · 5 评论 -
CSS3选择器介绍及用法总结
CSS3新增了很多强大的选择器 它可以让我们少写一些js事件脚本 我们先来看看各个版本的选择器有哪些 注: ele代表element元素 attr代表attribute属性,val代表value属性值 :xxx都属于伪类选择器,::xxx都属于伪元素选择器 有名字的选择器我尽量细分了CCS1选择器 选择器 类型 示例 说明 .class 类选择器 .demo原创 2016-11-16 18:10:56 · 6980 阅读 · 0 评论 -
CSS3圆角、盒阴影与边框图片
今天开始整理CSS3的知识 其实应该是昨晚写的,不过好像是急性肠胃炎了,痛的一晚上没睡着,蓝瘦香菇 还好今天打点滴睡一觉就好了,看来这吃东西还是注意点好,被我的胃肠报复了 CSS没什么难的,不过看的同时自己要在浏览器上试一试,试一遍就记住了 光看不做白看CSS3各个浏览器是存在兼容问题的 不同浏览器有不同前缀的私有属性,表示属性或规则还没有成为标准 换句话说,官方还没公布标准的时候,各个原创 2016-11-14 17:14:00 · 2860 阅读 · 0 评论 -
CSS3字体与文本效果
CSS3允许我们使用自定义字体 也多了一些不错的文本效果自定义字体使用自定义字体需要使用@font-face规则 当然首先你要有自定义文字文件<p class="demo">Payen S.Tsung</p>@font-face { font-family: myDIYfont; /*自定义字体名*/ src: url('Ginga.ttf'); /*字体文件*/}.demo原创 2016-11-15 20:48:12 · 1407 阅读 · 0 评论 -
CSS预处理语言Less常用语法
Less是一种动态样式语言,属于css预处理语言的一种 它使用类似CSS的语法为CSS的赋予了动态的特性 如变量,继承,运算,函数等,更方便css的编写和维护实现css模块化less 可以在多种语言,环境中使用,包括浏览器端、桌面客户端、服务端 其实它非常简单 要想使用less我们需要下载它 我选择利用npm包管理器下载 npm install less less-loader修改配置文原创 2017-01-19 16:27:09 · 2877 阅读 · 1 评论