纯 CSS3 制作可口可乐罐  这个效果相信大家很多人看过了,纯css实现的立体可口可乐罐,看起来相当高大上~

于是今天我这小菜鸟试着研究下,稍微遗憾的是,没有看到源码,还是直接F12吧,貌似实现也不是那么难

大概原理图是这样:

当然代码实现起来有所不同;

图片分别如下:

       

左图为遮罩层,其中中间透明部分可以显示背景图,并且添加了半透明阴影,使得效果能够更逼真,相当于上图中黄色滑块,

右图为背景图,相当于灰色背景,在这段代码的实现中,实例中共用了50多个p标签来拼接,背景图像设置为fixed,这样当滚动时,

背景图像不会移动,而且看起来整个滚动过程能够更加平滑。

由于昨天设置了一个自动转动的实例,所以在想能不能做一个自动旋转,看起来是360度旋转的例子,答案是肯定的,不过试验效果不好,因为只有包装部分可以有360度图片,

罐本身是没有的;

点击查看demo 抱歉 ,之前引用qq空间图片地址,所以导致显示错误,现已更新为淘宝地址(曾经也是c店店主),不知道大家有没有好的服务器空间推荐。

总体思路跟过渡banner思路是一样的,将图片分成n张小图(这里我省去了计算,所以直接1px一张图片),每张图片放在一个div里,通过backgrounc-position控制位置,当第一张超出屏幕外既将其追加到整个元素末尾,这样就可以形成一个无限滚动的效果。

具体看代码:

 <div class="wrap">
<ul class="rotate" id="element"></ul>
<div class="shadow"></div>
</div>

ul为包装图片图层,li元素同一个背景,不同的位置,shadow里为遮罩图片,只有中间位置为png透明可见,其他位置设置为白色。

css主要控制图片位置

 *{margin:0px;padding:0px}
