CSS3实现3D螺旋动画特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 CSS3实现3D螺旋动画特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3实现3D螺旋动画特效</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>
<body>

<div class="helix">
	<div id="container" class="dblHelix"></div>
</div>
<script src="js/index.js"></script>
</body>
</html>

JS代码(index.js):

(function (window,document){
	var w = window.innerWidth;
	var cnt = Math.ceil(w/12 * 2);
	var c = document.getElementById('container');
	var divs = document.createDocumentFragment();
	var i = 0;
	var div;
	var delay;
	var animDelay = ('animationDelay' in document.documentElement.style) ? 'animationDelay':'webkitAnimationDelay';
	for (i;
	i < cnt;
	++i){
	div = document.createElement('div');
	delay = (i - cnt) * 0.1;
	div.style[animDelay] = delay + 's,' + delay / 2 + 's';
	divs.appendChild(div);
}
c.appendChild(divs);
}
)(window,document);

CSS代码(style.css):

 html,body{margin:0;background:hsla(205,95%,15%,1);background-repeat:no-repeat;background-attachment:fixed;background-image:-webkit-radial-gradient(top,circle cover,hsla(205,95%,15%,1) 0%,hsla(251,20%,17%,1) 80%);background-image:radial-gradient(top,circle cover,hsla(205,95%,15%,1) 0%,hsla(251,20%,17%,1) 80%);overflow:hidden;}
.helix{margin:40vh -50%;width:200%;height:40vh;-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg);-webkit-transform-style:preserve-3d;transform-style:preserve-3d;}
.dblHelix{-webkit-perspective:1000px;perspective:1000px;white-space:nowrap;}
.dblHelix > div{display:inline-block;position:relative;margin:0 6px;width:1px;height:30vh;box-shadow:1px 1px 1px 1px hsla(0,0%,0%,0.2);background:hsla(243,100%,85%,1);-webkit-animation:rot 5s linear infinite,chngCol 5s linear alternate infinite;animation:rot 5s linear infinite,chngCol 5s linear alternate infinite;-webkit-transition:all 1s ease;transition:all 1s ease;}
.dblHelix > div::before,.dblHelix > div::after{position:absolute;left:-2px;border-radius:50%;width:12px;height:10px;box-shadow:2px 2px 2px 2px hsla(0,0%,0%,0.25);background:hsla(243,95%,85%,1);content:"";}
.dblHelix > div::before{top:-2px;}
.dblHelix > div::after{bottom:-2px;}
@-webkit-keyframes rot{to{-webkit-transform:rotateX(360deg);transform:rotateX(360deg);}
}
@keyframes rot{to{-webkit-transform:rotateX(360deg);transform:rotateX(360deg);}
}
@-webkit-keyframes chngCol{to{background:hsla(253,85%,25%,1);}
}
@keyframes chngCol{to{background:hsla(253,85%,25%,1);}
}

附件:下载该文件资源,减少时间成本(增值服务)