css [滑动效果]Rollovers 实例教程

  次阅读 来源:互联网(转载协议) 2016-03-25 16:32 我要评论(0)

翻转的CSS

由三奇,又名Halikidiki : 2005年1月19

现在正在一个我自己,我敢肯定,所有网页设计师在某个时候在其设计寿命想改变一个图像到另一个时,鼠标辗过(通常使用的联系) 。最通用的方式实现这一目标是利用JavaScript和有很多教程了。但是,你(如果你像我这样的东西)停顿某处教程,跳到直线年底获得代码,然后只要复制并粘贴到您的网站上。现在,这个工作和一切,你不明白,为什么它的作品。或者,如果任何事情都会发生错误你怎么解决?翻车的CSS更简单,不需要任何东西,除非CSS和HTML (甚至不为预) 。

本教程将引导您如何使锚标签到链接的图片,然后不断变化的图片时,鼠标上的形象。

这是一个例子,就是我要告诉你如何去做:

以下是如何

下面的步骤将解释如何可以实现这一效果。

打开HTML文件您想要一个CSS翻滚(或使用此HTML代码如果您只想进行试验的效果) :

<html>

<head>

<title>CSS Rollovers</title>

<style type="text/css">

@import "rollover.css";

</style>

</head>

<body>

<div>

<a href="#" id="example">Home</a>

</div>

</body>

</html>

您不必担心任何的代码(你应该很容易理解这一切反正)以外的锚定标记的,什么是内部的风格标记。

保存您的HTML文件。

开放的FrontPage /制作/记事本(无论你喜欢使用) ,并粘贴的CSS :

#example{

height: 20px;

width: 158px;

text-indent: 10000px;

overflow: hidden;

background: url(kirupa1.gif) top left no-repeat;

display: block;

}

#example:hover{

background-position: bottom left;

}

为了本教程,请档案rollover.css并保存在同一目录作为您的HTML文件。

现在,这是本从不同majorly使用JavaScript 。对于转你有两个形象,一个是原来的状态和一个过渡的状态。当使用的CSS翻车你需要把图片都在相同的图像,像这样:

保存的形象kirupa1.gif在同一目录中的HTML + CSS文件。然后查看您的HTML文件和voila !

现在...时间去通过这个代码

#什么是指所谓的ID什么,一样上课,但应只能使用一次的HTML文件。

尺寸kirupa1.gif是158px的40px 。但是,一半的高度是一个形象,我们不希望看到(至今) ,我们将高度20px ,以及后来对我们制定的背景,地位最高。

对于浏览器无法查看的CSS (是的,我知道... )你应该始终包括一些文字中之间的开启和关闭锚标记。对于那些浏览器可以查看的CSS我们必须摆脱这一案文。因此,我们确定了文本缩进一些数量庞大,并设置溢出为隐藏。自我解释。

最后两行中的#例如( )只是所谓的背景图片,告诉它自己置于上方,并且也不要重演。

其次是#例如:悬停-在悬停说基本上是当鼠标移动到这个因素风格像这样。

所有这一切都没有改变它是展示顶端20pixels ,以显示底部20pixels ,有效图像切换。

干得好!您已经成功地创造了一些纯粹的CSS翻车!这是非常简单的比使用JavaScript ,因为它并不需要载入图像时,第二次鼠标辊超过您有没有必要使用JavaScript预装的形象。

本站部分文章来源于网络以及网友投稿,本站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,并不意味着赞同其观点或证实其内容的真实性。如果您有什么意见或建议,请联系QQ28-1688-302!

人工智能实验室
相关文章相关文章
  • 长虹新款智能语音空调,告诉你空调也能玩Siri

    长虹新款智能语音空调,告诉你空调也能玩Siri

  • 品友互动为Digital Travel APAC2018 唯一受邀中国AI企业

    品友互动为Digital Travel APAC2018 唯一受邀中国AI企业

  • 让AI触手可及  Qualcomm携手创通联达推出全新终端侧AI开发套件

    让AI触手可及 Qualcomm携手创通联达推出全新终端侧AI开发套件

  • 第一批国家重点研发计划公布,旷视科技开启“五年行动”

    第一批国家重点研发计划公布,旷视科技开启“五年行动”

网友点评网友点评
阅读推荐阅读推荐

据外媒报道,STEER打造了首款完全自动驾驶停车技术,旨在使常规车辆转变为无人驾驶车辆。STEER的首款技术应用是4级自动驾驶及网络安全停车...

近日,美国软性机器抓手制造商 Soft Robotics 宣布,获得 2000 万美元的融资,本轮投资者包括 Scale Venture Partners,Calibrate Ventures...

据外媒报道,加州车管局发布了《2017自动驾驶脱离报告(California Autonomous Vehicle Disengagement Reports)》,其中谈及了脱离的具体...

用人机语音交互,来解决智能家居适老的问题;通过家庭门禁与安防套件、空气净化套件、可燃气体与有害气体监控套件等相互联动,在不同生活情...