javascript
CSS3+JavaScript效果：胶卷式放映
<!DOCTYPE html>
<html>
<head lang="en">
???<meta charset="UTF-8">
???<title>膠卷式放映</title>
???<style type="text/css" id="style1">
???????* {
???????????margin: 0;
???????????padding: 0
???????}
???????body{
???????????background: black;
???????}
???????#wrap {
???????????width: 150px;
???????????height: 120px;
???????????margin: 200px auto;
???????????perspective: 2000px;
???????}
???????#wrap ul {
???????????width: 100%;
???????????height: 100%;
??????????? transform-style: preserve-3d;
???????????animation:move 12s 3.2s infinite ;
???????}
???????#wrap ul li {
???????????top: 0;
???????????left: 0;
???????????position: absolute;
???????????width: 148px;
???????????height: 118px;
???????????line-height: 118px;
???????????text-align: center;
???????????font-size: 118px;
???????????background: grey;
???????????border: 1px solid #ccc;
???????????box-shadow: 1px 1px 3px rgba(255, 255, 255, 0.2);
???????????border-radius: 5px;
? ??????????overflow: hidden;
???????}
???????.shadow{
???????????width: 1200px;
???????????height: 1200px;
???????????position: absolute;
???????????left: 50%;
???????????top: 50%;
???????????margin-left: -600px;
???????????margin-top: -600px;
??? ????????background: radial-gradient(600px 600pxat center,rgba(50,50,50,0.8),rgba(0,0,0,0));
???????????transform: rotateX(90deg) translateZ(-150px);
???????}
???</style>
</head>
<body>
<div id="wrap">
???<ul>
???????<li> ！</li>
???????<li>群</li>
???????<li>22 </li>
???????<li>落</li>
???????<li>部</li>
???????<li>習</li>
???????<li>學</li>
???????<li>端</li>
???????<li>前</li>
???????<li>群</li>
???????<li>加</li>
???????<li>書</li>
???????<li>子</li>
???????<li>電</li>
???????<li>習</li>
???????<li>學</li>
???????<li>端</li>
???????<li>前</li>
???</ul>
???<div class="shadow"></div>
</div>
</body>
</html>
<script>
???var oLis = document.querySelectorAll("#wrap li");
???var oStyle = document.querySelector("#style1");
???var len=oLis.length;
???var aaa=null;
???for (var i = 1; i <=len; i++) {
???????(function(i){
??????????window.setTimeout(function(){
?????????????? oStyle.innerHTML
?????????????????????? += " #wrap ulli:nth-child("
?????????????????????? + i
?????????????????????? +"){transform:rotateY("
?????????????????????? +(len-i) * (360/len)
?????????????????????? + "deg)translateZ(500px);transition:0.7s;transition-delay:"
?????????????????????? +(i*0.1)
?????????????????????? +"s}";
??????????},100);
???????})(i);
??? }
?
???for(i=0;i<=len;i++){
???????aaa+=100/len*i+"%{transform:rotateY("+-360/len*i+"deg);}"
??? }
???oStyle.innerHTML+="@keyframes move {"+aaa+"}";
</script>
需要web前端課程工具和電子書，可以加: 33群105601600;? 22群120342833
【內容展示有限，可以加群下載，群文件會定期更新學習資料，以及練手小案例】
總結
以上是生活随笔為你收集整理的CSS3+JavaScript效果：胶卷式放映的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： title
- 下一篇： 苹果市值破万亿，iPhone 会涨价吗？