115CSS3+JS：胶卷式放映
图片像电影的胶卷一样，一帧帧地放映，且可以任意删减图片帧数，不会影响放映效果。所用技术为：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>优</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>```
转载于:https://www.cnblogs.com/gushixianqiancheng/p/10967301.html
115CSS3+JS：胶卷式放映相关推荐
- vue.js响应式原理解析与实现
从很久之前就已经接触过了angularjs了,当时就已经了解到,angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很好奇vue.js是如何监测数据更新 ...
- ImageLightbox.js – 响应式的图片 Lightbox 插件
ImageLightbox.js 是一款很简洁的用于显示图片灯箱效果(Lightbox)的插件,没有字幕,导航按钮或默认背景.如果默认功能不够用的话,你可以很容易地自定义 JavaScript 函数扩 ...
- 从一道面试题说起—js隐式转换踩坑合集
前方提醒: 篇幅较长,点个赞或者收藏一下,可以在下一次阅读时方便查找 提到js的隐式转换,很多人第一反应都是:坑. 的确,对于不熟悉的人来说,js隐式转换存在着很多的让人无法预测的地方,相信很多人都深 ...
- Vue.js响应式原理
Vue.js响应式原理 框架 浏览数:659 2017-9-20 关于Vue.js Vue.js是一款MVVM框架,上手快速简单易用,通过响应式在修改数据的时候更新视图.Vue.js的响应式原理依赖于 ...
- js date转成 时间字符串_秋招快要开始了，前端笔试中的坑位-JS隐式转换问题
我们在写笔试题的时候,经常碰到涉及隐式转换的题目,例如 "1" + 2 obj + 1 [] == ![] [null] == false === 和 == === 叫做严格运算符 ...
- 从 JavaScript 属性描述器剖析 Vue.js 响应式视图
学习每一门语言,一般都是从其数据结构开始,JavaScript也是一样,而JavaScript的数据结构中对象(Object)是最基础也是使用最频繁的概念和语法,坊间有言,JavaScript中,一切 ...
- 从JavaScript属性描述器剖析Vue.js响应式视图
学习每一门语言,一般都是从其数据结构开始,JavaScript也是一样,而JavaScript的数据结构中对象(Object)是最基础也是使用最频繁的概念和语法,坊间有言,JavaScript中,一切 ...
- Chocolat.js – 响应式的 jQuery Lightbox 插件
Chocolat.js 使您能够显示一个或多个图像在同一页面上.给用户展示一组图片缩略图,可以显示全页或块.Chocolat.js 可以很好地处理所有主要的浏览器.它在下面这些浏览器测试通过:IE7+ ...
- html5彩盒插件画廊,纯JS开发baguetteBox.js响应式画廊插件
baguetteBox.js 是一个简单和易于使用的响应式的图像 Lightbox 插件,支持滑动手势在移动设备上使用.纯 JavaScript 实现,不依赖第三方库和插件,赶紧来体验吧. 好了,看下 ...
- [JS]正则式的使用示例：替换字符串中所有指定内容
JS中是没有replaceAll这个api 的,想要替换一个字符串中所有的指定内容,需要用到正则式. 对正则式了解甚少也不要紧,看下面这个demo(一看就会) 现在需要把一个字符串里的所有#号换成空格 ...
最新文章
- 我的世界服务器伤害增加bug,我的世界服务器BUG解决办法大全
- 7-19晚牛客网刷题未知点、错题 集合
- react-native run-android报错的原因，license问题
- IDEA部署Tomcat
- 【Flink】Flink 控制台能消费 但是 Flink 任务不能消费 内置topic 导致问题
- 如何将一个java程序变成exe_如何将一个java程序转换为.exe文件？
- Java中如何循环删除一个集合(如List)中的多个元素
- kube-proxy修改成ipvs模式
- 爱情九十一课，留下好的你
- mysql 配置 explicit_defaults_for_timestamp
- 张季跃 201771010139《面向对象程序设计（java）》第十三周学习总结
- 取消Windows操作系统中自动播放
- Photoshop DPI缩放比例问题
- 项目中里程碑有什么作用？
- 3款超好用的音频剪辑软件，功能全面，操作简单！
- js事件冒泡与事件捕获、阻止事件冒泡和浏览器默认行为
- 计算机类sci期刊影响因子排名,【科研】全球最新SCI期刊影响因子排名：第一名187.040！...
- IOS 控制键盘升降
- Windows10+YOLOv5训练自己的数据集
- matlab 显示高光谱,高光谱图像显示问题