CSS 示例集

哈酱酱
681 阅读3分钟

css 画圆

可以使用border属性画半圆，加上animate实现简单的进度条效果。

  1. 画半圆 Demo
  2. 画圆 Demo
  3. [TODO]如何实现渐变色效果

兄弟选择器 +

.item + div {
  margin-top: 1.5em;
}

通过+设置元素间的间距 Demo

“形似猫头鹰” 选择器

这个名字可能比较陌生，不过通用选择器 (*) 和 相邻兄弟选择器 (+) 一起使用，效果非凡：

* + * {
  margin-top: 1.5em;
}

在此示例中，文档流中的所有的相邻兄弟元素将都将设置 margin-top: 1.5em 的样式。 Demo

更多 “形似猫头鹰” 的选择器，可参考 A List Apart 上面 Heydon Pickering 的文章

基于文件格式使用不同的样式

a[href^="http://"]{
    padding-right: 20px;
    background: url(external.gif) no-repeat center right;
}
/* emails */
a[href^="mailto:"]{
    padding-right: 20px;
    background: url(email.png) no-repeat center right;
}

/* pdfs */
a[href$=".pdf"]{
    padding-right: 20px;
    background: url(pdf.png) no-repeat center right;
}

背景渐变动画

CSS 不能为渐变属性添加动画，但通过改变背景位置，实现动画效果。

示例摘自 张鑫旭的个人主页 Demo

过渡 Transition

button {
    background-image: linear-gradient(#5187c4, #1c2f45);
    background-size: auto 200%;
    background-position: 0 100%;
    transition: background-position 0.5s;
}    
button:hover {
    background-position: 0 0;
}

动画 Animation

.colorful {
    animation: bgp 5s infinite linear;
}
@-webkit-keyframes bgp {
    0%  { background-position: 0 0;}
    100% { background-position: -100% 0;}
}

文字渐变色

background-image: linear-gradient(to right, red, orange, yellow, green, yellow, orange, red, orange, yellow, green, yellow, orange, red);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

遮罩

img {
  mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/851550/spongebob.gif);
  mask-size: contain;
  mask-repeat: no-repeat;
  max-width:100%;
}

clip-path

clip-path，意味裁剪路径的意思，让我们可以很便捷的生成各种几何图形。

clip-path 通过定义特殊的路径，实现我们想要的图形。而这个路径，正是 SVG 中的 path 。

/* 圆形 */
.circle {
  width: 100px;
  height: 100px;
  background-color: yellowgreen;
  clip-path: circle(50px at 50px 50px);
}
 
/* 十边形 */
.polygon {
  width: 100px;
  height: 100px;
  background-color: yellowgreen;
  clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
}

the-shapes-of-css

奇妙的 CSS shapes(CSS图形)

shape-outside 混排

shape-outside 的本质其实是生成几何图形，并且裁剪掉其几何图形之外周围的区域，让文字能排列在这些被裁剪区域之内。

CodePen Demo -- 图文混排 shape-outside

.shape-outside {
    width: 160px;
    height: 160px;
    shape-outside: circle(80px at 80px 80px);
    float: left;
}

box-reflect 倒影

box-reflect：none | <direction> <offset>? <mask-box-image>?
-webkit-box-reflect: below 0 -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,.2));

...加载动画

Demo

等宽字体

iiiiii

MMMMMM

设置为等宽字体后： 

font-family: Consolas, Monaco, monospace;

固定宽度的居中布局

#page-wrap {
    width: 800px;
    margin: 0 auto;
}

自定义文本选择

::selection { background: #e2eae2; }

双线框

#double-border{
    border:3px double #000;
}

参考：

你未必知道的49个CSS知识点

web前端实验室

avatar
文章
阅读
粉丝