时间: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
企业网站导航设计是网站中一个很重要的因素,一个合理的导航设计不但利于搜索引擎优化,还对提升用户体验至关重要,迅速了解自己所处的位置,这对提高用户的转化率十分有用。在网站建设中做好各类导航设计对网站后期的优化推广十分有利。 下面QY千亿国际就来看看在网站设计制作中,做好导航设计的相关几点。 1、辅助导航。 为用户提供一个直观的展示,让用户知道自己所在的网站位置,这样可以让每一级的位置名称的有链接可会,每一个网页都必须包含辅助导航以及左上角的网站的logo标识。 2、网站logo链接。 在网站设置中,在每一个出现网...
2024-02-28
企业如何选择网络公司建站的常见问题,QY千亿国际网络总结以下几点:1、企业会以自己建站的要求,比如需要哪些功能板块,界面的风格等直接来衡量各网络公司报的费用,很多具体细节的东西企业并不知道,这样一些网络公司可能就会以最简单的方式来做,这样省时、省力,因为很多
2024-02-28
厦门网站建设包括网站策划、网页设计、网站功能、网站优化技术、网站内容整理、网站推广、网站评估、网站运营、网站整体优化、网站改版等。网站建设的前期准备包括了前期网站定位、内容差异化、页面沟通等战略性调研,这个过程需要网站策划人员、美工设计人员、PHP程