做到一题关于“转圈圈的等边三角形”的题目
做到一题关于“转圈圈的等边三角形”的题目,开始的时候并不知道怎么做,不得不说关键时候还是度娘管用,
这里用到了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>