【Web前端问题】如何动态画出椭圆

一根竖线慢慢转动,最后画成一个椭圆的效果,求大神贴出代码,不胜感激!

图片描述mg/bVH8uz

回答:

<!DOCTYPE html>
<html>

<head>

<meta charset="UTF-8">

<title></title>

<style>

*{ margin: 0; padding: 0; list-style: none;}

.box{

width:200px;

height: 200px;

border-radius: 50%;

border: 20px solid red;

animation: bounce-down 1.2s linear infinite;

}

@-webkit-keyframes bounce-down {

25% {-webkit-transform: rotateX(-90deg);}

50%{-webkit-transform: rotateX(-60deg);}

75% {-webkit-transform: rotateX(-30deg);}

100%{-webkit-transform: rotateX(0deg);}

}

</style>

</head>

<body>

<div class="box"></div>

</body>

</html>
简单写一个希望可以帮到你

以上是 【Web前端问题】如何动态画出椭圆 的全部内容, 来源链接: utcz.com/a/134969.html

回到顶部