纯 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. JAVA基础学习之XMLCDATA区、XML处理指令、XML约束概述、JavaBean、XML解析(8)

    1.CDATA区在编写XML文件时,有些内容可能不想让解析引擎解析执行,而是当作原始内容处理.遇到此种情况,可以把这些内容放在CDATA区里,对于CDATA区域内的内容,XML解析程序不会处理,而是直 ...

  2. SQL Server数据库大型应用解决方案总结(转载)

    转载地址:http://hb.qq.com/a/20120111/000216.htm 随着互联网应用的广泛普及,海量数据的存储和访问成为了系统设计的瓶颈问题.对于一个大型的互联网应用,每天百万级甚至 ...

  3. .NET yield

    .Net Yield 其实比较简单,手动yield,一学就会. public static class GalaxyClass { public static void ShowGalaxies() ...

  4. codeforces Round#380 div2

    1.字符串替换ogo+go…换成*** 思路:找ogo记录g位置,做初步替换和标记,非目标字母直接输出, 间隔为2的判断是否一个为标记g,一个为非标记做***替换 #include<iostre ...

  5. animation动画兼容所有手机

    .canvasAnim{ position: absolute; width:240px; height:240px; top:; z-index:; top:-20px; left:-5px; bo ...

  6. 《大话》之 装饰模式 Vs 建造者模式

    一.简介: 装饰模式:     背景:小菜要见美女娇娇,感慨自己不会着装,怕给娇娇留下坏印象               内容:动态的给一个对象添加一些额外职责               图文并茂: ...

  7. T-SQL优化

    我们做软件开发的,大部分人都离不开跟数据库打交道,特别是erp开发的,跟数据库打交道更是频繁,存储过程动不动就是上千行,如果数据量大,人员流动大,那么我么还能保证下一段时间系统还能流畅的运行吗?我么还 ...

  8. LoadRunner常用事务判断

    一.数据值比较 lr_start_transaction("终审") if (atoi(lr_eval_string("{MyOutputParm}"))==a ...

  9. 判断网络是否连接 和 判断GPS是否连接

    //判断网络是否连接 public static Boolean isNetworkEnabled(Context context){ int status=-1  //设置默认连接的状态为-1 Co ...

  10. position之absolute与relative 详解

    absolute:绝对定位: relative:相对定位: 唉,以前只是知是知道这两个单词的汉语意思,然后呢,,,怎么用...也是摸凌两可的用.终于抽出时间来看看了: 1.绝对定位:absulute ...