正在加载中

分类 CSS 下的文章

css动画之jojo波纹(波纹动效)

css动画之jojo波纹(波纹动效)

CSS
先看看仿制的原作动画效果我们首先做一个分析,他首先它的本质就是一个圆圈在渐变放大然后缩小的过程,然后通过三个圆圈达到波动的效果,那么我们就可以通过动画annimation来制作。首先可以明确一点就是,他们的动画是一样的,只是触发的时间不同,那么就很简单了,动画提供延时功能,...
为博客文章加上标签

为博客文章加上标签

HTMLCSS
突然想给博客加个标签,然后说干就干,反正挺简单的,然后效果还不错,美滋滋........
什么是上下文节点???

什么是上下文节点???

HTMLCSSJavaScript
学html+css的时候有在书上看到过上下文节点,但是也没详细说明,看视频的时候也有人说过,但是也是一笔带过,也没在意,今天学XPath的时候就有关于上下文节点有一个说明,但是只说了一点,没啥详细,所以自己百度了下,如下:代码:<html> <bod...
YoDu魔改版主题v3.1更新 (修复bug)

YoDu魔改版主题v3.1更新 (修复bug)

HTMLCSS
YoDu魔改版主题v3.1更新:修复了长代码在小分辨率下无法换行问题。针对表格代码做了样式调整。回复可见代码微调。修复了footer元素由于启用了css3的弹性布局,导致tim使用软件内浏览时,其内核过旧不能支持,特重新调整,改为css2特性,取消了footer的背景渐变。...
Typecho表格的创建写法和table的css样式分享

Typecho表格的创建写法和table的css样式分享

CSS
之前就听说Typecho的md编辑器支持表格写法了,这次刚好在写一篇文章的时候用到了,所以顺带写了一个css分享出来,很简单的,有需要的可以复制到自己的css文件中。表格的创建写法是:|th内容|th内容| //内容与内容之间都是用|竖线分割 |--------...
控制tab的宽度tab-size

控制tab的宽度tab-size

CSS
上一篇文章我们用渐变背景模拟了斑马纹,这次我们顺带简单了解下如何控制tab的宽度。浏览器默认一个tab是8个字符,这种感人的宽度简直让人吐血,你想想你在编辑器里一个tab才多宽,而且我们有时候经常是三个tab起步啊,这要是在浏览器里显示,简直突破天际,为此css3特意出了一...
用渐变来模拟斑马纹

用渐变来模拟斑马纹

CSS
斑马纹应用很广泛,用于表格,代码展示,列表展示等等,一般都是先给每一行加一个block的父元素,然后再用元素选择器:nth-child(odd)和:nth-child(even)来选择奇数元素和偶数元素,这样就会产生一个问题,第一行一般都是标题之类的,这样写会让标题和内容部...
有趣的hue-rotate滤镜

有趣的hue-rotate滤镜

CSS
css3的滤镜真的非常强大,比如这个hue-rotate滤镜,可以让图片的一些颜色变成想要的颜色,当然黑色白色除外,因为这个滤镜的原理就是改变图片的色相,如果你用过ps的话就会知道,再ps里面可以通过改变图片的色相来改变图片的颜色,而且效果很方便,不会有颜色与颜色之前的不自...
CSS3 object-fit/object-position简单了解

CSS3 object-fit/object-position简单了解

CSS
从第一次使用yodu的主题,我就很在意他是怎么让首页的文章缩略图居中且填满设置好的大小,而且不会产生形变,然后我f12查看代码的时候看到了这个:object-fit:cover;这个cover很容易理解,和background的cover是一样的,而这个object-fit...
给伪元素也加上box-shadow

给伪元素也加上box-shadow

CSS
在设置一些tag标签样式的时候,我们一般都是设置为一边箭头的标签样式,这个箭头一般都是使用伪元素before来进行模拟,但是当我们想要给这个标签加上阴影box-shadow的时候,你会发现你的阴影并不能应用的伪元素上。我们先看下具体代码:HTML:<div class...

登录