animate的使用

最新推荐文章于 2022-12-27 13:11:08 发布

AKA悍匪-洋洋

最新推荐文章于 2022-12-27 13:11:08 发布

阅读量287

点赞数

文章标签： html5 css html

本文链接：https://blog.csdn.net/BHGVGHJK/article/details/120696063

版权

1、先将body框架搭建好

<body>
<div class="boss">
    <!-- 头部 -->
    <div class="head">
        <div class="head_d1"></div>
        <p class="head_p1 animate__animated animate__fadeInLeft">欢迎来到某某电子电器有限公司！</p>
        <img class="head_img1 animate__animated animate__fadeInRight" src="img/000.png">
        <p class="head_p2 animate__animated animate__fadeInRight">服务热线：</p>
        <p class="head_p3 animate__animated animate__fadeInRight">400-0000-000</p>
    </div>
    <!-- 身体 -->
    <div class="body">
        <img class="body_img1 animate__animated animate__fadeInLeft" src="img/logo.png">
        <p class="body_p1 animate__animated animate__fadeInLeft">某某电子电器公司</p>
        <div class="ddd">
            <span>&nbsp;&nbsp;网站首页&nbsp;&nbsp;</span>
            <span>&nbsp;&nbsp;关于我们&nbsp;&nbsp;</span>
            <span>&nbsp;&nbsp;产品中心&nbsp;&nbsp;</span>
            <span>&nbsp;&nbsp;新闻咨询&nbsp;&nbsp;</span>
            <span>&nbsp;&nbsp;联系我们&nbsp;&nbsp;&nbsp;</span>
        </div>
    </div>
    <!-- 底部 -->
    <div class="db">
        <div class="fff">
            <h3 class="animate__animated animate__fadeInLeft">领先的电器电器制造企业</h3>
            <h3 class="animate__animated animate__fadeInRight">FAKLJFKGHGOINASDJAIFJAJSF</h3>
            <h3 class="animate__animated animate__fadeInLeft">专业电子电器制造服务</h3>
            <h3 class="animate__animated animate__fadeInRight">SJFIANFOIAIJA</h3>
        </div>
        <img class="imgg1" src="img/efb4e328903794d12c19f786ee43a939.jpg">
    </div>
</div>
</body>

2、框架对应的css代码

        * {
            margin: 0;
            padding: 0;
        }

        .head_d1 {
            width: 100%;
            height: 50px;
            background-color: rgb(230, 230, 230);
        }

        .head_p1 {
            margin-top: -38px;
            margin-left: 10px;
        }

        .head_img1 {
            position: absolute;
            top: 5px;
            right: 340px;
            width: 40px;
            height: 40px;
        }

        .head_p2 {
            position: absolute;
            top: 10px;
            right: 225px;
            font-size: 20px;
        }

        .head_p3 {
            position: absolute;
            top: 10px;
            right: 100px;
            font-size: 20px;
            color: rgb(115, 115, 255);
        }

        .body_img1 {
            margin-top: 30px;
            margin-left: 30px;
            width: 90px;
            height: 80px;
        }

        .body_p1 {
            font-size: 40px;
            margin-top: -70px;
            margin-left: 125px;
        }

        .ddd {
            float: right;
            margin-top: -40px;
            font-size: 20px;
            font-weight: 500;
        }

        .fff {
            position: absolute;
            font-size: 40px;
            top:30%;
            left: 30%;
        }

        h3 {
            color: white;
            text-align: center;
        }
        .imgg1{
            margin-top: 20px;
            width: 1530px;
            height: 550px;
        }

3、在网上搜索animate并找到相应的css包

/*链接对应的css*/
<link rel="stylesheet" href="./css/animate.css">

/*在p1后面空格输入animate__animated，再空格输入想要的样式（animate__fadeInLeft：表示从左往右进入）*/
<p class="body_p1 animate__animated animate__fadeInLeft">某某电子电器公司</p>

AKA悍匪-洋洋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
animate的使用

1、先将body框架搭建好<body><div class="boss">  <div class="head"> <div class="head_d1"></div> <p class="head_p1 animate__animated animate__fadeInLeft">欢迎来到某某电子电器有限公司！</p>
复制链接

扫一扫