「CSS3各种图像功能」案例

单纯的文本阴影

text-shadow: 2px 2px 4px #444;

多重文本阴影

text-shadow:
     0     0    4px #fff,
     1px  -5px  4px #ff3,
     2px -10px  6px #fd3,
    -2px -15px 11px #f80,
     2px -25px 18px #f20;

单纯的阴影

background-color: #fff4e0;
border-radius: 8px;
box-shadow: 4px 4px 4px 2px #ccc;

指定了inset的阴影

background-color: #fff4e0;
border-radius: 8px;
box-shadow: inset 4px 4px 4px 2px #ccc;

inset和一般的阴影并用

background-color: #fff4e0;
border-radius: 8px;
box-shadow:
    4px 4px 4px 2px #ccc,
    inset 2px 4px 4px 2px #ffe;

多重阴影叠加

background-color: #fff4e0;
border-radius: 8px;
border: 1px solid #876;
box-shadow: inset 4px 6px 20px #fff,
            inset -4px -4px 10px #ccbba0,
            inset 0 -45px #fec,
            0 0 4px #876,
            4px 4px 6px 2px #ccc;

单纯垂直的渐变

background: linear-gradient(#feb, #fb0);

指定了角度的渐变

background: linear-gradient(
  -45deg, #feb, #fb0);

指定多重渐变

background: linear-gradient(
  #feb, #fc4 50%, #fb0 51%, #fd9);

圆形渐变

background: radial-gradient(
  circle farthest-side, #feb, #fb0);

重复渐变

background: repeating-linear-gradient(
  -45deg, #feb, #fb0 20px, #feb 40px);

描边渐变

border-image: linear-gradient(
  #feb, #fb0 100px) 20/20px stretch;

和图像组合

background:
  radial-gradient(
    circle closest-side,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0) 90%, white),
  url(图片地址);

重复渐变组合

background:
  repeating-linear-gradient(
    rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0.3) 10px,
    transparent 10px, transparent 20px),
  repeating-linear-gradient(
    0deg, rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0.3) 10px,
    transparent 10px, transparent 20px),
  #44c;

背景图像的过渡（鼠标经过显示）

.transition1 {
  background: #c44;
  transition: background-color 1s;
}
.transition1:hover {
  background: #44c;
}

多重属性的过渡（鼠标经过显示）

.transition2 {
  background: #c44;
  width: 100px;
  transition:
    background-color 1s, width 1s;
}
.transition2:hover {
  background: #44c;
  width: 200px;
}

delay与curve（鼠标经过显示）

.transition3 {
  background: #c44;
  width: 100px;
  transition:
    background-color 0.5s linear 0.5s,
    width 1s linear;
}
.transition3:hover {
  background: #44c;
  width: 200px;
}

JavaScript与过渡（鼠标点击显示）

<div style="background: #c44;
            width:100px; height:80px;
            transition: width 1s;"
     onclick="this.style.width='200px';">
</div>

单纯的动画

.animation1 {
  animation: anim1 4s infinite;
}

@keyframes anim1 {
0%, 100% { left:0px; }
50% { left:280px; }
}

根据关键帧的timing-function

.animation2 {
  animation: anim2 4s ease-in infinite;
}

@keyframes anim2 {
0%   { left:0px; }
50%  { left:280px;
       animation-timing-function:ease-out; }
100% { left:0px; }
}

鼠标经过动画

.animation3 div {
  animation: anim3 4s infinite;
  animation-play-state: paused;
}

.animation3:hover div {
  animation-play-state: running;
}

@keyframes anim3 {
0%, 100% { left:0px; }
50% { left:280px; }
}

多重效果动画

.animation4 {
  animation:
    anim4-1 0.5s infinite ease-out alternate,
    anim4-2 4s infinite linear alternate;
}

@keyframes anim4-1 {
0% { top:50px; }
100% { top:0px; }
}

@keyframes anim4-2 {
0% { left:0px; }
100% { left:280px; }
}

平移

@keyframes tf1 {
0%, 100% { transform:translateX(0); }
50% { transform:translateX(280px); }
}

旋转

@keyframes tf2 {
0%   { transform:rotate(0);
       animation-timing-function:linear; }
100% { transform:rotate(360deg); }
}

放大缩小

@keyframes tf3 {
0%, 100% { transform:scale(2, 0.5); }
50% { transform:scale(0.5, 2); }
}

斜变形

@keyframes tf4 {
0%, 100% { transform:skewX(-45deg); }
50% { transform:skewX(+45deg); }
}

transform-origin

.transform6 {
  animation: tf6 4s infinite;
  transform-origin: left top;
}

@keyframes tf6 {
0%   { transform:rotate(0);
       animation-timing-function:linear; }
100% { transform:rotate(360deg); }
}

多重变化叠加

@keyframes tf5 {
0% {
  transform:translateX(0) rotate(0);
  animation-timing-function:linear;
}
50% {
  transform:translateX(260px) rotate(180deg);
  animation-timing-function:linear;
}
100% {
  transform:translateX(0) rotate(360deg);
}
}

根据平行投影做三维变化

@keyframes tf9 {
0% {
  transform:rotateX(60deg) rotateZ(0);
  animation-timing-function:linear;
}
100% {
  transform:rotateX(60deg) rotateZ(360deg);
}
}

加上透视的三维变化

<style>
.transform10 {
  width:80px; height:80px;
  background:url(image.jpg);
  /*关键帧和前面通用 */
  animation:tf9 4s infinite;
}
</style>
<div style="perspective:100px;">
  <div class="transform10"></div>
</div>

perspective-origin的效果

backface-visibility的效果