9.3 CSS-Transition动画案例

案例效果图

案例结构分析

　　页面由三个圆形图片组成，因此可以通过列表实现，其中每个列表项由一个图片组成，设置这个图片的边框为圆形边框。在每个圆形列表项内，还包含一些文字说明，可以在列表项中嵌入div来加入文字。

案例样式分析

　　首先，需要将三个列表项水平排列，设置每个列表项的大小为正方形。接下来，将每个列表项设置为圆角，并加入背景图片。在每个列表项中嵌入div，并且设置这个div的内容不可见，当鼠标悬停在这个div上时，将div的内容设置成可见，并将不可见到可见的过程通过transitation动画实现。为了将动画显示的更加鲜明，通过box-shadow设置盒子的阴影颜色，并且通过鼠标悬停在动态地改变盒子的阴影颜色。

案例源代码

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .ch-grid {
            margin: 20px 0 0 0;
            padding: 0;
            list-style: none;
            display: block;
            text-align: center;
            width: 100%;
        }

        .ch-grid:after,
        .ch-item:before {
            content: '';
            display: table;
        }

        .ch-grid:after {
            clear: both;
        }

        .ch-grid li {
            width: 220px;
            height: 220px;
            display: inline-block;
            margin: 20px;
        }
        .ch-item {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            position: relative;
            cursor: default;
            box-shadow:
                    inset 0 0 0 0 rgba(200,95,66, 0.4),
                    inset 0 0 0 16px rgba(255,255,255,0.6),
                    0 1px 2px rgba(0,0,0,0.1);
            transition: all 0.4s ease-in-out;
        }
        .ch-img-1 {
            background-image: url(images/1.jpg);
        }

        .ch-img-2 {
            background-image: url(images/2.jpg);
        }

        .ch-img-3 {
            background-image: url(images/3.jpg);
        }
        .ch-info {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            overflow: hidden;
            opacity: 0;
            transition: all 0.4s ease-in-out;


        }
        .ch-info h3 {
            color: #fff;
            text-transform: uppercase;
            position: relative;
            letter-spacing: 2px;
            font-size: 22px;
            margin: 0 30px;
            padding: 65px 0 0 0;
            height: 110px;
            font-family: 'Open Sans', Arial, sans-serif;
            text-shadow:
                    0 0 1px #fff,
                    0 1px 2px rgba(0,0,0,0.3);
        }

        .ch-item:hover {
            box-shadow:
                    inset 0 0 0 110px rgba(200,95,66, 0.4),
                    inset 0 0 0 16px rgba(255,255,255,0.8),
                    0 1px 2px rgba(0,0,0,0.1);
        }
        .ch-item:hover .ch-info {
            opacity: 1;

        }
    </style>
</head>  
<body>  
<ul class="ch-grid">  
    <li>
        <div class="ch-item ch-img-1">
            <div class="ch-info">
                <h3>Use what you have</h3>
            </div>
        </div>
    </li>
    <li>
        <div class="ch-item ch-img-2">
            <div class="ch-info">
                <h3>Common Causes of Stains</h3>
            </div>
        </div>
    </li>
    <li>
        <div class="ch-item ch-img-3">
            <div class="ch-info">
                <h3>Pink Lightning</h3>
            </div>
        </div>
    </li>
</ul>  
</body>  
</html>