Html
    Css
    Js
* {
	margin:0;
	padding:0;
}
body {
	background:#000735;
	font-family:"微软雅黑",Arial;
	font-size:16px;
	color:#fff;
	overflow:-Scroll;
	overflow-x:hidden;
}
.Theme {
	width:1000px;
	margin:0px auto;
}
/*首页动画*/
.circle_box {
	width:978px;
	margin:50px auto;
	height:317px;
	position:relative;
}
.round:nth-child(1) {
	position:absolute;
	padding:13px;
	left:0px;
	top:79px;
}
.round:nth-child(1) div {
	background:#3a96e1;
}
.round:nth-child(1) div:first-child {
	width:100px;
	height:100px;
}
.round:nth-child(1) div:first-child a {
	line-height:99px;
}
.round:nth-child(1) div:nth-child(2) {
	width:100px;
	height:100px;
}
.round:nth-child(1) div:last-child {
	width:110px;
	height:110px;
}
.round:nth-child(2) {
	position:absolute;
	left:176px;
	top:0;
	padding:13px;
}
.round:nth-child(2) div {
	background:#c1bd57;
}
.round:nth-child(3) {
	position:absolute;
	left:199px;
	top:199px;
	padding:13px;
}
.round:nth-child(3) div {
	background:#d67c61;
}
.round:nth-child(3) div:first-child {
	width:80px;
	height:80px;
}
.round:nth-child(3) div:first-child a {
	line-height:80px;
}
.round:nth-child(3) div:nth-child(2) {
	width:80px;
	height:80px;
}
.round:nth-child(3) div:last-child {
	width:90px;
	height:90px;
}
.round:nth-child(4) {
	position:absolute;
	left:348px;
	top:128px;
	padding:13px;
}
.round:nth-child(4) div {
	background:#307cc2;
}
.round:nth-child(4) div:first-child {
	width:90px;
	height:90px;
}
.round:nth-child(4) div:first-child a {
	line-height:24px;
	display:block;
	margin-top:25px;
}
.round:nth-child(4) div:nth-child(2) {
	width:90px;
	height:90px;
}
.round:nth-child(4) div:last-child {
	width:100px;
	height:100px;
}
.round:nth-child(5) {
	position:absolute;
	left:519px;
	top:94px;
	padding:13px;
}
.round:nth-child(5) div:first-child {
	width:70px;
	height:70px;
}
.round:nth-child(5) div:first-child a {
	line-height:70px;
}
.round:nth-child(5) div:nth-child(2) {
	width:70px;
	height:70px;
}
.round:nth-child(5) div:last-child {
	width:80px;
	height:80px;
}
.round:nth-child(6) {
	position:absolute;
	left:705px;
	top:10px;
	padding:13px;
}
.round:nth-child(6) div {
	background:#307cc2;
}
.round:nth-child(7) {
	position:absolute;
	left:638px;
	top:171px;
	padding:13px;
}
.round:nth-child(7) div {
	background:#c1bd57;
}
.round:nth-child(8) {
	position:absolute;
	left:860px;
	top:113px;
	padding:13px;
}
.round:nth-child(8) div:first-child {
	width:75px;
	height:75px;
}
.round:nth-child(8) div:first-child a {
	line-height:70px;
	font-size:16px;
}
.round:nth-child(8) div:nth-child(2) {
	width:75px;
	height:75px;
}
.round:nth-child(8) div:last-child {
	width:85px;
	height:85px;
}
.round:nth-child(9) {
	position:absolute;
	left:509px;
	top:253px;
	padding:13px;
}
.round:nth-child(9) div {
	background:#a36157;
}
.round:nth-child(9) div:first-child {
	width:30px;
	height:30px;
}
.round:nth-child(9) div:nth-child(2) {
	width:30px;
	height:30px;
}
.round:nth-child(9) div:last-child {
	width:40px;
	height:40px;
}
.round:nth-child(10) {
	position:absolute;
	left:630px;
	top:5px;
	padding:13px;
}
.round:nth-child(10) div {
	background:#2663a4;
}
.round:nth-child(10) div:first-child {
	width:40px;
	height:40px;
}
.round:nth-child(10) div:nth-child(2) {
	width:40px;
	height:40px;
}
.round:nth-child(10) div:last-child {
	width:50px;
	height:50px;
}
.round:nth-child(11) {
	position:absolute;
	left:149px;
	top:145px;
	padding:26px;
}
.round:nth-child(11) div {
	background:#1c4a86;
}
.round:nth-child(11) div:first-child {
	width:20px;
	height:20px;
}
.round:nth-child(12) {
	position:absolute;
	left:366px;
	top:69px;
	padding:26px;
}
.round:nth-child(12) div {
	background:#7e4c4f;
}
.round:nth-child(12) div:first-child {
	width:10px;
	height:10px;
}
.round:nth-child(13) {
	position:absolute;
	left:467px;
	top:40px;
	padding:30px;
}
.round:nth-child(13) div {
	background:#0e295d;
}
.round:nth-child(13) div:first-child {
	width:30px;
	height:30px;
}
.round:nth-child(12) {
	position:absolute;
	left:846px;
	top:243px;
	padding:30px;
}
.round:nth-child(12) div {
	background:#1e539e;
}
.round:nth-child(12) div:first-child {
	width:20px;
	height:20px;
}
.circle a {
	font-size:18px;
	line-height:100px;
	color:#000735;
	font-weight:bold;
}
.circle {
	background:#3a96e1;
	border-radius:100%;
	width:100px;
	height:100px;
	z-index:999;
	text-align:center;
	top:18px;
	left:18px;
	position:absolute;
}
.circle_bottom {
	background:rgba(58,150,225,0.4);
	border-radius:100%;
	width:100px;
	height:100px;
	filter:alpha(opacity=40);
	z-index:-100;
	position:absolute;
	top:18px;
	left:18px;
}
.circle_bottom2 {
	background:rgba(58,150,225,0.2);
	border-radius:100%;
	width:110px;
	height:110px;
	filter:alpha(opacity=20);
	z-index:-110;
	position:relative;
}
.animation {
	;-webkit-animation:twinkling 2.1s infinite ease-in-out;
	animation:twinkling 2.1s infinite ease-in-out;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}
.animation2 {
	;-webkit-animation:twinkling 2.1s infinite ease-in-out;
	animation:twinkling 2.1s infinite ease-in-out;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}
@-webkit-keyframes twinkling {
	0% {
	opacity:0.2;
	filter:alpha(opacity=20);
	-webkit-transform:scale(1);
}
50% {
	opacity:0.5;
	filter:alpha(opacity=50);
	-webkit-transform:scale(1.12);
}
100% {
	opacity:0.2;
	filter:alpha(opacity=20);
	-webkit-transform:scale(1);
}
}@keyframes twinkling {
	0% {
	opacity:0.2;
	filter:alpha(opacity=20);
	-webkit-transform:scale(1);
}
50% {
	opacity:0.5;
	filter:alpha(opacity=50);
	-webkit-transform:scale(1.12);
}
100% {
	opacity:0.2;
	filter:alpha(opacity=20);
	-webkit-transform:scale(1);
}
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.9.1
 立即下载

css3动画闪烁效果(原创)

0