CSS3动画小案例

1气泡效果
原理：
a）首先设置多背景图片
background: url(“2.jpg”) no-repeat left top
,url(“2.jpg”) no-repeat right bottom;

b）然后添加变换之后效果
.box:hover{
background-position: left bottom,right top;
}

c）最后设置过渡 transition: all 2s;

在这里插入图片描述

    .box{
        width:300px;
        height:150px;
        border: 1px ;
        margin: 100px auto;

        border-radius: 10px;
        background: url("2.jpg") no-repeat left top
    ,url("2.jpg") no-repeat right bottom;
        background-color: blue;
        /*添加过渡*/
        transition: all 2s;
    }
    .box:hover{
        background-position: left bottom,right top;
    }
</style>

2.小火箭发射练习

<style>
    html,body{
        height:100%;
    }
    body{
        background-color: deepskyblue;
    }
    .rocket{
        width:80px;
        position: absolute;
        left:0;
        bottom:0;
        /*45度旋转*/
        transform:translate(-100px,100px) rotate(45deg);
        transition:all 1s;

    }
    body:hover .rocket{
        transform: translate(500px ,-500px) rotate(45deg);
    }
</style>

在这里插入图片描述

3.仿小米练习

代码
    <style>
         body{
            background-color: #eeeeee;
        }
        .items{
            width:1100px;
            margin: 100px auto;
        }
        .item{
            float: left;
            width:234px;
            height:300px;
            background-color: #ffffff;
            margin-right: 20px;
            text-align: center;
            position: relative;
            overflow: hidden;
            transition: all 0.7s;
        }
        .item:hover{
            box-shadow: 0 0 30px 2px #ff4400;
            margin-top: -3px;
        }
        .item img{
            width:234px;
            height:200px;
        }
        .item span{
            position: absolute;
            width:100%;
            height:100px;
            background-color: #f40;
            left:0;
            bottom: -100px;
            /*过渡*/
            transition:all 2s;
        }
        .item:hover span{
            bottom:0;
        }
    </style>
</head>
<body>
<div class="items">
    <div class="item">
        <img src="1.jpg">

    </div>
    <div class="item">
        <img src="2.jpg">
        <span></span>
    </div>
    <div class="item">
        <img src="1.jpg">
        <span></span>
    </div>
    <div class="item">
        <img src="2.jpg">
        <span></span>
    </div>
</div>
</div>

猜你喜欢