超级浪漫的圣诞节

最新推荐文章于 2024-05-07 23:11:20 发布

小王子同学

最新推荐文章于 2024-05-07 23:11:20 发布

阅读量504

点赞数 12

分类专栏：节假日文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45810587/article/details/135055479

版权

节假日专栏收录该内容

2 篇文章 0 订阅

订阅专栏

超级浪漫的圣诞节

在这个神圣的圣诞夜，一片银白的雪花舞动在无边的夜空中，仿佛星星跳跃的音符，轻轻地覆盖着大地，为这个温暖的季节披上了一层梦幻的华衣。

漫步在这个寂静的夜晚，你会发现一座璀璨的城堡在远方绽放，它的每一个窗户都点缀着温暖的黄色灯光，如同心灵的灯塔，为彷徨的旅人指引方向。

透过城堡的窗户，你会看到一家温馨的咖啡馆，炽热的咖啡香气弥漫其中，窗外的雪花在城堡的光辉下闪烁，仿佛故事书中跳动的仙境。

走进咖啡馆，你会被一曲轻柔的圣诞颂歌所陶醉，钢琴声如诗如画，为每一个在这里驻足的灵魂奏响一曲温馨的夜曲。座位上的小烛光散发着微弱的光芒，勾勒出幸福的微笑。

窗边摆放着一棵翠绿的圣诞树，挂满了闪烁的彩灯和各种装饰，树下摆放着丰富的礼物，每一个礼物都包裹着心意，等待着被送到幸福的彼岸。

在角落的吧台上，一位慈祥的老板正忙碌着为客人调制着独特的圣诞特饮，每一杯都是对幸福的美好寄托。一群年轻人围坐在一起，共同分享着温馨的时光，笑声在空气中荡漾，如同一串串银铃。

突然间，一群小精灵跳进了咖啡馆，他们手持银色的喇叭，为这个夜晚奏响了欢快的音符，舞动着快乐的步伐，将欢愉传递给每一个人。瞬间，整个城堡都沉浸在了浪漫的氛围之中。

这是一个属于圣诞的夜晚，是梦幻与现实的交汇，是温馨与欢愉的交响。在这片雪花飘舞的世界里，每一颗心都因为这份浪漫而融化，成为了圣诞夜的独特注脚。愿你在这个美好的夜晚里，找到心灵深处最美好的温暖。

运行效果如下：

浪漫的圣诞节

部分源码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>浪漫的圣诞节</title>
	<link rel="stylesheet" href="css/common.css">
<!-- 	<link rel="stylesheet" href="css/pageA.css">
	<link rel="stylesheet" href="css/pageB.css">
	<link rel="stylesheet" href="css/pageC.css"> -->


</head>
<body>
	<section class='container'>
		<!-- 第一幅图 -->
		<section class='page-a bg-adaptive'>
			<figure class="moon"></figure>
			<figure class="tree"></figure>
			<figure class="cloudy"></figure>
			<div class='chs-boy chs-boy-deer'></div>
			<svg viewBox="0 0 512 486">
				<defs>
					<linearGradient id="star" x1="0%" y1="0%" x2='100%' y2="0%">
						<stop offset="0%" stop-color="#fcf0bc"></stop>
						<stop offset="0%" stop-color="#fcf0bc"></stop>
					</linearGradient>
				</defs>
				<polygon style="fill:url(#star);" points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
			</svg>
			<div class='window wood'>
				<div class='window-bg'></div>
				<div class='window-content'>
					<div class='window-left'></div>
					<div class='window-right'></div>
				</div>				
			</div>
		</section>
		<section class='page-b bg-adaptive'>
			<figure class='cat'></figure>
			<figure class="girl"></figure>
			<figure class='christmas-boy-head'></figure>
			<figure class='christmas-boy boy-walk'></figure>
			<div id="carousel">
				<figure id='spinner'></figure>
			</div>
		</section>
		<section class="page-c bg-adaptive">
			<div class="moon"></div>
			<div class="cloudy"></div>
			<svg viewBox="0 0 512 486">
                <defs>
                    <linearGradient id="star" x1="0%" y1="0%" x2="100%" y2="0%">
                        <stop offset="0%" stop-color="#FCF0BC"></stop>
                        <stop offset="0%" stop-color="#FCF0BC"></stop>
                    </linearGradient>
                </defs>
                <polygon style="fill: url(#star);" points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
            </svg>
            <figure class='tree treefix'></figure>
            <figure class='deer'></figure>
			<div class="window wood">
				<div class="window-content" data-attr="red">
					<div class="window-scene-bg"></div>
					<div class="window-close-bg"></div>
					<div class="window-left hover"></div>
					<div class="window-right hover"></div>
				</div>
			</div>
		</section>
		<canvas id="snowflake" style="position:absolute;z-index: 999;"></canvas>
	</section>
	<script type="text/javascript">
	//rem大小设置
	var config={fullscreen:!0,layer:{width:"800",top:0,left:0}},proportion=.625;
	if(config.fullscreen){
		var width=document.documentElement.clientWidth;
		config.layer.width=width,config.layer.height=width*proportion;
	}
	else config.layer.height=config.layer.width*proportion;
	(function(doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function() {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
                //宽与高度
                document.body.style.height = clientWidth * (900 / 1440) + "px";
                config.clientWidth=clientWidth;
                config.clientHeight=clientWidth*(900/1400);
            };
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
	
</script>
	<script type="text/javascript" src='js/jquery.js'></script>
	<script type="text/javascript" src='js/jquery_transit.js'></script>
	<script type="text/javascript" src="js/carousel.js"></script>	
	<script type="text/javascript" src='js/observer.js'></script>
	<script type="text/javascript" src='js/pageA.js'></script>
	<script type="text/javascript" src='js/pageB.js'></script>
	<script type="text/javascript" src="js/snowflake.js"></script>
	<script type="text/javascript" src='js/pageC.js'></script>
	<script type="text/javascript" src='js/christmas.js'></script>
	
</body>

</html>

有情人终成眷属

需要完整的源码的请点击这里：

超级浪漫的圣诞节完整源码

小王子同学

关注

12
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
1
评论
超级浪漫的圣诞节

在这个神圣的圣诞夜，一片银白的雪花舞动在无边的夜空中，仿佛星星跳跃的音符，轻轻地覆盖着大地，为这个温暖的季节披上了一层梦幻的华衣。漫步在这个寂静的夜晚，你会发现一座璀璨的城堡在远方绽放，它的每一个窗户都点缀着温暖的黄色灯光，如同心灵的灯塔，为彷徨的旅人指引方向。透过城堡的窗户，你会看到一家温馨的咖啡馆，炽热的咖啡香气弥漫其中，窗外的雪花在城堡的光辉下闪烁，仿佛故事书中跳动的仙境。走进咖啡馆，你会被一曲轻柔的圣诞颂歌所陶醉，钢琴声如诗如画，为每一个在这里驻足的灵魂奏响一曲温馨的夜曲。
复制链接

扫一扫