HTML练习——————DAY3

最新推荐文章于 2024-05-13 20:39:18 发布

好吃的都给你呀

最新推荐文章于 2024-05-13 20:39:18 发布

阅读量112

点赞数

分类专栏：前端杂文文章标签： HTML 练习入门

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_39565202/article/details/102560460

版权

前端杂文专栏收录该内容

34 篇文章 0 订阅

订阅专栏

本次练习设置了动画效果，将文字设置为炫彩、图片设置为旋转的动画。

动画设置方式：

/* 第一种，开始动作和结束动作 */
@keyframes donghua{
    from{

    }to{

    }
}
/* 分段执行 */
@keyframes donghua2{
    0%{

    }20%{

    }40%{

    }80%{

    }100%{
        
    }
}

下面为图片（网页效果为动态，下图为静态图片）：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>乔巴</title>
    <link rel="stylesheet" href="Style.css">
</head>
<body>
    <div>
        <img src="乔巴.jpg" alt="">
        <img src="乔巴a.gif" alt="">
        <section>
            <h1>托尼托尼·乔巴</h1>
            <h2>船医</h2>
            <h3>赏金：100贝利<br><br>爱吃棉花糖的小乔巴</h3>
        </section>
        
    </div>
</body>
</html>


@keyframes donghua{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}
@keyframes secai{
    0%{
        color: pink;
    }10%{
        color: plum;
    }20%{
        color: powderblue;
    }30%{
        color: rgb(106, 169, 228);
    }40%{
        color: salmon;
    }50%{
        color: sandybrown;
    }60%{
        color: seagreen;
    }70%{
        color: sienna;
    }80%{
        color: silver;
    }90%{
        color: slategray;
    }100%{
        color: springgreen;
    }
}
@keyframes secai2{
    0%{
        color: rgb(106, 169, 228);
    }10%{
        color: plum;
    }20%{
        color: powderblue;
    }30%{
         color: sandybrown;
    }40%{
        color: salmon;
    }50%{
        color: pink;
    }60%{
        color: seagreen;
    }70%{
        color: springgreen;color: sienna;
    }80%{
        color: silver;
    }90%{
        color: slategray;
    }100%{
        color: sienna;
    }
}
@keyframes xuanzhuan{
    0%{
        transform: rotate(30deg) ;
        
    }
    50%{
        transform: rotate(0deg) scale(1.5,1.5);
    }
    100%{
        transform: rotate(30deg) scale(0.9,0.9);
       
    }
}
body{
    background-color:rgb(106, 169, 228);
}
h1,h2{
    margin:0;
}
p{
    margin:10px;
}
div section h1{
    float: right;
    font-size: 50px;
    animation: secai 3s linear infinite;
    position: relative;
    top:-150px;
    left: 240px;
}
div section h2{
    
    font-size: 40px;
    animation: secai2 3s linear infinite;
    position: relative;
    top:30px;
    left: 70px;
}
div section h3{
    font-size: 30px;
    animation: secai2 2.8s linear infinite;
    position: relative;
    top:40px;
    left: 70px;
}
div{
    float: left;
    width: 800px;
    height: 500px;
    border: 10px solid white;
    box-shadow: 0 0 40px pink;
    background-color: blanchedalmond;
    position: relative;
    top:200px;
    left: 400px;
    transform: rotate(30deg);
    animation: xuanzhuan 2s linear infinite;
}

div img:nth-child(1){
    width: 200px;
    height: 200px;
    border-radius: 50%;
    position: relative;
    top:20px;
    left: 20px;
    animation: donghua 2s linear infinite;
}
div img:nth-child(2){
    float: right;
    width: 370px;
    height: 250px;
    border:3px solid rgb(216, 146, 158);
    position: relative;
    top:  190px;
    right: 90px;
    border-radius: 10px;
}

好吃的都给你呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML练习——————DAY3

本次练习设置了动画效果，将文字设置为炫彩、图片设置为旋转的动画。动画设置方式：/* 第一种，开始动作和结束动作 */@keyframes donghua{ from{ }to{ }}/* 分段执行 */@keyframes donghua2{ 0%{ }20%{ }40%{ }80%{ }100%{ ...
复制链接

扫一扫

专栏目录