css案例（1）

1、定位动画：

思路:
1、animation 曲线使用 linear 线性变化在这里更合适，
2、定义多个光圈，动画延迟执行
3、设置透明度1->0 有扩散效果

核心代码：

<div class="map">
        <div class="city">
            <div class="dotted"></div>
             <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
    </div>

 <style>
        body,html {
            background-color: #333;
            height: 100%;
        }
        
        .map {
            position: relative;
            height: 100%;
            width: 100%;
        }
        
        .city {
            position: absolute;
            top:50%;
            left: 50%;
            /* 可以根据具体坐标调整位置 */
            color: #fff;
        }
        .dotted {
            width: 8px;
            height: 8px;
            background-color: #09f;
            border-radius: 50%;
        }
        
        .city div[class^="pulse"] {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 8px;
            height: 8px;
            box-shadow: 0 0 12px #009dfd;
            border-radius: 50%;
            animation:  pulse 1.2s linear infinite;
        }
        .city div.pulse2 {
            animation-delay: 0.4s;
        }
        
        .city div.pulse3 {
            animation-delay: 0.8s;
        }
        
        @keyframes pulse {
            0% {}
            70% {
                /* transform: scale(5);  我们不要用scale 因为他会让 阴影变重*/
                width: 40px;
                height: 40px;
                opacity: 1;
            }
            100% {
                width: 70px;
                height: 70px;
                opacity: 0;
            }
        }
    </style>

2、图片缩放功能、增加用户体验感

a:hover img{
            transform: scale(1.1);
        }

 <div>
        <a href="#"><img src="media/scale.jpg" alt=""></a>
    </div

3、毛玻璃+卡片旋转（用animation效果可能更好）
思路：

• 1、 position: absolute使两卡片定位重叠 后面那个设置opacity:0（用display:none也可以），并反转180度（transform: rotateY(180deg)
• 2.父元素设置hover过度旋转180度同上，并改变两卡片透明度

毛玻璃效果：

• 1、背景图片设置： filter: blur(5px);减弱图片存在感
• 2、rgb设置背景颜色和通透度（可以通过透明度微调效果）

background-color: rgba(255, 255, 255, .3); 
box-shadow:0 0 15px rgba(0, 0, 0, .3);

效果图===没有

  <div class="container">
            <img src="media/scale.jpg" alt="" class="bg">
            <div class="text">
                <div class="origin">123</div>
                <div class="reserve">456</div>
            </div>
        </div> 

<style>
    html,body{
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        background-color: #333;
    }
    .container{
        position: relative;
        width: 100%;
        height: 100%;
    }      
    .bg{
        position: absolute;
        width: 100%;
        height: 100%;
        top:0;
        left: 0;
        filter: blur(5px);
    }
    .text{
        position: relative;
        top:50%;
        left: 50%;
        transform:translate(-50%,-50%);
        overflow: hidden;
        width: 500px;
        height: 700px;
        background-color: rgba(255, 255, 255, .3);
        box-shadow:0 0 15px rgba(0, 0, 0, .3);
        border-radius: 15px;
    }
    .text:hover{
        transition: all 2s ;
        transform: translate(-50%,-50%) rotateY(180deg);
    }
    
    .origin{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform:rotateY(0deg);
        opacity: 1;
        transition: all .3s ;
    }
    .text:hover .origin{
        opacity: 0;
    }
    .text:hover .reserve{
        opacity: 1;
    }
    .reserve{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform:rotateY(180deg);
        opacity: 0;
        transition: all .3s ;
    }
</style>

4、精灵图实现动画（不太实用）

<div></div>

<style>
    body {
        background-color: #ccc;
    }
    
    div {
        position: absolute;
        width: 200px;
        height: 100px;
        background: url(media/bear.png) no-repeat;
        /* 我们元素可以添加多个动画， 用逗号分隔 */
        animation: bear .4s steps(8) infinite, move 3s forwards;
    }
    //背景图片移动
    @keyframes bear {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: -1600px 0;
        }
    }
    //移动
    @keyframes move {
        0% {
            left: 0;
        }
        100% {
            left: 50%;
            transform: translateX(-50%);
        }
    }
</style>