Heim > Artikel > Web-Frontend > css 动画圆环_html/css_WEB-ITnose
css 动画圆环_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 08:52:591461Durchsuche
<!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>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：用getElementsByTagName获取节点，为什么出现未定义_html/css_WEB-ITnoseNächster Artikel：自定义美化的下拉选择框_html/css_WEB-ITnose