资讯频道 → Web前端
阅读更多

30顶
8踩

Web前端

原创新闻 3D CSS 视觉效果

2009-12-16 11:29 by 副主编 zly06 评论(25) 有38671人浏览
CSS

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

Roman Cortes 利用视觉差效果（parallax effect），只使用CSS和HTML便创造出了一个3D效果。当你的鼠标在图片上滑动时，就会看到效果。非常有趣！ （请点击图片）

 

点此查看demo：http://www.romancortes.com/ficheros/meninas.html#

 

示例

<style type="text/css">
                a#a96:hover img {left: 224px}a#a96:hover b.d1 {background-position: 224px 0; width: 224px}a#a96:hover b.d2 {background-position: -449.6px 18px;}a#a96:hover b.d3 {background-position: -32px -216px; width: 368px}a#a96:hover b.d4 {background-position: -64px -74px;}a#a97:hover img {left: 223px}a#a97:hover b.d1 {background-position: 223px 0; width: 223px}a#a97:hover b.d2 {background-position: -449.7px 18px;}a#a97:hover b.d3 {background-position: -32.3333333333px -216px; width: 367.666666667px}a#a97:hover b.d4 {background-position: -64.6666666667px -74px;}a#a98:hover img {left: 222px}a#a98:hover b.d1 {background-position: 222px 0; width: 222px}a#a98:hover b.d2 {background-position: -449.8px 18px;}a#a98:hover b.d3 {background-position: -32.6666666667px -216px; width: 367.333333333px}a#a98:hover b.d4 {background-position: -65.3333333333px -74px;}a#a99:hover img {left: 221px}a#a99:hover b.d1 {background-position: 221px 0; width: 221px}a#a99:hover b.d2 {background-position: -449.9px 18px;}a#a99:hover b.d3 {background-position: -33px -216px; width: 367px}a#a99:hover b.d4 {background-position: -66px -74px;}        </style>

<body>
        <a href="#" id="a0"><img src="meninas_bg2.jpg" width="80" height="455" alt="" /><b class="d1"></b><b class="d4"></b><b class="d3"></b><b class="d2"></b><span>&nbsp;</span></a><a href="#" id="a1"><img src="meninas_bg2.jpg" width="81" height="455" alt="" /><b class="d1"></b><b class="d4"></b><b class="d3"></b><b class="d2"></b><span>&nbsp;</span></a>
        <a href="#" id="a2"><img src="meninas_bg2.jpg" width="82" height="455" alt="" /><b class="d1"></b><b class="d4"></b><b class="d3"></b><b class="d2"></b><span>&nbsp;</span></a><a href="#" id="a3"><img src="meninas_bg2.jpg" width="83" height="455" alt="" /><b class="d1"></b><b class="d4"></b><b class="d3"></b><b class="d2"></b><span>&nbsp;</span></a><a href="#" id="a4"><img src="meninas_bg2.jpg" width="84" height="455" alt="" /><b class="d1"></b><b class="d4"></b><b class="d3"></b><b class="d2"></b><span>&nbsp;</span></a><a href="#" id="a5"><img src="meninas_bg2.jpg" width="85" height="455" alt="" /><b class="d1"></b><b class="d4"></b><b class="d3"></b><b class="d2"></b><span>&nbsp;</span></a><a href="#" id="a6"><img src="meninas_bg2.jpg" width="86" height="455" alt="" /><b class="d1"></b><b class="d4"></b><b class="d3"></b><b class="d2"></b><span>&nbsp;</span></a><a href="#" id="a7"><img src="meninas_bg2.jpg" width="87" height="455" alt="" /><b class="d1"></b><b class="d4"></b><b class="d3"></b><b class="d2"></b><span>&nbsp;</span></a><a href="#" id="a8"><img src="meninas_bg2.jpg" width="88" height="455" alt="" /><b class="d1"></b><b class="d4"></b><b class="d3"></b><b class="d2"></b><span>&nbsp;</span></a><a href="#" id="a9"><img src="meninas_bg2.jpg" width="89" height="455" alt="" /><b class="d1"></b><b class="d4"></b><b class="d3"></b><b class="d2"></b><span>&nbsp;</span></a><a href="#" id="a10"><img src="meninas_bg2.jpg" width="90" height="455" alt="" /><b class="d1"></b><b class="d4"></b><b class="d3"></b><b class="d2"></b><span>&nbsp;</span></a><a href="#" id="a11"><img src="meninas_bg2.jpg" width="91" height="455" alt="" /><b class="d1"></b>

 

还有一些与此类似的例子：http://webdev.stephband.info/parallax.html

  • 大小: 191.3 KB
  • 大小: 51 KB
来自: ajaxian
30
顶
8
踩
评论 共 25 条 请登录后发表评论
25 楼 qingfeng55xuan 2010-12-01 12:15
不论是二维还是三维！
在屏幕上就是二维！！
思维很重要！！
支持楼主！！！！！

我这ie5的擎，感觉很流畅！http://webdev.stephband.info/parallax.html
呵呵……

