Home >Web Front-end >HTML Tutorial >css 动画圆环_html/css_WEB-ITnose
css 动画圆环_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 08:52:591494browse
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>cycle</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style> #cycle{ position: relative; width:200px; height:200px; margin:auto; } .pie1-wrapper{ position: absolute; width:200px; height:200px; clip:rect(0px 200px 200px 100px); } @-webkit-keyframes pie1-rotate /* Safari 和 Chrome */ { from { transform:rotate(0deg); -webkit-transform: rotate(0deg); } to { transform:rotate(180deg); -webkit-transform: rotate(180deg); } } .pie1{ position: absolute; width:200px; height:200px; background-color:pink; border-radius: 100px; clip:rect(0px 100px 200px 0px); -webkit-animation: pie1-rotate 2s; /* Safari 和 Chrome */ -webkit-animation-fill-mode: forwards; -webkit-animation-timing-function:linear; /* Safari 和 Chrome */ } .pie2-wrapper{ position: absolute; width:200px; height:200px; clip:rect(0px 100px 200px 0px); } @-webkit-keyframes pie2-rotate /* Safari 和 Chrome */ { from { transform:rotate(0deg); -webkit-transform: rotate(0deg); } to { transform:rotate(180deg); -webkit-transform: rotate(180deg); } } .pie2{ position: absolute; width:200px; height:200px; background-color:pink; border-radius: 100px; clip:rect(0px 200px 200px 100px); -webkit-animation: pie2-rotate 2s; -webkit-animation-fill-mode: forwards; -webkit-animation-delay:2s; -webkit-animation-timing-function:linear; /* Safari 和 Chrome */ } .pie-grey{ width:200px; height:200px; background-color:#eaeaea; border-radius: 100px; } .pie-white{ position: absolute; top:0; bottom:0; left:0; right:0; width:180px; height:180px; background-color:#fff; border-radius: 90px; margin:auto; } </style> </head> <body> <div id="cycle"> <div class="pie1-wrapper"> <div class="pie1"></div> </div> <div class="pie2-wrapper"> <div class="pie2"></div> </div> <div class="pie-grey"></div> <div class="pie-white"></div> </div> </body></html>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：用getElementsByTagName获取节点，为什么出现未定义_html/css_WEB-ITnoseNext article：自定义美化的下拉选择框_html/css_WEB-ITnose