网页设计常见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%的人还看了以下文章

  • css布局基础:定位练习1

    主要知识点: 1、5种常用定位:静态定位/相对定位/绝对定位/固定定位/吸附定位(磁铁定位) position:static/relative/absolute/fixed/sticky。 2、除静态定位外,都可以用left/top/bottom/right/z-index属性进行移动。 效果图: 效果说明:故宫文字段落设置背景色黑色透明,覆盖在图片底部。 …

    2020年4月4日
    3.3K0
  • CSS3动画:@keyframes animation 案例——制作滚动公告

    滚动公告的制作请参阅:Marquee标签实现跑马灯、滚动公告、通知效果 今天我们使用CSS3的@keyframes和animation 制作滚动文字公告。 @keyframes规则 @keyframes 规则用于创建动画。在@keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。 注释:当动画完成后,动画的状态会回到初始状…

    2019年2月26日
    6.6K0
  • css布局基础:浮动和清除浮动练习1

    主要知识点: 1、浮动:让元素脱离标准流,从而实现灵活的布局效果。 2、浮动只能左右,不能上下。float:left/right/none。 3、子元素浮动会造成父元素高度塌陷,清除浮动的3种方法: 方法1:通过overflow属性 方法2:通过clear属性 方法3:通过伪元素选择器(推荐) 效果图: 参考: <!DOCTYPE html> &…

    2020年4月4日
    3.3K0
  • 第10课:表格

    表格用来显示那些逻辑上以行和列显示的信息。 表格难学吗? 对于初学者来说,在HTML中创建表格似乎比较复杂,不过只要耐心细致地观察,你就会发现表格实际上与其它HTML元素相似,也具有严格的逻辑结构。 例1: <table> <tr><td>单元格1</td><td>单元格2</td>&l…

    2018年1月19日
    3.4K0
  • CSS3 transform:rotate()制作旋转图片

    在《CSS3 transition transform属性及实例详解》中我们实现了:鼠标放到图片上,图片等比例放大的效果,今天分享transform:rotate()制作旋转图片。 CSS3中的transform:rotate()可以实现旋转功能,可以在CSS里面设定旋转的角度,也可以设定旋转用多少时间来完成。 旋转图片HTML代码 <img src=…

    2019年1月29日
    7.1K1
  • 怎么让一长串英文字符自动换行?

    长串英文字符之间没有空格,整串都显示在一行,撑破了div,甚至跑到屏幕外了,如何解决? <!doctype html> <html> <head> <meta charset=”utf-8″> <title>怎么让一长串英文字符自动换行?|www.125jz.com</title> &l…

    2019年11月20日
    2.8K0

发表回复

登录后才能评论