css qq漂流瓶效果

CSS是前端开发中必不可少的一部分，在网站设计中有着非常重要的作用。QQ漂流瓶效果也是一种常见的CSS效果，它可以使得网页看起来更加美观。

下面是QQ漂流瓶效果的CSS代码，使用pre标签展示：

    .bottle {
        position: relative;
        width: 40px;
        height: 80px;
        overflow: hidden;
        cursor: pointer;
    }
    .bottle:before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 80%;
        height: 80%;
        margin: -40% 0 0 -40%;
        background-color: #fff;
        border-radius: 50%;
        Box-shadow: 0 0 0 1px #1E9FFF,0 0 20px rgba(30,159,255,0.5);
        animation: bubbleerupt 3s infinite;
        transform-origin: center center;
    }

    .bottle:after {
        content: "";
        position: absolute;
        left: 50%;
        top: 10%;
        width: 0;
        height: 0;
        margin: 0 0 0 -10px;
        border-top: 20px solid rgba(255,0.8);
        border-bottom: 30px solid transparent;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        transform-origin: center bottom;
        animation: bottlefloat 6s infinite;
    }

    @keyframes bottlefloat {
        0% {
            transform: translateY(-6px) rotate(0deg);
        }
        50% {
            transform: translateY(6px) rotate(360deg);
        }
        100% {
            transform: translateY(-6px) rotate(720deg);
        }
    }

    @keyframes bubbleerupt {
        0% {
            transform: scale(0);
        }
        50% {
            transform: scale(1);
        }
        100% {
            transform: scale(2);
        }
    }

这段代码主要是使用伪元素:before和:after来创建漂流瓶的外观，同时借助CSS3的动画效果来实现气泡上升和漂流瓶摇晃的效果。通过灵活运用CSS，我们可以制作出富有创意的效果，让网页更加生动有趣。