js+css立体旋转
纯 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立体旋转的更多相关文章
- css3立体旋转动画
demo地址 效果图 在别人网站上看到一个立体旋转的例子,然后突然想到自己前几天学习的css3旋转,就试着做了一个例子,看起来有一些粗糙. html结构很简单: <div> <ul ...
- js图片左右旋转
图片显示 <p> <a href="images/example2.jpg" rel="lightbox-group" title=" ...
- CSS 3D旋转 hover 后设置transform 是相对于正常位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js实现图片旋转、模板文件查看图片大图之记录篇[二]
一个小小的前端需求送给大家,使用js实现图片旋转,并且点击图片能够实现规定格式的大图. 主要使用的是jQuery的delegate()方法实现图片旋转,该方法主要的功能就是给某个组件绑定一个或一组事件 ...
- Android立体旋转动画实现与封装(支持以X、Y、Z三个轴为轴心旋转)
本文主要介绍Android立体旋转动画,或者3D旋转,下图是我自己实现的一个界面 立体旋转分为以下三种: 1. 以X轴为轴心旋转 2. 以Y轴为轴心旋转 3. 以Z轴为轴心旋转--这种等价于andro ...
- electron之Windows下使用 html js css 开发桌面应用程序
1.atom/electron github: https://github.com/atom/electron 中文文档: https://github.com/atom/electron/tree ...
- JS/CSS缓存杀手——VS插件
背景 前些天去考科目二,感觉经历了一场不是高考却胜似高考的考试(10年前的5分之差, 还是难以释怀)! 一行八人,就我学的时间最少(4天,8人一辆车),教练都觉得我肯定还得再来一次! 靠着运气和 ...
- gulp实现打包js/css/img/html文件,并对js/css/img文件加上版本号
参考打包教程: http://www.cnblogs.com/tugenhua0707/p/4069769.html http://www.cnblogs.com/tugenhua0707/p/498 ...
- 配置springMVC之后,引入js,css等资源处理
配置了sringMVC之后,要引入js,css处理: 做法1:在<%page %>下面增加: <%@ taglib prefix="yesurl" uri=&qu ...
随机推荐
- JAVA基础学习之XMLCDATA区、XML处理指令、XML约束概述、JavaBean、XML解析(8)
1.CDATA区在编写XML文件时,有些内容可能不想让解析引擎解析执行,而是当作原始内容处理.遇到此种情况,可以把这些内容放在CDATA区里,对于CDATA区域内的内容,XML解析程序不会处理,而是直 ...
- SQL Server数据库大型应用解决方案总结(转载)
转载地址:http://hb.qq.com/a/20120111/000216.htm 随着互联网应用的广泛普及,海量数据的存储和访问成为了系统设计的瓶颈问题.对于一个大型的互联网应用,每天百万级甚至 ...
- .NET yield
.Net Yield 其实比较简单,手动yield,一学就会. public static class GalaxyClass { public static void ShowGalaxies() ...
- codeforces Round#380 div2
1.字符串替换ogo+go…换成*** 思路:找ogo记录g位置,做初步替换和标记,非目标字母直接输出, 间隔为2的判断是否一个为标记g,一个为非标记做***替换 #include<iostre ...
- animation动画兼容所有手机
.canvasAnim{ position: absolute; width:240px; height:240px; top:; z-index:; top:-20px; left:-5px; bo ...
- 《大话》之 装饰模式 Vs 建造者模式
一.简介: 装饰模式: 背景:小菜要见美女娇娇,感慨自己不会着装,怕给娇娇留下坏印象 内容:动态的给一个对象添加一些额外职责 图文并茂: ...
- T-SQL优化
我们做软件开发的,大部分人都离不开跟数据库打交道,特别是erp开发的,跟数据库打交道更是频繁,存储过程动不动就是上千行,如果数据量大,人员流动大,那么我么还能保证下一段时间系统还能流畅的运行吗?我么还 ...
- LoadRunner常用事务判断
一.数据值比较 lr_start_transaction("终审") if (atoi(lr_eval_string("{MyOutputParm}"))==a ...
- 判断网络是否连接 和 判断GPS是否连接
//判断网络是否连接 public static Boolean isNetworkEnabled(Context context){ int status=-1 //设置默认连接的状态为-1 Co ...
- position之absolute与relative 详解
absolute:绝对定位: relative:相对定位: 唉,以前只是知是知道这两个单词的汉语意思,然后呢,,,怎么用...也是摸凌两可的用.终于抽出时间来看看了: 1.绝对定位:absulute ...