天水嘉通建设集团网站,渭南网站建设网站排名优化,建筑工程网络进度图,网络信息科技公司经营范围✅作者简介#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者#xff0c;修心和技术同步精进。 #x1f34e;个人主页#xff1a;Java Fans的博客 #x1f34a;个人信条#xff1a;不迁怒#xff0c;不贰过。小知识#xff0c;大智慧。 #x1f49e;当前专栏… ✅作者简介2022年博客新星 第八。热爱国学的Java后端开发者修心和技术同步精进。 个人主页Java Fans的博客 个人信条不迁怒不贰过。小知识大智慧。 当前专栏前端案例分享专栏 ✨特色专栏国学周更-心性养成之路 本文内容女神节灯笼祝福【HTMLCSS】 文章目录❤️ 背景简介❤️ 运行效果展示❤️ 代码分享❤️ 女神节祝福语❤️ 背景简介 你知道吗世界上第一位电脑程序设计师是名女性Ada Lovelace (1815-1852)是一位英国数学家兼作家她是第一位主张计算机不只可以用来算数的人也发表了第一段分析机用的演算法。因此Ada 被公认为史上第一位认识电脑完全潜能的人也是史上第一位电脑程序设计师。 Grace Hopper (1906-1992)是最早的计算机之一哈佛Mark I的第一批程序员并为第一个程序设计语言设计了编译器。她是 COBOL 语言的设计者常被称为 COBOL 之母。除了语言设计之外她在语言标准化方面也做出了奠基性的贡献。 这些出色女性在不同领域熠熠生辉创造了无限的可能成为了IT发展进步中不可或缺的角色。Z世代的女性开发者们不仅学会编程的年龄逐渐提前甚至在某些编程语言上比男性的表现更出色。女性开发者们用实际经历和成果印证着这些结论。不少“程序媛”们在AI代码的世界里让梦想生根、开花。不分年龄、无论背景她们释放着热情与专业用技术为自己代言。 为了致敬女性开发者我这边用灯笼代码送出我的祝福祝愿全天下所有的女性朋友们节日快乐永远做那个笑靥如花的 女神
❤️ 运行效果展示
在前端页面动态展示灯笼的效果 ❤️ 代码分享 HTML 代码如下
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlelink hrefcss/nvs.css relstylesheet//headbody!-- 灯笼1 --div classdeng-boxdiv classdengdiv classxian/divdiv classdeng-adiv classdeng-bdiv classdeng-t乐/div/div/divdiv classshui shui-adiv classshui-c/divdiv classshui-b/div/div/div/div!-- 灯笼2 --div classdeng-box1div classdengdiv classxian/divdiv classdeng-adiv classdeng-bdiv classdeng-t快/div/div/divdiv classshui shui-adiv classshui-c/divdiv classshui-b/div/div/div/div!-- 灯笼3 --div classdeng-box2div classdengdiv classxian/divdiv classdeng-adiv classdeng-bdiv classdeng-t节/div/div/divdiv classshui shui-adiv classshui-c/divdiv classshui-b/div/div/div/div!-- 灯笼4 --div classdeng-box3div classdengdiv classxian/divdiv classdeng-adiv classdeng-bdiv classdeng-t神/div/div/divdiv classshui shui-adiv classshui-c/divdiv classshui-b/div/div/div/div!-- 灯笼5 --div classdeng-box4div classdengdiv classxian/divdiv classdeng-adiv classdeng-bdiv classdeng-t女/div/div/divdiv classshui shui-adiv classshui-c/divdiv classshui-b/div/div/div/div/body
/htmlCSS 代码如下
.deng-box {position: fixed;top: 30px;left: 70%;z-index: 999;
}.deng-box1 {position: fixed;top: 28px;left: 60%;z-index: 999;
}.deng-box2 {position: fixed;top: 28px;left: 40%;z-index: 999;
}.deng-box3 {position: fixed;top: 28px;left: 30%;z-index: 999;
}.deng-box4 {position: fixed;top: 28px;left: 20%;z-index: 999;
}.deng-box5 .deng {position: relative;width: 120px;height: 90px;margin: 50px;background: #d8000f;background: rgba(216, 0, 15, 0.8);border-radius: 50% 50%;-webkit-transform-origin: 50% -100px;-webkit-animation: swing 5s infinite ease-in-out;box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}.deng-box4 .deng {position: relative;width: 120px;height: 90px;margin: 50px;background: #d8000f;background: rgba(216, 0, 15, 0.8);border-radius: 50% 50%;-webkit-transform-origin: 50% -100px;-webkit-animation: swing 5s infinite ease-in-out;box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}.deng-box3 .deng {position: relative;width: 120px;height: 90px;margin: 50px;background: #d8000f;background: rgba(216, 0, 15, 0.8);border-radius: 50% 50%;-webkit-transform-origin: 50% -100px;-webkit-animation: swing 5s infinite ease-in-out;box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}.deng-box2 .deng {position: relative;width: 120px;height: 90px;margin: 50px;background: #d8000f;background: rgba(216, 0, 15, 0.8);border-radius: 50% 50%;-webkit-transform-origin: 50% -100px;-webkit-animation: swing 5s infinite ease-in-out;box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}.deng {position: relative;width: 120px;height: 90px;margin: 50px;background: #d8000f;background: rgba(216, 0, 15, 0.8);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.1);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.1);margin: -4px 8px 8px 26px;border-radius: 50% 50%;border: 2px solid #dc8f03;
}.xian {position: absolute;top: -20px;left: 60px;width: 2px;height: 20px;background: #dc8f03;
}.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-b {position: absolute;top: 14px;left: -2px;width: 10px;height: 10px;background: #dc8f03;border-radius: 50%;
}.shui-c {position: absolute;top: 18px;left: -2px;width: 10px;height: 35px;background: #ffa500;border-radius: 0 0 0 5px;
}.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 right,#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 right,#dc8f03,#ffa500,#dc8f03,#ffa500,#dc8f03);
}.deng-t {font-family: 华文行楷, Arial, Lucida Grande, Tahoma, sans-serif;font-size: 3.2rem;color: #FFF326;font-weight: bold;line-height: 85px;text-align: center;
}.night .deng-t,
.night .deng-box,
.night .deng-box1,
.night .deng-box2,
.night .deng-box3,
.night .deng-box4 {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);}
}
至此一个动态的 “女生节快乐” 动态灯笼边实现成功了
❤️ 女神节祝福语
愿你好好爱自己活成独立坚强的模样做自己的女王勇敢地大步向前心之所向终会抵达。我一天一天明白你的平凡同时却一天一天愈更深切地爱你。你如照镜子你不会看得见你特别好的所在但你如走进我的心里来时你一定能知道自己是怎样好法。永为少女一世芳华。女人可能是姐妹、是妻子、是母亲用自己的人生努力做好每一个角色那么这一天就做只属于自己的女神吧。 星星闪烁着为你舞蹈月亮微笑着为你祝福在这欢乐的时刻我想悄悄的对你说女神节快乐希望你内外兼修拥有智慧拥有韵味做你想做。希望你真挚幽默一路向前不曾后悔 女王节快乐。花儿美丽只为你开;草儿嫩绿只为你弯柳条多姿只为你摇我的祝福只为你写送去我温馨的问候女神节开心快乐你和蒙娜丽莎比笑蒙娜丽莎气哭了;你和梦露比性感梦露恼得腿抽筋了;你和赵飞燕比身材赵飞燕失宠了;你和四大美人比美她们一个个全疯了。祝女神节快乐!清晨的头滴滴甘露非要沾湿你的长发才肯下凡正午的阳光硬要抹过你的笑脸才愿偏西傍晚的春风偏要拂过你的身段才甘入夜。愿女神节你主宰一切! 码文不易本篇文章就介绍到这里如果想要学习更多Java系列知识点击关注博主博主带你零基础学习Java知识。与此同时对于日常生活有困扰的朋友欢迎阅读我的第四栏目《国学周更—心性养成之路》学习技术的同时我们也注重了心性的养成。
