Rumah > Artikel > hujung hadapan web > css 动画圆环_html/css_WEB-ITnose
css 动画圆环_html/css_WEB-ITnose
- WBOYasal
- 2016-06-21 08:52:591467semak imbas
<!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>
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：用getElementsByTagName获取节点，为什么出现未定义_html/css_WEB-ITnoseArtikel seterusnya：自定义美化的下拉选择框_html/css_WEB-ITnose