个人网站主页上挂一个春节主题的灯笼

春节主题网页上挂的红灯笼   纯H5+CSS

H5元素 ↓↓↓↓↓↓

<div class="deng-box">
	<div class="deng">

		<div class="xian"></div>

			<div class="deng-a">
				<div class="deng-b">
					<div class="deng-t"></div>
			    </div>
		    </div>

		<div class="shui shui-a">
			<div class="shui-c"></div>
			<div class="shui-b"></div>
		</div>

	</div>
</div>

<div class="deng-box2">
	<div class="deng">
		<div class="xian"></div>
			<div class="deng-a">
				<div class="deng-b">
					<div class="deng-t"></div>
				</div>
			</div>
			
        <div class="shui shui-a">
			<div class="shui-c"></div>
			<div class="shui-b"></div>
		</div>
	</div>
</div>

CSS代码↓↓↓↓↓↓

/*CSS*/
/*盒子容器*/
.deng-box{position:fixed;top:-30px;right:0px;z-index:9;}
.deng-box2{position:fixed;top:-30px;left: 0px;z-index:9;}

/*灯笼 - 定义外模型、位置、动画基点和动画属性*/
.deng {
    position: relative;width: 120px;height: 90px;margin: 50px;
    background: rgba(216, 0, 15, 0.8);border-radius: 50% 50%;
	-webkit-transform-origin: 50% -100px;
	-webkit-animation: swing 4.5s infinite ease-in-out;
	box-shadow:-5px 5px 50px 4px rgb(250 108 0);
	}
.deng-box2 .deng {
	position: relative;width: 120px;height: 90px;margin: 50px;
	background: rgba(216, 0, 15, 0.8);
    border-radius: 50% 50%;
	-webkit-transform-origin: 50% -100px;
	-webkit-animation: swing 4s infinite ease-in-out;
	box-shadow:-5px 5px 50px 4px rgb(250 108 0);
	}

/*灯笼 - 模型*/
.deng:before{/*上笼口*/
	position: absolute;top: -7px;left: 29px;height: 12px;
	width: 60px;content: " ";display: block;z-index: 9;
	border-radius: 5px 5px 0 0;
	border: solid 1px #dc8f03;background: #ffa500;
	background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
	}
.xian{
    position: absolute;top:-20px;left:60px;width:2px;height: 20px;background: #dc8f03;
    }
.deng-a{
	width: 100px;height: 90px;margin: 12px 8px 8px 10px;
    background: rgba(216, 0, 15, 0.1);
	border-radius: 50% 50%;border: 2px solid #dc8f03;
	}
.deng-b{
	width: 45px;height: 90px;background: #d8000f;background: rgba(216, 0, 15, 0.1);
	margin: -4px 8px 8px 26px;border-radius: 50% 50%;border: 2px solid #dc8f03;
	}

/*灯笼 - 福字*/
.deng-t {
	width: 2.8rem;height:5.2rem;background:url(fu.png) center no-repeat;
	}

/*灯笼 - 定义穗子模型、位置、动画属性*/
.shui-a {
	position: relative;width: 5px;height: 20px;margin: -5px 0 0 59px;
	-webkit-animation: swing 4s infinite ease-in-out;
	-webkit-transform-origin: 50% -45px;
	background: #ffa500;border-radius: 0 0 5px 5px;
	}
.shui-c {
    position: absolute;top: 18px;left: -2px;width: 10px;height: 35px;
    background: #ffa500;border-radius: 0 0 0 5px;
    }
.shui-b {
    position: absolute;top: 14px;left: -2px;width: 10px;height: 10px;
    background: #dc8f03;border-radius: 50%;
    }
.deng:after {/*下笼口*/
	position: absolute;bottom: -7px;left: 10px;height: 12px;
    width: 60px;content: " ";display: block;
	margin-left: 20px;border-radius: 0 0 5px 5px;border: solid 1px #dc8f03;
	background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
	}

/*定义动画*/
@keyframes swing{
	20% {-webkit-transform: rotate(15deg);transform: rotate(15deg);}
	40% {-webkit-transform: rotate(-10deg);transform: rotate(-10deg);}
	60% {-webkit-transform: rotate(5deg);transform: rotate(5deg);}
    80% {-webkit-transform: rotate(-5deg);transform: rotate(-5deg);}
    100% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
	}

上文中灯笼上的福字：

转载自网络，感谢作者，虽然在茫茫数字世界中没有缘分遇到你，但我们也可以在新春佳节之际向你表达祝福