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!

人工智能实验室
相关文章相关文章
  • 韩春雨称已能重复实验结果 近期将有消息公布

    韩春雨称已能重复实验结果 近期将有消息公布

  • 英国研发“杀生”机器人 通过生命体获取能量

    英国研发“杀生”机器人 通过生命体获取能量

  • 无人驾驶汽车如何改变城市生活?听听他们怎么说

    无人驾驶汽车如何改变城市生活?听听他们怎么说

  • 未来两年人工智能要怎么走?看这篇就够了

    未来两年人工智能要怎么走?看这篇就够了

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

据国外媒体报道,在过去两年内,聊天机器人(chatbot)、人工智能以及机器学习的研发和采用取得了巨大进展。许多初创公司正利用人工智能和...

霍金 视觉中国 图 英国著名物理学家霍金(Stephen Hawking)再次就人工智能(AI)发声,他认为:对于人类来说,强大AI的出现可能是最美妙的...

文|郑娟娟 今年,人工智能(AI) 60岁了。在AI60岁的时候,笔者想要介绍一下AI100,一个刚刚2岁的研究项目,但它的预设寿命是100年,甚至更长...

AlphaGo与李世石的人机大战,为大众迅速普及了人工智能的概念。 但对谷歌而言,除了下围棋,现在的人工智能进展到哪一步了?未来,人工智能...