當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

CSS3+JavaScript效果：胶卷式放映

發(fā)布時間：2023/12/18 javascript 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS3+JavaScript效果：胶卷式放映小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

<!DOCTYPE html>

<html>

???<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>

???<ul>

???????<li> ！</li>

???????<li>群</li>

???????<li>22 </li>

???????<li>落</li>

???????<li>部</li>

???????<li>習(xí)</li>

???????<li>學(xué)</li>

???????<li>端</li>

???????<li>前</li>

???????<li>群</li>

???????<li>加</li>

???????<li>書</li>

???????<li>子</li>

???????<li>電</li>

???????<li>習(xí)</li>

???????<li>學(xué)</li>

???????<li>端</li>

???????<li>前</li>

???</ul>

???<div class="shadow"></div>

</div>

</body>

</html>

???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

【內(nèi)容展示有限，可以加群下載，群文件會定期更新學(xué)習(xí)資料，以及練手小案例】

總結(jié)

以上是生活随笔為你收集整理的CSS3+JavaScript效果：胶卷式放映的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。