您的位置：首页 > Web前端 > CSS

css3实现太极旋转

2014-12-19 22:45 302 查看

<!DOCTYPE HTML>

<html lang="zh-CN">

<head>

<meta charset="UTF-8" />

<title>demo show</title>

<style>

html{ height:100%; }

body{

background-color:#eee;

display:-webkit-flex;

display:flex;

margin:0;

min-height:100%;

}

.go{

-webkit-animation:rotate 4s linear infinite;

background:linear-gradient(#fff 50%, #000 50%);

border-radius:50%;

box-shadow:0 0 10px #ccc;

height:200px;

margin:auto;

position:relative;

transition:.4s;

width:200px;

}

.go:hover{

height:230px;

width:230px;

}

@-webkit-keyframes rotate{ to{ -webkit-transform:rotate(360deg); } }

.go:before,

.go:after{

background:radial-gradient(50% 50%, #fff 20%, #000 20%);

content:"";

border-radius:50%;

height:50%;

left:0;

position:absolute;

top:25%;

width:50%;

}

.go:after{

background:radial-gradient(50% 50%, #000 20%, #fff 20%);

left:50%;

}

</style>

</head>

<body>

<div class="go"></div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航