CSS实现不规则图形的立体效果_css 立体的矩形_无敌×哥的博客

drop-shadow 方法

filter: drop-shadow(x偏移量 y偏移量模糊半径颜色) 方法能给图像设置阴影效果。可接受参数和 box-shadow 基本一致，但不包括扩张半径和 inset 关键字。它可以给任何非透明部分（包括文字）一视同仁地打上阴影。

立体效果机理

立体感本质上是光影效果，在图形顶部的亮色投影或底部的暗色投影都可以实现立体感。对暗色投影要求投影颜色越往底部越暗，为此需要添加多层沿y方向错开的投影模拟逐步变暗的效果。对亮色投影反之。使用 hsl() 颜色表示法可以更方便地操作亮度。记住在最底层添加一层强烈模糊的暗投影可以让立体效果更突出。

filter: drop-shadow(0 1px hsl(16deg, 100.0%, 45.0%)) 
        drop-shadow(0 2px hsl(16deg, 100.0%, 40%)) 
        drop-shadow(0 3px hsl(16deg, 100.0%, 35%)) 
        drop-shadow(0 4px hsl(16deg, 100.0%, 30%)) 
        drop-shadow(0 5px hsl(16deg, 100.0%, 25%)) 
        drop-shadow(0 5px 5px black);
                    无立体效果立体效果实现方式box-shadow是实现矩形图形立体化的常用方法，text-shadow可实现文字的立体化，但对于其他不规则图形的立体化，上述方法就爱莫能助了。对此，filter展示了其强大之处。filter: drop-shadow()方法filter: drop-shadow(x偏移量 y偏移量 模糊半径 颜色) 方法能给图像设置阴影效果。可接受参数和 box-sha...
				1.元素的 width/height/padding/margin 的百分比基准
设置 一个元素width/height/padding/margin 的百分比的时候，大家可知道基准是什么？
举个栗子：
.parent {
  width: 200px;
  height: 100px;
.child {
  width: 80%;
  height: 80%...
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-U...
				首先我们来学习一下正方体的几何解构。
分为上下左右前后6个面，所以我们先创建6个正方形面，然后利用定位让他们都重叠在一起。然后利用移动+旋转将这6个面拼凑成一个正方体。具体代码如下
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.
				今天这篇文章所实现的动画效果起源于一个小小的想法，这个想法来自于另一个网站的一篇文章，它介绍了如何在网页中使用CSS、图片和JavaScript创建立体的柱状图。在阅读了那篇文章之后，我想挑战一下，尝试使用纯CSS来实现相同的效果。一开始的难点在于创建一个六面半透明的立方体，而后面的难点在于如何创建一个完整的带有动画效果的3D柱状图。
下面，我们就一起来看一下如何解决这些难点。
让我们先列举一些要实现的要求，我们所实现的柱状图应该是：
背景独立（即柱状图与背景互不影响）
自适应的（柱子数量的多少不会影响.
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
				可以使用 CSS 的 `animation` 属性来实现文字的渐渐浮现效果。
首先，你需要给要实现这个效果的文字元素设置一个 `animation` 属性，并指定一个动画名称。例如：
```css
.fade-in {
  animation: fadeIn 4s;
然后，你需要在你的 CSS 中定义这个动画。动画由两部分组成：动画名称和动画规则。动画规则用来指定动画如何进行，例如它的持续时间、速度曲线、延迟时间等。
```css
@keyframes fadeIn {
  from {
    opacity: 0;
    opacity: 1;
上面的代码中，我们定义了一个名为 `fadeIn` 的动画，该动画的规则指定了动画的起点（从透明度为 0 开始）和终点（到透明度为 1 结束）。
最后，你只需要在 HTML 中的文字元素上应用这个类即可看到文字的渐渐浮现效果。
```html
<div class="fade-in">我是文字</div>
希望这个答案能帮到你！