网页设计常见css3动画效果(摆动、缩放、旋转、透明、反弹)

网页上常看到某个DIV或图片有渐入、摆动、缩放、旋转、透明、反弹等效果,今天分享给大家!

网页设计常见css3动画效果(摆动、缩放、旋转、透明、反弹)

<!DOCTYPE html>
<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>

所用CSS文件下载:链接:https://pan.baidu.com/s/1RCVmRmwAEiMv-DUbRsSokw 密码:j2si。

本站下载:model.min

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/10517.html

(1)
上一篇 2022年5月4日 上午10:30
下一篇 2022年5月10日 下午7:40

99%的人还看了以下文章

  • 一句代码给图片加倒影-CSS3

    本文使用纯CSS代码给图片加倒影,CSS代码 : img { -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.1))); } 效果如下图所示: 完整代码: &lt…

    2019年8月18日
    1.4K0
  • 第13课:HTML音频/视频

    HTML 音频 在 HTML 中播放音频并不容易!您需要谙熟大量技巧,以确保您的音频文件在所有浏览器中(Internet Explorer, Chrome, Firefox, Safari, Opera)和所有硬件上(PC, Mac , iPad, iPhone)都能够播放。 <embed> 元素 <embed> 标签,这是一个 HT…

    2018年1月18日
    2.3K0
  • CSS图形绘制练习-最常见的40种形状和图形源码分享

     CSS3可以实现很多漂亮的图形,本文从互联网收集了最常见的40种形状和图形,现分享给大家。 包括圆形,椭圆形,三角形,倒三角形,左三角形,右三角形,菱形,梯形,长方形,正方形,圆环,平行四边形,五角星,六角星,五边形,六边形,八边形,心形,蛋形,无穷符号,消息提示框,钻石,八卦图,食豆人,扇形,月牙,顶左直角三角形,顶右直角三角形 ,底左直角三角形 ,底右…

    2020年2月22日 网页制作
    3.3K0
  • 如何制作图片按钮,并为图片按钮添加提交表单和重置表单功能

    网页中有表单,表单的默认按钮样式不是很好看,很多人为了美观使用图片做按钮。 今天中国网页设计给大家分享在网页制作中怎么制作图片按钮,并为图片按钮添加提交表单和重置表单功能。 一、图片按钮的制作方法 1、<input type=”image” /> 定义图像形式的提交按钮。 <input type=”image” sr…

    2018年9月30日
    2.7K0
  • 第8课:如何做各种超链接?

    在这一课,你将学习如何在网页之间做超链接。 如何做超链接? 做链接只需一个元素<a>和一个属性href就行了。下面是一个例子,它是一个指向www.125jz.com的链接: 例1: <a href=”http://www.125jz.com/”>指向www.125jz.com的链接</a> 该例在浏览器中将显示如下: 指向…

    2018年1月20日
    2.2K0
  • 0基础学CSS

    本CSS教程能够让你在数小时内入门CSS,要求你有基本的HTML经验。

    2020年2月22日
    1.7K0

发表回复

登录后才能评论