正在召唤神秘力量
导航

萌即是正义!时不时分享一些ACG活动记录与有趣代码的小站!

【CSS3】「CSS3各种图像功能」的案例

作者:广树·时间:2016-04-04 10:45:02·分类:CSS/HTML

「CSS3各种图像功能」案例

text-shadow的案例

单纯的文本阴影

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

多重文本阴影

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

border-radius与box-shadow的案例

单纯的阴影

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;

linear-gradient 的案例

单纯垂直的渐变

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;

transition 的案例

背景图像的过渡(鼠标经过显示)

.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>

animation 的案例

单纯的动画

.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; }
}

transform 的案例

平移

@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);
}
}

根据变化顺序不同结果也不一样

translateX rotate 的顺序
rotate translateX 的顺序
<style>
  .transform7 {
    width:20px; height:20px; background:#c44;
  }
  @keyframes tf7-1 {
    0%   { transform:translateX(40px) rotate(0); }
    100% { transform:translateX(40px) rotate(360deg); }
  }
  @keyframes tf7-2 {
    0%   { transform:rotate(0) translateX(40px); }
    100% { transform:rotate(360deg) translateX(40px); }
  }
</style>
<div class="transform7" style="animation: tf7-1 4s infinite linear;
                               margin:20px auto;"></div>
<div class="transform7" style="animation: tf7-2 4s infinite linear;
                               margin:50px auto;"></div>

DOM阶层与transform的关系

<style>
.t8 {
  width:8px; height:40px; background:#c44;
  animation:tf8 4s infinite;
  transform-origin:center top;
}
@keyframes tf8 {
  0%, 100% { transform:translateY(40px) rotate(-20deg); }
  50% { transform:translateY(40px) rotate(+20deg); }
}
</style>
<div class="t8">             <!-- 根  -->
  <div class="t8">           <!-- 第二节 -->
    <div class="t8">         <!-- 第三节 -->
      <div class="t8"></div> <!-- 最前端  -->
    </div>
  </div>
</div>

根据平行投影做三维变化

@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的效果

默认
perspective-origin:50% 90%;
perspective-origin:90% 50%;
perspective-origin:50% 10%;

backface-visibility的效果

backface-
visivility:visible;
backface-visivility:hidden;

transform-style 的效果

transform-style: flat;
transform-style: preserve-3d;
<style>
  .t13-outer { perspective:100px; }
  .t13-parent {
    margin:0 auto; width:80px; height:80px;
    background:url(image.jpg);
    animation: tf9 4s infinite; /* 参考「三维旋转」的关键帧 */ }
  .t13-child {
    width:40px; height:40px; background:#c44;
    transform:translateZ(10px); /* 子元素前移10px */ }
</style>
<div class="t13-outer">
  <div class="t13-parent"><div class="t13-child"></div></div>
</div>
<div class="t13-outer">
  <div class="t13-parent" style="transform-style:preserve-3d;">
    <div class="t13-child"></div>
  </div>
</div>

CSS滤镜的案例

预设的滤镜

grayscale(100%)
sepia(100%)
saturate(100%)
hue-rotate(90deg)
invert(100%)
opacity(30%)
brightness(30%)
contrast(50%)
blur(2px)
drop-shadow
(2px 2px 4px black)
#CSS3
侧边栏
最新评论
广树
2024-03-29
@电脑星人:如果只是比对的话,是一个不错的方法。举这个例子只是想表达假名有很多看起来一样,但不是一样的字符,开发的时候如果没把这个挂心上的话可能会造成很多问题😅
电脑星人
2024-03-29
```javascript const c2 = 'ド'; console.log(c2.length); // 2 const c1 = 'ド'; console.log(c1.length); // 1 console.log(c2 === c1); // false console.log(c2.normalize() === c1); // true console.log(c2.normalize().length); // 1 ```
广树
2024-03-27
@关关:这里只是统计用的,不是都参加😅
广树
2024-03-27
@Chise Hachiroku:那不就是倒爷吗,确实要和倒爷比的话
关关
2024-03-27
你的生活我的梦……
正在攻略

圣兽之王.jpg

传颂之物

PSN奖杯卡

PSN奖杯卡

赞助商广告