.wrap{width:240px;height:440px;position:relative;margin:100px auto;overflow:hidden}
.shadow{position:absolute;width:100%;height:100%;background:url(http://a1.qpic.cn/psb?/V10AF8bZ2eGAgL/W62FFJKhTn6rUO3kfNS2vhhfU7lZCr0Pf.OW4L91yYg!/b/dBoBAAAAAAAA&bo=0gBQAQAAAAADB6E!&rf=viewer_4) center center no-repeat;}
.rotate{width:190px;height:100%;position:absolute;top:0px;margin-left:25px;left:}
img{display:block;margin:0px auto;margin-top:-80px}
li{list-style-type:none;float:left;width:1px;height:100%;}

通过jq来生成li元素,并做动画

 <script>
$(function(){
var width=537;
for(i=0;i<width;i+=1){
$("ul").append('<li style="background:url(http://a1.qpic.cn/psb?/V10AF8bZ2eGAgL/TCmGRnzlj7iukRUhvLRKCeNG2k1GClSoeRz*lNNbkEw!/b/dBoBAAAAAAAA&bo=GQIYAQAAAAAFByY!&rf=viewer_4) -'+ i + 'px 62px no-repeat"></li>')
};
function add(){
$("ul").animate({left:"-=1px"},10,function(){
$("ul").css({"left":"0px"}).find("li:first").appendTo($("ul"))
})
}
setInterval(add,10)
})
</script>

如有问题及错误或者更好的解决办法,请联系我。

另自己新建立了一个qq群:85530789,欢迎志同道合的朋友一起多多交流技术

js+css立体旋转的更多相关文章

  1. css3立体旋转动画

    demo地址 效果图 在别人网站上看到一个立体旋转的例子,然后突然想到自己前几天学习的css3旋转,就试着做了一个例子,看起来有一些粗糙. html结构很简单: <div> <ul ...

  2. js图片左右旋转

    图片显示 <p> <a href="images/example2.jpg" rel="lightbox-group" title=" ...

  3. CSS 3D旋转 hover 后设置transform 是相对于正常位置

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. js实现图片旋转、模板文件查看图片大图之记录篇[二]

    一个小小的前端需求送给大家,使用js实现图片旋转,并且点击图片能够实现规定格式的大图. 主要使用的是jQuery的delegate()方法实现图片旋转,该方法主要的功能就是给某个组件绑定一个或一组事件 ...

  5. Android立体旋转动画实现与封装(支持以X、Y、Z三个轴为轴心旋转)

    本文主要介绍Android立体旋转动画,或者3D旋转,下图是我自己实现的一个界面 立体旋转分为以下三种: 1. 以X轴为轴心旋转 2. 以Y轴为轴心旋转 3. 以Z轴为轴心旋转--这种等价于andro ...

  6. electron之Windows下使用 html js css 开发桌面应用程序

    1.atom/electron github: https://github.com/atom/electron 中文文档: https://github.com/atom/electron/tree ...

  7. JS/CSS缓存杀手——VS插件

    背景 前些天去考科目二,感觉经历了一场不是高考却胜似高考的考试(10年前的5分之差, 还是难以释怀)!    一行八人,就我学的时间最少(4天,8人一辆车),教练都觉得我肯定还得再来一次! 靠着运气和 ...

  8. gulp实现打包js/css/img/html文件,并对js/css/img文件加上版本号

    参考打包教程: http://www.cnblogs.com/tugenhua0707/p/4069769.html http://www.cnblogs.com/tugenhua0707/p/498 ...

  9. 配置springMVC之后,引入js,css等资源处理

    配置了sringMVC之后,要引入js,css处理: 做法1:在<%page %>下面增加: <%@ taglib prefix="yesurl" uri=&qu ...

随机推荐

  1. WebService - 怎样提高WebService性能 大数据量网络传输处理

    直接返回DataSet对象 返回DataSet对象用Binary序列化后的字节数组 返回DataSetSurrogate对象用Binary序列化后的字节数组 返回DataSetSurrogate对象用 ...

  2. Android性能优化系列 + Android官方培训课程中文版

    Android性能优化典范 - 第6季 http://hukai.me/android-performance-patterns-season-6/   Android性能优化典范 - 第5季 htt ...

  3. Pyqt 获取windows系统中已安装软件列表

    开始之前的基础知识 1. 获取软件列表 在Python的标准库中,_winreg可以操作Windows的注册表.获取已经安装的软件列表一般是读去windows的注册表: SOFTWARE\Micros ...

  4. AIX扩展文件系统的大小

    由于AIX系统空间不够需要增加硬盘,希望增加文件系统的空间,折腾了好几天怎么都不能扩展文件系统的空间,原来是把硬盘加错了卷组 首先,确定文件系统所在的LV /dev/datalv      270.0 ...

  5. Swipe to back not working滑动后退功能消失?

    如果你发现滑动后退功能突然失效了,很可能是因为你隐藏了NavigationBar 或者定制了 leftBarButtonItem(s) 这会导致 NavigationController 的 inte ...

  6. 跟着鸟哥学Linux系列笔记2-第10章VIM学习

    跟着鸟哥学Linux系列笔记0-扫盲之概念 跟着鸟哥学Linux系列笔记0-如何解决问题 跟着鸟哥学Linux系列笔记1 常用的文本编辑器:Emacs, pico, nano, joe, vim VI ...

  7. 配置ogg异构oracle-mysql(3)目的端配置

    目的端配置大致分为如下三个步骤:配置mgr,配置checkpoint table,配置应用进程 在目的端先创建一张表,记得带主键: mysql> create database hr;Query ...

  8. C++Primer快速浏览笔记-复合类型

    C++Primer2.3节介绍了两种复合类型:引用和指针 1.引用 引用并非对象,它只是为一个已经存在的对象所起的别名. 一旦初始化完成,引用将和它的初始值对象一直绑定在一起,不能重新绑定到另一个对象 ...

  9. OpenCv实现两幅图像的拼接

    直接贴上源码 来源:http://www.myexception.cn/image/1498389.html 实验效果 Left.jpg right.jpg ImageMatch.jpg #inclu ...

  10. 在Salesforce中可以对某一个Object的Standard Button或Link进行重写

    在Salesforce中可以对某一个Object的Standard Button或Link进行重写,来实现我们特定的逻辑过程,比如:在删除某个Object之前要判断该Object的某个Field的状态 ...