HTML/CSSHTML5 / CSS3

陆-SVG矢量图形学习进阶

svg

承接上篇: [05天]SVG矢量图形学习    上篇主要是对svg基础做了介绍。用以满足日常svg图形的基本使用。 本篇是进阶内容,将会对svg的滤镜,动画,事件等等各特性做介绍说明。如果对svg还没有做过了解,请先阅读上篇。...
37

叁-CSS属性之mask

CSS 属性 mask 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。 mask是一个缩写属性名,其包含有: mask-image mask-size mask-repeat mask-position mask-clip mask-origin mask-mode mask-type...
51

贰-CSS属性之clip-path介绍

clip-path 可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示,区域外的隐藏。 这是一个神奇的CSS属性,值可以是以下几种 inset 剪裁成一个矩形 clip-path: inset(<距离元素上面的距离>,<距离元素右面的距离> ,<距离元素下面的距离>,<距离元素左面的距离>,<圆角边框> )...
43

壹-CSS之outline动画

以前只知道outline可以不占用流体空间实现焦点,边框效果。偶然间看到一篇外网文章,打开了新世界的大门。原来outline还可以玩这么多花样。 动画一 通过将outline-ofset负偏移达到遮罩效果,再hover时正偏移到外部并减小其宽度变为一个外边框。这个实现代码相对简单...
44

CSS文字折行知识大全

CSS换行 CSS不换行 CSS英文换行 CSS中文不换行

是不是在用CSS做文字排版时,经常会遇到并搜索这些问题: CSS换行,CSS不换行,CSS英文换行,CSS中文不换行,CSS标点符号不换行... 本文会解决以上的全部问题困扰! 说大全属实有点吹牛皮了,不过确实很全面的集中了CSS中关于CJK与Non-CJK字符集的换行相关属性。并逐一进行了解释说明。也不用全记住,在需要时,打开本页面当字典查阅一下就可以了。  ...
380

[30天] CSS Media query几种非常用媒介查询

乍一想,好像媒介查询很简单,已经一直在用的东西,还有什么好学的。看了大佬的文章才知道。还有这么多好玩的东西可以学可以用! 我以为我所熟知的: @media (max-width: 640px) { /* css here */} 就这? 大佬教我的: 一、媒介查询的更多打开方式 媒介查询不只是能用在CSS代码块中,还可以用在引入CSS的链接中,甚至是JavaScript中。 例如: <link rel="stylesheet" href="default.css"&g...
264

[29天] 再探CSS3D

CSS3D transform perspective

第29天了,不知道再写些什么了。就再复习复习CSS 3D吧。了解下基本的3D概念,就是二维变三维。从x,y坐标到x,yz坐标。CSS 3D采用左手坐标系伸出左手,让拇指和食指成“L”形,大拇指向右,食指向上。其余的手指指向前方,这样就建立了一个左手坐标系。其中,拇指、食指和其余手指分别代表x,y,z轴的正方向...
260

[28天] CSS渐变深度学习

CSS渐变 linear-gradient radial-gradient

CSS渐变有两种线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向 径向渐变(Radial Gradients)- 由它们的中心定义由于<gradient>数据类型系<image>的子数据类型,<gradient>只能被用于<image>可以使用的地方。因此,linear-gradient() 并不适用于background-color以及类似的使用 <color>数据类型的属性中。...
285

[27天] 一条分割线能耍什么花样

这是一条普通的HTML分割线 <hr class="line1"> 两条实线 .line1{ border: 0; border-bottom: 3px double; } 一条虚线 .line1{ border: 0; border-bottom: 1px dotted; } 一条可控线段长度与间距的虚线 .line1{ border: 0; padding-top: 1px; background: re...
245

[25天] 巧用border-radius实现波浪加载

先看看只用了一个div加上css实现的效果:由于录制gif体积较大,所以只录了加载到一半的效果。先帖上完整代码,如果不好读后面有大致的思路说明:<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta http-equiv=&qu...
230

精品模板蓝瞳原创精品网站模板

^