春节主题网页上挂的红灯笼 纯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);}
}
上文中灯笼上的福字:
转载自网络,感谢作者,虽然在茫茫数字世界中没有缘分遇到你,但我们也可以在新春佳节之际向你表达祝福