Skip to content

Latest commit

 

History

History
209 lines (154 loc) · 3.28 KB

05. CSS 效果.md

File metadata and controls

209 lines (154 loc) · 3.28 KB
Raw

CSS 效果

这个效果怎么实现？

CSS 最出彩的部分：效果

  • box-shadow
  • text-shadow
  • border-radius
  • background
  • clip-path
  • 3D-transform

box-shadow

box-shadow: 5px 5px 10px 0 rgba(0,0,0,.2);
box-shadow: inset 5px 5px 10px 0 rgba(0,0,0,.2);
box-shadow: 0 0 0 5px green;


box-shadow: 200px 200px 0 5px green,
            230px 200px 0 5px green,
            215px 215px 0 -3px red;
  • 营造层次感(立体感)
  • 充当没有宽度的边框
  • 特殊效果

text-shadow

  • 立体感
  • 印刷品质感
 text-shadow: 1px 1px 0 #aaa;
text-shadow: 0 0 1px #80808033;


background: black;
text-shadow: -1px -1px 0 white,
    -1px 1px 0 white,
    1px -1px 0 white,
    1px 1px 0 white;

text-shadow: 0 0 2px white;

border-radius

  • 圆角矩形
  • 圆形
  • 半圆、扇形
  • 其他奇怪的角角
border-radius: 10px;

border-radius: 50%;

border: 50px solid green;

border-top-left-radius: 100px 50px;
border-top-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;

border-radius: 10px 10px 10px 10px / 20px 20px 20px 20px;

扇形：

.container{
    width: 0;
    height: 0;
    background: red;
    border: 10px solid green;
    border-radius: 10px;
    border-radius: 50%;
    border: 50px solid green;
    border-top-left-radius: 100px;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

半圆

background

  • 文理、图案
  • 渐变
  • 雪碧图动画
  • 背景图尺寸适应
.i{
    width: 20px;
    height: 20px;
    background: url(./background.png) no-repeat;
    background-size: 20px 40px;
    transition: background-position .4s;
}
.i:hover{
    background-position: 0 -20px;
}
background:url(./panda.jpg);
background-size: contain;
background-repeat: no-repeat;
background-position: center center;

background-size: cover;

clip-path

  • 对容器进行裁剪
  • 常见集合图形
  • 自定义路径
  • 多边形
.container{
    width: 400px;
    height: 300px;
    border: 1px solid red;
    background:url(./panda.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    padding:10px;
    clip-path: url(#clipPath);
    transition:clip-path .4s;
}

思考： 适应 svg 进行裁剪

3D-transform

2D 变换：

  • translate
  • scale
  • skew
  • rotate

3D 变换： 在 3D 空间进行变换

transform-style: preserve-3d;
transform: translateX(-100px) rotateY(-90deg);
transform: translateY(-100px) rotateX(-90deg);

总结

如何用一个 div 画 xxx：

  • box-shadow 无线投影
  • ::before
  • ::after

如何产生不占空间的边框：

  • box-shadow
  • outline

如何现实圆形元素(头像)：

  • border-radius: 50%;

如何实现 IOS 图标的圆角：

  • clip-path:(svg)

如何现实半圆、扇形等图形：

  • border-radius 组合：
    • 有无边框
    • 边框粗细
    • 圆角半径

如何现实背景居中，不重复，改变大小：

  • background-position
  • background-repeat
  • background--size(cover/contain)

如何平移、放大一个元素：

transfrom: translateX(100px);
transfrom: scale(2);

如何实现3D效果：

perspective: 500px;
transform-style: preserve-3d;
transform: translateX(-100px) rotateY(-90deg);