如何通过css样式来实现网站logo发光动画效果

html-css031

如何通过css样式来实现网站logo发光动画效果,第1张

由于有字数限制,不能写出所有详细步骤,所以这里不添加代码了,你可以自己搜索下添加修改css代码,然后按着操作走就可以了,但是提醒你,有些模板CSS代码不相同,新手不易操作,以防出错

把你找到的css代码当中的logo-site改成你网站包围logo的css即可(f12键审核元素,即可找到你的logo的css元素)。找到你logo的css名称然后把上面的css代码修改成你的css名称,放入css代码当中即可(防止出错,记得备份!)

以上就是logo添加css扫光效果的方法,当然你也可以运用到其他的地方。

我们简单的将HTML写成这样:

<div id="container"

<img id="logo" src="logo.png" alt="Lee Munroe" /</divCSS样式可能会是这个样子的:

body{background:#999}

#container{

width:960px

background:#fff

margin:20px auto

padding:10px}下面是一个效果预览:

设置为相对定位,当我们定位logo的时候,我们希望它的位置是相对于容器的,因此使用相对定位:

#container{

width:960px

background:#fff

margin:20px auto

padding:10px

position:relative}将它定位到盒子的外面现在你需要做的就仅仅是定位logo,将其水平定位,让它从容器中突出出来。#logo{position:absolute

用CSS背景和定义。

<div class="logo" title="网站名称"><a href="/"><h1>网站名称</h1></a></div>

<style>

.logo{width:200pxheight:80pxbackground:url(/images/logo.png) no-repeat}

.logo h1{text-indent:-9999pxwidth:200pxheight:80pxoverflow:hidden}

</style>

CSS(层叠样式表)级联样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。