伪3D酷炫旋转css3特效

下载代码

html

css

分享到微信朋友圈

html

css

/*=============初始化样式
===================================*/
* {
	padding:0;
	margin:0;
	box-sizing:border-box;
	color:#666;
}
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video {
	outline:0;
	border:0;
	vertical-align:baseline;
	font:inherit;
	font-size:100%;
	word-wrap:break-word;
}
button,input,select,textarea {
	outline:0;
	resize:none;
	-webkit-appearance:none;
}
body,button,input,select,textarea {
	font-size:14px;
	font-family:Segoe UI,Lucida Grande,Helvetica,Arial,Microsoft YaHei,FreeSans,Arimo,Droid Sans,wenquanyi micro hei,Hiragino Sans GB,Hiragino Sans GB W3,sans-serif;
}
body {
	width:100%;
	line-height:1em;
	-webkit-font-smoothing:antialiased;
	-webkit-text-size-adjust:100%;
	/*background:#fcfcfc;
	*/
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
	display:block;
}
li,ol,ul {
	list-style:none;
}
blockquote,q {
	quotes:none;
}
blockquote:after,blockquote:before,q:after,q:before {
	content:'';
}
strong {
	font-weight:700;
}
p {
	color:#666;
	font-size:1.2em;
	line-height:1em;
	word-wrap:break-word;
}
em {
	font-style:normal;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
img {
	border:none;
}
a {
	color:#666;
	text-decoration:none;
}
a:hover {
	color:#d70000;
}
.clearfix:after,.clearfix:before,.container:after,.container:before,.modal-footer:after,.modal-footer:before,.nav:after,.nav:before,.navbar-collapse:after,.navbar-collapse:before,.navbar-header:after,.navbar-header:before,.navbar:after,.navbar:before,.pager:after,.pager:before,.panel-body:after,.panel-body:before,.row:after,.row:before {
	display:table;
	content:" ";
}
.clearfix:after,.container:after,.modal-footer:after,.nav:after,.navbar-collapse:after,.navbar-header:after,.navbar:after,.pager:after,.panel-body:after,.row:after {
	clear:both;
}
.back-box {
    width: 290px;
    margin: 200px auto;
}

.back-box > ul {
    width: 290px;
    height: 500px;
    position: relative;
}

.back-box > ul > li {
    width: 290px;
    height: 500px;
    margin-top: 20px;
    background: red;
    float: left;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 10px;
    -webkit-transition: 3.5s;
    -moz-transition: 3.5s;
    -ms-transition: 3.5s;
    -o-transition: 3.5s;
    transition: 3.5s;
    /*transform-origin: bottom left;*/
}

.back-box > ul > li:nth-child(1) {
    background: #bc21ef;
}
.back-box > ul > li:nth-child(2) {
    background: #57126d;
}
.back-box > ul > li:nth-child(3) {
    background: #330b40;
}
.back-box > ul > li:nth-child(4) {
    background: #da2121;
}
.back-box > ul > li:nth-child(5) {
    background: #1f15da;
}
.back-box > ul > li:nth-child(6) {
    background: #da1556;
}
.back-box > ul > li:nth-child(7) {
    background: #a91244;
}
.back-box > ul > li:nth-child(8) {
    background: #750d2f;
}
.back-box > ul > li:nth-child(9) {
    background: #4a071d;
}
.back-box > ul > li:nth-child(10) {
    background: #1c12f8;
}
.back-box > ul > li:nth-child(11) {
    background: #1a12c2;
}
.back-box > ul > li:nth-child(12) {
    background: #120c86;
}
.back-box > ul > li:nth-child(13) {
    background: #0c0852;
}
.back-box > ul > li:nth-child(5) {
    background: #1d74f6;
}
.back-box > ul > li:nth-child(14) {
    background: #1255ba;
}
.back-box > ul > li:nth-child(15) {
    background: #0e3b80;
}
.back-box > ul > li:nth-child(16) {
    background: #ed6614;
}
.back-box > ul > li:nth-child(17) {
    background: #7a370e;
}

.back-box > ul > li > a {
    display: block;
    width: 100%;
    height: 100%;
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg