-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
沉沙
2018-07-25
来源 ：
阅读 2049
评论 0
摘要：本篇教程探讨了如何制作一个不断旋转的八卦图，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。
代码如下：
HTML部分<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="yinyang"></div>
</body>
</html>
CSS部分
body{
background: #444444;
}
@keyframes spin{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
#yinyang{
width: 100px;
height: 100px;
border-radius: 50%;
position: relative;
margin: 100px auto;
background: linear-gradient(to bottom,#ffff 0%,#ffff 50%,#000000 50%,#000000 100%);
animation-duration: 3s;
/*animation-duration属性指定一个动画周期的时长。默认值为0s，表示无动画。*/
animation-name: spin;
animation-iteration-count: infinite; /*infinite 无限循环播放动画.*/
/*animation-iteration-count CSS 属性 定义动画在结束前运行的次数 可以是1次 无限循环.*/
animation-timing-function:linear;
/*CSS animation-timing-function属性定义CSS动画在每一动画周期中执行的节奏。*/
}
#yinyang:before{
position: absolute;
width: 10px;
height: 10px;
content: "";
top: 25%;
left:0;
border-radius: 50%;
border: 20px black solid;
background: white;
}
#yinyang:after{
position: absolute;
width: 10px;
height: 10px;
content: "";
top: 25%;
right:0;
border-radius: 50%;
border: 20px white solid;
background: black;
}
本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML5/CSS3频道，获取更多WEB前端知识！
喜欢 | 1
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
