个人博客引导页自适应动漫背景自动切换带背景音乐

最新推荐文章于 2024-02-16 16:27:09 发布

ots_luo

最新推荐文章于 2024-02-16 16:27:09 发布

阅读量672

点赞数

文章标签： web javascript css css3 html5

本文链接：https://blog.csdn.net/weixin_45738527/article/details/105816304

版权

前端html、css、js 同时被 2 个专栏收录

6 篇文章 7 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

个人博客引导页自适应动漫背景自动切换带背景音乐

前言

大家好，我是ots_luo,今天给大家带来一款适合个人博客的引导页，采用适合手机，平板，电脑的自适应布局，带背景（自动切换）带背景音乐。鼠标放在头像框是会切换图片的。图片和文章均可修改。

效果

部分效果图截图：
在这里插入图片描述

部分源码

<body>
<div id="top">
<main id="top_main">
<div id="top_logo"><img src="./htmlimg/tx.png" onmouseover="mouseOver()" onmouseout="mouseOut()" id="mainimg"></div>
<div id="top_title"><img id="top_title01" alt=""" src="./htmlimg/toptitle01.png">
<br class="top_hr_style01">
<img id="top_title02" alt=""" src="./htmlimg/toptitle02.png">
</div><br><br>s
<div class="showcase-examples l-over l-center">
  <a href="http://www.ots-sec.cn/" target="_blank" class="button button-rounded button-plain button-small-caps button-border">待添加</a>
  <a href="http://www.ots-sec.cn/" target="_blank" class="button button-rounded button-plain button-small-caps button-border">待添加</a>
  <a href="http://www.ots-sec.cn/" target="_blank" class="button button-rounded button-plain button-small-caps button-border">待添加</a>
  <a href="http://www.ots-sec.cn/" target="_blank" class="button button-rounded button-plain button-small-caps button-border">待添加</a>
  </div>

</main>
<script>
	function mouseOver(){
		document.getElementById("mainimg").src="./htmlimg/tx2.png";//鼠标悬浮时的旋转图标
	}
	function mouseOut()
	{
		document.getElementById('mainimg').src ="./htmlimg/tx.png"//默认的旋转图标
	}
</script>
</div>
</body>