而楼主的就没有看到效果，好像是一闪而过！？！！？
24 楼 darkbaby123 2009-12-18 10:17
好像看到了以前玩的2D RPG游戏，利用几层静态的图来模仿立体效果，怀念……
23 楼 zhaolaiwei 2009-12-18 09:41
效果很棒~！
22 楼 fendydeng 2009-12-18 09:41
哈哈,像模像样
21 楼 geminiyellow 2009-12-18 09:39
看的我头好晕。图片太扯了。
20 楼 tiantianzzz 2009-12-18 09:01
这有什么强的 分成了79列定义了79个不同的样式而已..
19 楼 zxz87 2009-12-17 19:13
opera下效果不错，
单核pm 1.73g，占用率60%
18 楼 ChinaEstone 2009-12-17 17:36
偶也没有看出3D效果.
17 楼 liyu76 2009-12-17 17:12
没看出来有什么3D效果呀
16 楼 InnocentBoy 2009-12-17 15:52
效果的确不错！
15 楼 lpzp123 2009-12-17 15:10
牛逼闪闪，实在是佩服
14 楼 dongjie.liu 2009-12-17 14:09
这个太牛了
13 楼 beingchou 2009-12-17 12:56
没硬件加速果然不行啊。。。希望W3C快些通过HTML5和CSS3的硬件加速功能。
12 楼 tedeyang 2009-12-17 12:21
chrome ,firefox都飙到50%，【2.5G双核】
11 楼 husai 2009-12-17 09:56
opera 下效果不错。。
10 楼 leisure 2009-12-17 09:46
镭风【CHN】 写道
CPU直接升到35-45，太高了

cpu确实飙升
9 楼 镭风【CHN】 2009-12-17 09:05
CPU直接升到35-45，太高了
8 楼 NumbCoder 2009-12-17 08:52
哦  查到了，是利用图片的叠加效果，不过还蛮有创意的。
7 楼 NumbCoder 2009-12-17 08:48
rplees 写道
unika_ly12 写道
IE7看的一颤一颤的。

IE8看的也是。。。

都是一颤一颤的，估计效果就是这样的。

