制作css动画

最新推荐文章于 2024-06-26 14:36:07 发布

前端交互仔

最新推荐文章于 2024-06-26 14:36:07 发布

阅读量133

点赞数

文章标签： css 动画 css3

原文链接：https://www.runoob.com/try/try.php?filename=trycss3_keyframes

版权

<!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" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="box-taiji"></div>
  </body>
</html>
.box-taiji {
  width: 0;
  height: 400px;
  position: relative;
  margin: 50px auto;
  border-left: 200px solid #000;
  border-right: 200px solid #fff;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  border-radius: 400px;
  animation: rotation 2.5s linear infinite;
  -webkit-animation: rotation 2.5s linear infinite;
  -moz-animation: rotation 2.5s linear infinite;
}
.box-taiji:before,
.box-taiji:after {
  position: absolute;
  content: "";
  display: block;
}
.box-taiji:before {
  width: 200px;
  height: 200px;
  top: 0;
  left: -100px;
  z-index: 1;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 200px 0 #000;
}
.box-taiji:after {
  width: 60px;
  height: 60px;
  top: 70px;
  left: -30px;
  z-index: 2;
  background-color: #000;
  border-radius: 50%;
  box-shadow: 0 200px 0 #fff;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@-webkit-keyframes rotation {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
  }
}
@-moz-keyframes rotation {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(-360deg);
  }
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:mymove 5s infinite;
	-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}

@keyframes mymove
{
	from {top:0px;}
	to {top:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
	from {top:0px;}
	to {top:200px;}
}
</style>
</head>
<body>

<p><strong>注意:</strong>  @keyframes 规则 不兼容 IE 9 以及更早版本的浏览器.</p>

<div></div>

</body>
</html>

https://www.runoob.com/try/try.php?filename=trycss3_keyframes