當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
115CSS3+JS：胶卷式放映
生活随笔
收集整理的這篇文章主要介紹了
115CSS3+JS：胶卷式放映
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
圖片像電影的膠卷一樣，一幀幀地放映，且可以任意刪減圖片幀數(shù)，不會影響放映效果。
所用技術(shù)為：CSS3動畫和原生JavaScript。**html 代碼**
```html:run
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>膠卷式放映</title>
<style type="text/css" id="style1">
* {
margin: 0;
padding: 0;
font-family:"楷體"
}
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 600px at 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>程</li>
<li>工</li>
<li>端</li>
<li>前</li>
<li>的</li>
<li>秀</li>
<li>優(yōu)</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 ul li: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>
```
所用技術(shù)為：CSS3動畫和原生JavaScript。**html 代碼**
```html:run
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>膠卷式放映</title>
<style type="text/css" id="style1">
* {
margin: 0;
padding: 0;
font-family:"楷體"
}
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 600px at 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>程</li>
<li>工</li>
<li>端</li>
<li>前</li>
<li>的</li>
<li>秀</li>
<li>優(yōu)</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 ul li: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>
```
轉(zhuǎn)載于:https://www.cnblogs.com/gushixianqiancheng/p/10967301.html
總結(jié)
以上是生活随笔為你收集整理的115CSS3+JS：胶卷式放映的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 苹果手机几月份最便宜_苹果手机越来越便宜
- 下一篇： CSS3+JavaScript效果：胶卷