妙味茶馆

 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 6807|回复: 5

妙味课堂--电脑壁纸翻转效果(CSS3+JS实现)

  [复制链接]
monica 发表于 2013-5-24 15:06:23 | 显示全部楼层 |阅读模式
CSS3交互特效分享来喽!!让大家久等了哦~~ ,虽然有一段时间没有分享过的CSS3的特效了,但是我想大家对CSS3的学习热情并不会因为时间的长短而减少,对吧 嘿嘿~~好啦,现在就说说今天为大家分享的效果吧~·

今天为大家分享的是CSS3配合JS实现的<电脑桌面壁纸翻转>效果;其中用到了css3里面的preserve-3d(3D)、perspective(景深)、transition(过渡)、transform(转换)等知识,在利用JS计算出每个距离this的距离,其用到的距离公式运用的是初中的三角函数:A²+B²=C²,有那么一点点的小绕哦; 当然啦,还是很希望童鞋们可以通过从中学习到的知识,拓展出更多好的效果、作品 ,大家可以自己试着做一做哦!!


效果截图:
1.png

在线效果预览:
http://2013.miaov.com/miaov_demo/css3_picFz/css3.html


☞PS:由于时间原因,本效果没有做非chrome浏览器兼容,所以需要大家用chrome才能看到效果哦~~感兴趣的童鞋也可以自己尝试的做下兼容版本哦~~

♥友情提示:如需源码,点击效果预览地址后,在页面上单击右键直接查看网页源代码即可!!










回复

使用道具 举报

滴水成“兵” 发表于 2013-6-5 14:33:02 | 显示全部楼层
~function(){}() 这是什么用法
回复 支持 反对

使用道具 举报

无为 发表于 2013-6-5 23:06:50 | 显示全部楼层
滴水成“兵” 发表于 2013-6-5 14:33
~function(){}() 这是什么用法

亲, 你为什么不自己写一个执行一下看看呢....
回复 支持 反对

使用道具 举报

创美易-miaov 发表于 2013-7-30 22:34:07 | 显示全部楼层
无为 发表于 2013-6-5 23:06
亲, 你为什么不自己写一个执行一下看看呢....

这是闭包吧
回复 支持 反对

使用道具 举报

现舞 发表于 2015-10-29 13:48:32 | 显示全部楼层
滴水成“兵” 发表于 2013-6-5 14:33
**** 作者被禁止或删除 内容自动屏蔽 ****

函数自执行
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|Archiver|小黑屋|妙味课堂 ( 京ICP备08102442号

GMT+8, 2019-1-16 19:43 , Processed in 0.137278 second(s), 29 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表