时间:2024-02-28 浏览量: 收藏
Html+Css制作网站新年灯笼特效
仅在PC端显示,手机端屏蔽
html代码如下:
<!-- 灯笼 左 --> <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> <div class="shui shui-b"></div> <div class="shui shui-c"></div> </div> </div> <div class="deng-box1"> <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> <div class="shui shui-b"></div> <div class="shui shui-c"></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> <div class="shui shui-b"></div> <div class="shui shui-c"></div> </div> </div> <div class="deng-box3"> <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> <div class="shui shui-b"></div> <div class="shui shui-c"></div> </div> </div>
Css代码如下:
@media (max-width: 769px){.deng-box{display: none;}.deng-box1{display: none;}.deng-box2{display: none;}.deng-box3{display: none;}} .xian { position: absolute; top: -20px; left: 60px; width: 2px; height: 20px; background: #dc8f03; } .deng-box { position: fixed; top: -30px; z-index: 999; } .deng-box1 { position: fixed; top: -30px; left: 100px; z-index: 998; } .deng-box2 { position: fixed; top: -30px; right: 120px; z-index: 999; } .deng-box3 { position: fixed; top: -30px; right: 30px; z-index: 998; } .deng { position: relative; width: 120px; height: 90px; margin: 50px; background: #d8000f; background: rgba(216, 0, 15, 0.9); border-radius: 50% 50%; -webkit-transform-origin: 50% -100px; -webkit-animation: swing 3s infinite ease-in-out; box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1); } .deng-a { width: 100px; height: 90px; background: #d8000f; background: rgba(216, 0, 15, 0.2); margin: 12px 8px 8px 8px; border-radius: 50% 50%; border: 2px solid #dc8f03; } .deng-b { width: 45px; height: 90px; background: #d8000f; background: rgba(216, 0, 15, 0.2); margin: -4px 8px 8px 26px; border-radius: 50% 50%; border: 2px solid #dc8f03; } .shui { width: 5px; height: 40px; background: #ffa500; border-radius: 0 0 5px 5px; } .shui-a { margin: -10px 0 0 40px; -webkit-animation: swing 4s infinite ease-in-out; -webkit-transform-origin: 50% -20px; } .shui-b { margin: -35px 0 0 59px; -webkit-animation: swing 4s infinite ease-in-out; -webkit-transform-origin: 50% -45px; } .shui-c { margin: -45px 0 0 77px; -webkit-animation: swing 4s infinite ease-in-out; -webkit-transform-origin: 50% -25px; } .deng:before { position: absolute; top: -7px; left: 29px; height: 12px; width: 60px; content: " "; display: block; z-index: 999; border-radius: 5px 5px 0 0; border: solid 1px #dc8f03; background: #ffa500; background: linear-gradient(to rightright, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03); } .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: #ffa500; background: linear-gradient(to rightright, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03); } .deng-t { font-family: 华文行楷,Arial,Lucida Grande,Tahoma,sans-serif; font-size: 3rem; color: #dc8f03; font-weight: bold; line-height: 85px; text-align: center; } .night .deng-t, .night .deng-box, .night .deng-box1 { background: transparent !important; } @-moz-keyframes swing { 0% { -moz-transform: rotate(-10deg) } 50% { -moz-transform: rotate(10deg) } 100% { -moz-transform: rotate(-10deg) } } @-webkit-keyframes swing { 0% { -webkit-transform: rotate(-10deg) } 50% { -webkit-transform: rotate(10deg) } 100% { -webkit-transform: rotate(-10deg) } }
效果如果:
RELATED RECOMMEND
2024-02-28
外贸网站提示用户是否接受cookie是因为cookie对网站及用户都有好处,但同时也可能对用户的隐私造成影响。Cookie是一种小型文档,由网站发送到用户的设备上,用于记录用户的行为和偏好,从而提供个性化的浏览体验。它们可以记录用户的登录状态、购物车信息等,以便用户下次访问时无需重新输入。同时,cookie还帮助网站分析用户行为,如页面浏览量、停留时间和点击次数等,为网站
2024-02-28
返回网页顶部JS代码如下:// 滑动滚动条$(window).scroll(function(){ // 滚动条距离顶部的距离 大于 200px时 if($(window).scrollTop() >= 300){ $(".floatTop").fadeIn(1000); // 开始淡入 } else{ $(".fl
2024-02-28
NO.1 唯爱中国红(RGB:181 13 13 CMYK:37 100 100 3 #B50D0D)NO.2 莫兰迪绿(RGB:105 149 114 CMYK:65 32 62 0 #699572)NO.3 蒂芙尼蓝(RGB:0 227 226 CMYK:63 0 26 0 #00E3E2)NO.4 爱马仕橙(RGB:3 10 179 CMYK:100 92 4 0 #030A
Copyright © 2012-2024 世敏网络 版权所有 闽ICP备18026760号-1 闽公网安备 35020502000640号 网站地图 Sitemap
关键词聚合