css3项目练习
今天让我们用css3练习做一个旅游相册鼠标悬浮图文效果
效果如下显示
因为该页面做的是一个鼠标悬浮图文效果，因为没办法放视频就无法给大家清晰展示出来。我做的是一个旅游相册效果，有7个部分，每个部分展示的效果都一样，这个可以帮助大家练习css3也可以记录我们的生活也是一个不错的
html部分如下显示：
<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>分享旅游</title> <link rel="stylesheet" type="text/css" href="../css/share.css"> </head> <body> <!-- 代码部分begin --> <div class="lanren"> <div class="full-length"> <div class="container"> <!-- Effect-1 --> <h2><span>2023 第一站 武汉</span></h2> <ul> <li> <div class="port-1 effect-1"> <div class="image-box"> <img src="../img/1.jpg" alt="Image-1"> </div> <div class="text-desc"> <h3>Your Title</h3> <p>与朋友们夜游武汉 晚上的武汉真的超美 !!! </p> <a href="#" class="btn">Learn more</a> </div> </div> </li> <li> <div class="port-1 effect-2"> <div class="image-box"> <img src="../img/2.jpg" alt="Image-2"> </div> <div class="text-desc"> <h3>Your Title</h3> <p> 骑单车偶尔路过 随手拍下的美景</p> <a href="#" class="btn">Learn more</a> </div> </div> </li> <li> <div class="port-1 effect-3"> <div class="image-box"> <img src="../img/3.jpg" alt="Image-3"> </div> <div class="text-desc"> <h3>Your Title</h3> <p>去武汉一定要坐一次1.5的渡轮 江边的灯光真的很美</p> <a href="#" class="btn">Learn more</a> </div> </div> </li> </ul> <!-- Effect-1 End --> <!-- Effect-2 --> <h2><span>Effects 2</span></h2> <ul> <li> <div class="port-2 effect-1"> <div class="image-box"> <img src="../img/4.jpg" alt="Image-1"> </div> <div class="text-desc"> <h3>Your Title</h3> <p>武汉长江大桥真的好大 走了几个小时 腿都走断了</p> <a href="#" class="btn">Learn more</a> </div> </div> </li> <li> <div class="port-2 effect-2"> <div class="image-box"> <img src="../img/5.jpg" alt="Image-2"> </div> <div class="text-desc"> <h3>Your Title</h3> <p>武汉真的超多英国建筑 真的很适合拍照 </p> <a href="#" class="btn">Learn more</a> </div> </div> </li> <li> <div class="port-2 effect-3"> <div class="image-box"> <img src="../img/6.jpg" alt="Image-3"> </div> <div class="text-desc"> <h3>Your Title</h3> <p>古德寺 很遗憾这次没去成下次一定去！</p> <a href="#" class="btn">Learn more</a> </div> </div> </li> </ul> <!-- Effect-2 End --> <!-- Effect-3 --> <h2><span>Effects 3</span></h2> <ul> <li> <div class="port-3 effect-1"> <div class="image-box"> <img src="../img/7.jpg" alt="Image-1"> </div> <div class="text-desc"> <h3>Your Title</h3> <p>夜游光谷广场真的超大 随手拍的喷泉 </p> <a href="#" class="btn">Learn more</a> </div> </div> </li> <li> <div class="port-3 effect-2"> <div class="image-box"> <img src="../img/8.jpg" alt="Image-2"> </div> <div class="text-desc"> <h3>Your Title</h3> <p> 昙华林</p> <a href="#" class="btn">Learn more</a> </div> </div> </li> <li> <div class="port-3 effect-3"> <div class="image-box"> <img src="../img/9.jpg" alt="Image-3"> </div> <div class="text-desc"> <h3>Your Title</h3> <p> 昙华林真的很适合女生逛街超多饰品店 很有意思</p> <a href="#" class="btn">Learn more</a> </div> </div> </li> </ul> <!-- Effect-3 End --> <!-- Effect-4 --> <h2><span>Effects 4</span></h2> <ul> <li> <div class="port-4 effect-1"> <div class="image-box"> <img src="../img/10.jpg" alt="Image-1"> </div> <div class="text-desc"> <h3>Your Title</h3> <p>武汉渡轮夜景 </p> <a href="#" class="btn">Learn more</a> </div> </div> </li> <li> <div class="port-4 effect-2"> <div class="image-box"> <img src="../img/11.jpg" alt="Image-2"> </div> <div class="text-desc"> <h3>Your Title</h3> <p>武汉黄鹤楼白天没什么好看的 有点遗憾没看到灯光打开的黄鹤楼</p> <a href="#" class="btn">Learn more</a> </div> </div> </li> <li> <div class="port-4 effect-3"> <div class="image-box"> <img src="../img/12.jpg" alt="Image-3"> </div> <div class="text-desc"> <h3>Your Title</h3> <p>烟火巷美食街给我一种到了五一广场的感觉哈哈哈</p> <a href="#" class="btn">Learn more</a> </div> </div> </li> </ul> <!-- Effect-4 End --> <!-- Effect-5 --> <h2><span>Effects 5</span></h2> <ul> <li> <div class="port-5 effect-1"> <div class="image-box"> <img src="../img/13.jpg" alt="Image-1"> </div> <div class="text-desc"> <h3>Your Title</h3> <p>朋友找的一家特别具有武汉特色的烧烤店 味道一绝啊！真是爱惨了</p> <a href="#" class="btn">Learn more</a> </div> </div> </li> <li> <div class="port-5 effect-2"> <div class="image-box"> <img src="../img/14.jpg" alt="Image-2"> </div> <div class="text-desc"> <h3>Your Title</h3> <p>千里迢迢从长沙跑到武汉喝茶颜-真是奶茶的水全从脑袋里倒出来了 </p> <a href="#" class="btn">Learn more</a> </div> </div> </li> <li> <div class="port-5 effect-3"> <div class="image-box"> <img src="../img/15.jpg" alt="Image-3"> </div> <div class="text-desc"> <h3>Your Title</h3> <p>体验武汉的过早：整个寒假的第一顿早餐是在武汉吃的，不得不说味道还不错 </p> <a href="#" class="btn">Learn more</a> </div> </div> </li> </ul> <!-- Effect-5 End --> <!-- Effect-6 --> <h2><span>Effects 6</span></h2> <ul> <li> <div class="port-6 effect-1"> <div class="image-box"> <img src="../img/16.jpg" alt="Image-1"> </div> <div class="text-desc"> <h3>Your Title</h3> <p> 第一次一个人出来旅行 和五湖四海的朋友们吃的第一顿火锅</p> <a href="#" class="btn">Learn more</a> </div> </div> </li> <li> <div class="port-6 effect-2"> <div class="image-box"> <img src="../img/17.jpg" alt="Image-2"> </div> <div class="text-desc"> <h3>Your Title</h3> <p>武汉热干面yyds 超便宜才5块钱一碗 </p> <a href="#" class="btn">Learn more</a> </div> </div> </li> <li> <div class="port-6 effect-3"> <div class="image-box"> <img src="../img/18.jpg" alt="Image-3"> </div> <div class="text-desc"> <h3>Your Title</h3> <p> 冬天才是最适合吃冰淇淋的季节 </p> <a href="#" class="btn">Learn more</a> </div> </div> </li> </ul> <!-- Effect-6 End --> <!-- Effect-7 --> <h2><span>Effects 7</span></h2> <ul> <li> <div class="port-7 effect-1"> <div class="image-box"> <img src="../img/19.jpg" alt="Image-1"> </div> <div class="text-desc"> <h3>Your Title</h3> <p>与美女们的第一张合照</p> <a href="#" class="btn">Learn more</a> </div> </div> </li> <li> <div class="port-7 effect-2"> <div class="image-box"> <img src="../img/20.jpg" alt="Image-2"> </div> <div class="text-desc"> <h3>Your Title</h3> <p> 和朋友们的第一次合照 也是离别的最后一张照片</p> <a href="#" class="btn">Learn more</a> </div> </div> </li> <li> <div class="port-7 effect-3"> <div class="image-box"> <img src="../img/21.jpg" alt="Image-3"> </div> <div class="text-desc"> <h3>Your Title</h3> <p> </p> <a href="#" class="btn">Learn more</a> </div> </div> </li> </ul> <!-- Effect-7 End --> <!-- Effect-8 --> <h2><span>Effects 8</span></h2> <ul> <li> <div class="port-8 effect-1"> <div class="image-box"> <img src="../img/22.jpg" alt="Image-1"> </div> <div class="text-desc"> <h3>Your Title</h3> <p> 武汉博物馆的兵马 做的真的超级逼真</p> <a href="#" class="btn">Learn more</a> </div> </div> </li> <li> <div class="port-8 effect-2"> <div class="image-box"> <img src="../img/23.jpg" alt="Image-2"> </div> <div class="text-desc"> <h3>Your Title</h3> <p>青花窑瓷做工真的超级精美</p> <a href="#" class="btn">Learn more</a> </div> </div> </li> <li> <div class="port-8 effect-3"> <div class="image-box"> <img src="../img/24.jpg" alt="Image-3"> </div> <div class="text-desc"> <h3>Your Title</h3> <p>每次去博物馆看到这些文物都非常震惊古人的智慧和非同寻常的工艺 仿若看到了核舟记 </p> <a href="#" class="btn">Learn more</a> </div> </div> </li> </ul> <!-- Effect-8 End --> </div> </div> </div> <!-- 代码部分end --> </html>
✨大家不要忘记引入css代码 ：
<link rel="stylesheet" type="text/css" href="../css/share.css">少了css就少了灵魂，记得不要忘记哦😘大家可以自行插入自己图片
css部分代码如下显示：
/*= Reset CSS ============= */ html, body { border: 0; margin: 0; padding: 0; } body { font: 14px "Lato", Arial, sans-serif; min-width: 100%; min-height: 100%; color: #666; background-color: #2D2D2D; } .container { margin: 0 auto; max-width: 1060px; } h2 { color: #fff; float: left; width: 100%; font-size: 24px; font-weight: 400; text-align: center; padding: 50px 0 40px; position: relative; z-index: 50; } h2 span { position: relative; padding-bottom: 10px; } h2 span:after { content: ""; width: 50%; height: 3px; background-color: #fff; position: absolute; left: 25%; bottom: 0; } * { margin: 0; padding: 0; box-sizing: border-box; } img { max-width: 100%; vertical-align: middle; } .full-length { width: 100%; float: left; padding-bottom: 80px; } ul { margin: 0 -1.5%; } li { float: left; width: 31.33%; margin: 10px 1%; list-style: none; } h3 { font-size: 20px; margin: 5px 0 10px; } p { font-weight: 300; line-height: 20px; font-size: 14px; margin-bottom: 15px; } .btn { display: inline-block; padding: 5px 10px; font-size: 14px; color: #fff; border: 2px solid #4d92d9; background-color: #4d92d9; text-decoration: none; transition: 0.4s; } .btn:hover { background-color: transparent; color: #4d92d9; transition: 0.4s; } .text-desc { position: absolute; left: 0; top: 0; background-color: #fff; height: 100%; opacity: 0; width: 100%; padding: 20px; } /*= Reset CSS End ================= * /* effect-1 css */ .port-1 { float: left; width: 100%; position: relative; overflow: hidden; text-align: center; border: 4px solid rgba(255, 255, 255, 0.9); } .port-1 .text-desc { opacity: 0.9; top: -100%; transition: 0.5s; color: #000; padding: 45px 20px 20px; } .port-1 img { transition: 0.5s; } .port-1:hover img { transform: scale(1.2); } .port-1.effect-1:hover .text-desc { top: 0; } .port-1.effect-2 .text-desc { top: auto; bottom: -100%; } .port-1.effect-2:hover .text-desc { bottom: 0; } .port-1.effect-3 .text-desc { top: 50%; left: 50%; width: 0; height: 0; overflow: hidden; padding: 0; } .port-1.effect-3:hover .text-desc { width: 100%; top: 0; left: 0; height: 100%; padding: 45px 20px 20px; } /* effect-1 css end */
因为css代码太多了无法显示完全，感兴趣的小伙伴私聊关注发源码😘，大家可以练习一下
今日分享到此结束，下次再分享做的项目练习
最近很喜欢的一句话：再小的努力乘以365都很明显。
