项目中的动画实例

最新推荐文章于 2022-07-30 12:42:24 发布

马优晨

最新推荐文章于 2022-07-30 12:42:24 发布

阅读量388

点赞数

分类专栏： CSS3 文章标签：项目中的动画实例动画实例动画案例 css3动画实例 css3

本文链接：https://blog.csdn.net/qq_24147051/article/details/106348195

版权

CSS3 专栏收录该内容

49 篇文章 1 订阅

订阅专栏

在这里插入图片描述

代码实现：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport"
        content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <style>
        .father {
            width: 300px;
            height: 280px;
            border: 1px solid red;
            margin: 300px auto;
            overflow: hidden;
            position: relative;
            color: #000000;
            font-size: 13px;
        }

        .father img {
            width: 300px;
            height: 200px;
            background: yellow;
        }

        .bk {
            width: 300px;
            height: 200px;
            background: #00aced;
            opacity: 0.5;
            position: absolute;
            top: -200px;
            left: 0;
            transition: all 2s;
        }

        .father:hover .bk {
            top: 0px;
        }

        .son {
            width: 300px;
            height: 80px;
            background: #00b488;
        }

        .son1 {
            animation: sport 2s ease-in-out;
            width: 300px;
            height: 80px;
            text-align: center;
            color: #fff;
            padding-top: 18px;
        }

        @keyframes sport {
            0% {
                transform: translateY(100px);
                opacity: 1;
            }

            100% {
                transform: translateY(0px);
                opacity: 1
            }
        }
    </style>
</head>

<body>
    <div class="father">
        <img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3835734796,1631195054&fm=26&gp=0.jpg">
        <div class="bk">
        </div>
        <div class="son">
            <div class="son1">
                <div>标题标题</div>
                <p>内容内容内容内容内容内容内容内容</p>
            </div>
        </div>
    </div>
</body>

</html>

原理说明：
在最外层设置一个d盒子，限制高度，宽度，超出隐藏，并且使用relative定位。

上面hover效果： 使用transition 改变top的值来实现，先将元素放在框外面，然后hover的时候将top值变成0；

下面自动上移： 使用animation动画，设置动画初始向下Y轴下方100px,然后动画结束，变回原来的位置。

在这里插入图片描述

<!DOCTYPE html>
<html dir="ltr" lang="en">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="webhivers" />
    <meta name="format-detection" content="telephone=no">
    <meta name="keywords" content="" />
    <meta name="description" content="" />

    <title>arrow-right</title>
    <style>
        .container {
            width: 1000px;
            margin: 0 auto;
        }

        .move {
            position: relative;
            margin-left: -16px;
            animation-name: move;
            animation-duration: 1.5s;
            /*完成一个周期需要的时间 */
            animation-fill-mode: both;
            /* 属性规定动画在播放之前或之后，其动画效果是否可见
            none 不改变默认行为
            forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
            backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
            both  向前和向后填充模式都被应用 */
            animation-iteration-count: infinite;
            /* font-style: inherit; */
            animation-timing-function: linear;
            animation-delay: 0.9s;
        }

        @keyframes move {
            0% {
                left: 0%;
                opacity: 0;
            }

            70% {
                left: 70%;
                opacity: 0.7
            }

            100% {
                left: 100%;
                opacity: 0;
            }
        }
    </style>


</head>

<body>
    <div class="container">
        <div style="width:300px;">
            <div class="move">
                <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2219285114,2237515136&fm=26&gp=0.jpg"
                    alt="">
            </div>
        </div>
    </div>
</body>

</html>