我怎么感觉就是几块图片拼凑起来的，移来移去，没什么3D效果。
6 楼 hailongshih 2009-12-17 01:49
太强大了http://www.javaeye.com/images/smiles/icon_surprised.gif

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 一个使用des加密传输的unix下的login程序的服务器端和客户端.gz

    一个使用des加密传输的unix下的login程序的服务器端和客户端.gz

  • 【网络-分析】TELNET安全性分析

    为什么博主在上一篇帖子中说不建议使用TELNET登陆交换机，原因为：TELNET本身的安全机制太差，将所有数据以明文的形式在网络上传输。 我们来做个实验看验证下TELNET的工作机制 网络拓补 我们先如图搭建好网络环境并配置好交换机，交换机的配置可以参考博主之前的帖子【网络-实验】Telnet典型配置举例 抓包分析 在虚拟机中登陆交换机，需要提前打开telnet客户端 功能。 ...

  • Linux远程服务SSH和TELNET详解及安全防范措施

    SSH：安全的远程连接，数据信息是加密的，端口是22默认可以root用户远程连接TELNET：不安全的远程连接，数据信息是明文的，端口是23默认不能让root用户远程连接服务端systemd管理客户端进行连接每连接登陆到一个linux系统中，就是一个shell可以一个linux系统有多个会话连接，每一个会话都是一个shell系统中用户可以实现相互转换，每转换一个用户就是一个shell。

  • Telnet的安全性问题

    Telnet技术是一种用于远程登录到计算机或网络设备的协议。它允许用户通过网络远程登录到另一台计算机，并在远程计算机上执行命令。Telnet最初是在1970年代开发的，是互联网早期最常用的远程登录协议之一。然而，随着网络安全意识的增强和技术的发展，Telnet的安全性问题逐渐凸显出来。Telnet技术在计算机网络中有着一定的应用和局限性。作为一名计算机工程学院且是网络空间安全专业的学生，我深知Telnet在网络安全方面存在的问题和挑战。在实际应用中，我们需要综合考虑安全性和便利性，选择适合的远程登录协议。

  • 论telnet远程登录的不安全性及ssh的优缺点

    论telnet远程登录的不安全性及ssh的缺点 本篇通过wiresshark抓包来抓取telnet远程控制的用户及密码，可以清晰的看出telnet登录的不安全性，作为一名网络工程师，更多的时候应该从各方面的情况去考虑，分析从而去解决问题。另外再简单的讲一下ssh登录的优缺点。 telnet telnet协议是TCP/IP协议族中的一员，是Internet远程登录服务的标准协议和主要方式。它为用户提...

  • telnet入侵及防护

    环境 三台机器，分别为ubuntu（32位），kali（2017.1），windows10 分别查看ip如下： 记录如下： Ubuntu：192.168.43.216 Kali：192.168.43.143 Windows：192.168.43.252 接下来开始实验 首先来到ubuntu 首先安装开启telnet server所需的软件 编辑此文件 输入一下内容并保存 编辑此文件 添加以下内容...

  • telnet 22正常 ssh无法连接_Telnet咋就不安全了呢？带你来看用户名和密码

    曾几何时，Telnet是我最喜欢的远程登录协议！当年还年轻，还在H公司做网络测试的工作，天天千方百计的找路由器和交换机的BUG，总想给开发人员添堵，总想搞事情、不想让版本正常发布：)，现在回想起来，那真是一段单纯而美好的时光！为了对交换机和路由器进行管理，当时我们都是使用Telnet登录的，各种命令敲的很High。突然有一天，我们的部门经理(现在担任H公司高管)专门把我们召集起来，让我们以后登录设...

  • Telnet与SSH的安全性

    Telnet与SSH的安全性 Telnet协议的安全性 在一台Centos 7.5的虚拟机上安装Telnet，并使用Wireshark抓包，分析如下：Telnet右键点击“追踪流”，然后点击“TCP流”： 发现传输的数据包都是明文的，包括账户与密码，说明一个情况，如果使用Telnet服务，并有人在中间抓包，所有的信息都是可以抓到了，无保密性可言；这种方式是不安全的。 SSH协议的安全性 点击SSHv2,步骤和Telnet一样，会发现里面全是密文加密的，所有的信息都是加密处理，所以更加的安全。 ...

  • HCIA|详解Telnet协议

    今天翻到了之前写的Telnet协议的实验，由于该篇文章创作于开始写作的初期，文章结构简单、布局潦草，但实验内容是完整的，因此本篇文章将对Telnet技术进行详解，希望能够对大家提供帮助。在本文中，将从Telnet的简介、工作方式、通信流程、安全性几个方面出发，对Telnet进行介绍。

  • 你真的了解telnet吗？

    你真的了解telnet吗？创建时间：2003-07-08文章属性：原创文章提交：iqst (papabang_at_qingdaonews.com)author: iqst from: http://ccbirds.yeah.net retain above info to transport 目录： 一 摘要 二 远程登录 三 Telnet协议 四 Win2000的Telnet服务

  • 常见端口

    在上网的时候，我们经常会看到“端口”这个词，也会经常用到端口号，比如在FTP地址后面增加的“21”，21就表示端口号。那么端口到底是什么意思呢？怎样查看端口号呢？一个端口是否成为网络恶意攻击的大门呢？，我们应该如何面对形形色色的端口呢？下面就将介绍这方面的内容，以供大家参考。　　21端口：21端口主要用于FTP(File Transfer Protocol，文件传输协议)服务。　　端口说

  • 网络安全专栏——telnet远程登录数据包捕获个性化登录账号及密码（图文丰富 保姆级 有几种错误解决方案 为什么不用输入telnet密码就能登录 ）

    写在前面的话：利用Telnet远程登录捕获登录帐号和密码 图文丰富 保姆级 有几种错误解决方法 比如说无法输入telnet密码就能登录

  • 线上Linux服务器运维安全策略经验分享

    线上Linux服务器运维安全策略经验分享 https://mp.weixin.qq.com/s?__biz=MjM5NTU2MTQwNA==&amp;amp;mid=402022683&amp;amp;idx=1&amp;amp;sn=6d403ab4472e8c6fb5615e3694ef1abf&amp;amp;scene=0&amp;amp;key=710a5d99946419d997addab69cf0313c7ced31d8...

  • telnet协议远程登录的全面分析

    我们的工作中少不了telnet协议远程登录来进行一些网络设备的管理。这之中，我们常用的就是对交换机和路由器的批处理了。那么今天我们不讲这方面的问题，抓哟讨论一下基本的telnet协议远程登录的具体方法和一些根用户的创建问题。 利用远程登录协议来远程登录并对服务器进行管理，这是服务器管理员最司空见惯的操作了。在Windows操作环境中，系统管理员可能喜欢采用telnet协议来完成这个任务。但是在L

  • php 加密DES

    &amp;lt;?php  function pkcs5_pad ($text, $blocksize)  {      $pad = $blocksize - (strlen($text) % $blocksize);      return $text . str_repeat(chr($pad), $pad);  }    function pkcs5_unpad($text) ...

  • DES算法简单介绍及用法

    大家好，今天给大家分享一下DES加密 一、DES介绍 加密一般分为可逆加密和不可逆加密，其中可逆加密一般又分为对称加密和非对称加密，前者是我们使用公用密钥加密之后可以使用公用密钥再解密出来，而后者则是使用公用密钥加密之后必须使用私用密钥来解密。除此之外还有不可逆的加密，使用不可逆加密之后是无法解密的，如果我们想验证数据是否正确只能使用同样方法再次加密然后比较两次加密完生成的key是否相同。所以...

  • 常见危险端口服务及对应的漏洞

    20：FTP服务的数据传输端口 21：FTP服务的连接端口，可能存在 弱口令暴力破解 22：SSH服务端口，可能存在 弱口令暴力破解 23：Telnet端口，可能存在 弱口令暴力破解 25：SMTP简单邮件传输协议端口，和 POP3 的110端口对应 43：whois服务端口 53：DNS服务端口(TCP/UDP 53) 67/68：DHCP服务端口 69：TFTP端口，可能存在...

Global site tag (gtag.js) - Google Analytics