做到一题关于“转圈圈的等边三角形”的题目

最新推荐文章于 2024-08-05 22:52:29 发布

殇痕TT

最新推荐文章于 2024-08-05 22:52:29 发布

阅读量513

点赞数 2

分类专栏： web前端文章标签： css3 css 动画

本文链接：https://blog.csdn.net/qq_32676793/article/details/74864957

版权

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

做到一题关于“转圈圈的等边三角形”的题目

做到一题关于“转圈圈的等边三角形”的题目，开始的时候并不知道怎么做，不得不说关键时候还是度娘管用，

这里用到了css3的动画animation，和一些基本的css样式添加，初学者第一次发博客请见谅

题目要求：

转圈圈的等边三角形
使用div元素创立一个边长为30px的等边三角形（尖朝上），让该等边三角形以5秒为周期重复的沿着边长为200px的正方形做顺时针运动，起始颜色为红色，到右上角时平滑的渐变为黄色，到右下角时渐变为蓝色，到左下角时渐变为绿色；请兼容Firefox、Safari、Chrome、Opera浏览器

效果图：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>转圈圈的等边三角形</title>
        <link href="css/index.css" rel="stylesheet" type="text/css">
        <style type="text/css">
            .triangle
            {

                width:0px;
                height:0px;
                /*No.1*/
                /*开始写代码，请实现20px等边三角形，以及制定动画效果，请兼容Firefox、Safari、Chrome、Opera浏览器*/
                border-bottom:26px solid red;
                border-left:15px solid transparent;
                border-right:15px solid transparent;
                position: absolute;
                -webkit-animation:move1 5s infinite;
                -o-animation:move1 5s infinite;
                animation:move1 5s infinite;
                /*end_code*/
            }
            .box{
                -webkit-animation:followMove 5s infinite;   //动画 5秒 重复n次
                -o-animation:followMove 5s infinite;
                animation:followMove 5s infinite;
                width:200px;
                height:200px;
                position:relative;
                border:1px solid red;
                left:10px;
                margin: 0 auto;
            }
            /*No.2*/
            /*开始写代码，请实现详细的动画效果，请兼容Firefox、Safari、Chrome、Opera浏览器*/

            @keyframes move1 {
                0%{left:-7.5%;top:0;border-bottom-color: red;}
                25%{left:92.5%;top:0;border-bottom-color: yellow;}
                50%{left:92.5%;top:100%;border-bottom-color: blue;}
                75%{left:-7.5%;top:100%;border-bottom-color: green;}
                100%{left:-7.5%;top:0;border-bottom-color: red;}
            }

             @keyframes followMove {
                0%{border-color:red;}
                25%{border-color: yellow;}
                50%{border-color:blue;}
                75%{border-color:green;}
                100%{border-color:red;}
            }
        </style>
    </head>

    <body>          
        <div></div>
        <script type="text/javascript">
            var oDiv = document.getElementsByTagName('div')[0];
            var oDivChild = document.createElement('div');
            oDivChild.className='triangle';
            oDiv.className='box';
            oDiv.appendChild(oDivChild);
            //居中
            oDiv.style.marginTop = (document.documentElement.clientHeight-oDiv.offsetHeight)/2+"px";
        </script>
    </body>
</html>

殇痕TT

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
做到一题关于“转圈圈的等边三角形”的题目

做到一题关于“转圈圈的等边三角形”的题目，开始的时候并不知道怎么做，不得不说关键时候还是度娘管用，这里用到了css3的动画animation，和一些基本的css样式添加，初学者第一次发博客请见谅题目要求：转圈圈的等边三角形使用div元素创立一个边长为30px的等边三角形（尖朝上），让该等边三角形以5秒为周期重复的沿着边长为200px的正方形做顺时针运动，起始颜色为红色，到右上角时平滑的渐变为黄色
复制链接

扫一扫