HTML标签和纯CSS3画太极图{鼠标经过太极开始旋转}

admin · 发表于 2014-11-26 09:05:37

您需要登录才可以下载或查看，没有账号？立即注册

x

用最少的HTML标签和纯CSS3画太极图，鼠标经过太极开始旋转。

先看效果截图：
太极.jpg

HTML代码：

<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>太极</title>
<style class="cp-pen-styles">
html,body,div,:before,:after{box-sizing:border-box;margin:0;}
html,body{height:100%;}
#taiji{position:relative;top:50%;left:50%;width:200px;height:200px;margin:-100px 0 0 -100px;background-image:linear-gradient(0deg,black 50%,white 50%);border-radius:50%;box-shadow:5px 5px 40px #666666;transition:all 6s ease-in-out;}
#taiji:hover{transform:rotate(3600deg);}
#taiji:before,#taiji:after{content:"";display:block;position:absolute;width:50%;height:50%;top:25%;border-radius:50%;border-width:35px;border-style:solid;}
#taiji:before{left:0;border-color:black;background-color:white;}
#taiji:after{right:0;border-color:white;background-color:black;}
</style>
</head>
<body>
<div id="taiji"></div>
</body>
</html>

复制代码

		自动登录	找回密码
密码			立即注册

[HTML5/CSS3] HTML标签和纯CSS3画太极图{鼠标经过太极开始旋转}