CSS3-用过渡实现气泡效果

要想做一张泡泡浮动的效果图,首先要准备一张泡泡图片
CSS3-用过渡实现气泡效果_第1张图片

实现代码如下


<html lang="en">
<head>
    <meta charset="UTF-8">v {
            <title>过渡动画title>
            <style>
        .div{
            width: 343px;
            height: 100px;
            /*设置过渡效果,所有属性,时效1s,匀速*/
            transition: all 1s linear;
            margin: 100px auto;
            /*导入两张相同的图片作为背景,分别以图片的左上角和右上角为点来导入*/
            background: url("./img/paopao.png")  left top no-repeat, url("./img/paopao.png")  right bottom no-repeat;
            background-color: blue;

        }

        .div:hover {
            /*执行的效果为,两张背景图分别向相反的方向过渡*/
            background-position: right bottom, left top;
        }
    style>
<body>
    <div class="div">div>
body>
html>

运行效果

你可能感兴趣的:(css3)