css3动画效果

为了方便开发,笔者写了几个css3的动画效果,并用gulp压缩一下。直接在animation引用class即可,目前适配了IE8~10,火狐以及谷歌。链接:https://pan.baidu.com/s/1RCVmRmwAEiMv-DUbRsSokw 密码:j2si。

演示gif图

使用代码


<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/model.min.css" />
        <title>title>
    head>
    <style>
        *{
            color: #FFFFFF;
        }
        .t-box{
            height: 78px;
            width: 78px;
            padding: 5px;
            background: linear-gradient(to right bottom,#a1c3f9,#4a86e8);
            border: 2px solid #3d7ce5;
            border-radius: 10px;
            float: left;
            margin: 5px 10px;
            box-sizing: border-box;
        }


    style>
    <body>
        <div align="center">
            <div class="model-main">
                <div style="overflow: hidden;">
                    <div class="t-box" style="animation: 2s left ease;">左入div>
                    <div class="t-box" style="animation: 2s left-transparent ease;">左入、透明div>
                    <div class="t-box" style="animation: 2s left-transparent-bounce ease;">左入、透明、反弹div>
                    <div class="t-box" style="animation: 2s right ease;">右入div>
                    <div class="t-box" style="animation: 2s right-transparent ease;">右入、透明div>
                    <div class="t-box" style="animation: 2s right-transparent-bounce ease;">右入、透明、反弹div>
                    <div class="t-box" style="animation: 2s top ease;">上入div>
                    <div class="t-box" style="animation: 2s top-transparent ease;">上入、透明div>
                    <div class="t-box" style="animation: 2s top-transparent-bounce ease;">上入、透明、反弹div>
                    <div class="t-box" style="animation: 2s bottom ease;">下入div>
                    <div class="t-box" style="animation: 2s bottom-transparent ease;">下入、透明div>
                    <div class="t-box" style="animation: 2s bottom-transparent-bounce ease;">下入、透明、反弹div>
                    <div class="t-box" style="animation: 2s rotate-transparent-bounce ease;">旋转、透明、反弹div>
                    <div class="t-box" style="animation: 2s rotate-transparent ease;">旋转、透明div>
                    <div class="t-box" style="animation: 1.5s roll-always infinite linear">一直摆动div>
                    <div class="t-box" style="animation: 2s roll-scale-always infinite linear">一直摆动、缩放div>
                    <div class="t-box" style="animation: 2s roll-scale-half-always infinite linear">一直摆动、半缩放div>
                    <div class="t-box" style="animation: 2s roll-scale-little-always infinite linear">一直摆动、小缩放div>
                    <div class="t-box" style="animation: 2s roll-scale-two-always infinite linear">一直摆动、双缩放div>
                    <div class="t-box" style="animation: 2s roll-scale-half-two-always infinite linear">一直摆动、双半缩放div>
                    <div class="t-box" style="animation: 2s roll-scale-little-two-always infinite linear">一直摆动、双小缩放div>
                    <div class="t-box" style="animation: 1s rotate infinite linear">一直旋转div>
                    <div class="t-box" style="animation: 1s rotate-top-left infinite linear">一直左上角旋转div>
                    <div class="t-box" style="animation: 2s rotate-scale ease">旋转div>
                    <div class="t-box" style="animation: 2s scale ease">缩放div>
                    <div class="t-box" style="animation: 2s scale-half ease">半缩放div>
                    <div class="t-box" style="animation: 2s scale-little ease">小缩放div>
                    <div class="t-box" style="animation: 2s scale-transparent ease">缩放、透明div>
                    <div class="t-box" style="animation: 2s scale-transparent-half ease">半缩放、透明div>
                    <div class="t-box" style="animation: 2s scale-transparent-little ease">小缩放、透明div>
                    <div class="t-box" style="animation: 1s scale-always infinite linear">一直缩放div>
                    <div class="t-box" style="animation: 1s scale-half-always infinite linear">一直半缩放div>
                    <div class="t-box" style="animation: 1s scale-little-always infinite linear">一直小缩放div>
                    <div class="t-box" style="animation: 2s rotate-transparent ease">旋转、透明div>
                    <div class="t-box" style="animation: 2s rotate-transparent-bounce ease">旋转、透明、反弹div>
                    <div class="t-box" style="animation: 2s rotate-scale ease">旋转、缩放div>
                    <div class="t-box" style="animation: 2s rotate-scale-bounce ease">旋转、缩放、反弹div>
                    <div class="t-box" style="animation: 2s rotate-transparent-scale ease">旋转、透明、缩放div>
                    <div class="t-box" style="animation: 2s rotate-transparent-scale-bounce ease">旋转、透明、缩放、反弹div>
                    <div class="t-box" style="animation: 2s transparent-all ease">全透明div>
                    <div class="t-box" style="animation: 2s transparent-half ease">半透明div>
                    <div class="t-box" style="animation: 2s transparent-little ease">小透明div>
                div>

            div>
        div>
    body>
html>

你可能感兴趣的:(css3动画效果)