小米商城APP二维码下拉以及过渡效果
结构
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小米商城 - Redmi Note 8、小米CC9、小米MIX 3，小米电视官方网站</title><!-- 引入重置样式表 --><link rel="stylesheet" href="./css/reset.css"><!-- 引入公共样式表 --><link rel="stylesheet" href="./css/base1.css"><!-- 引入图标字体库 --><link rel="stylesheet" href="./fa/css/all.css"><!-- 引入当前页面样式表 --><link rel="stylesheet" href="./css/index1.css"></head><body><!-- 创建顶部导航条 --><!-- 创建顶部导航条外部容器 --><div class="topbar-wrapper"><!-- 创建内部容器 --><div class="topbar w clearfix"><!-- 左侧的导航条 --><ul class="service"><li><a href="javascript:;">小米商城</a></li><li class="line">|</li><li><a href="javascript:;">MIUI</a></li><li class="line">|</li><li><a href="javascript:;">loT</a></li><li class="line">|</li><li><a href="javascript:;">云服务</a></li><li class="line">|</li><li><a href="javascript:;">金融</a></li><li class="line">|</li><li><a href="javascript:;">有品</a></li><li class="line">|</li><li><a href="javascript:;">小爱开放平台</a></li><li class="line">|</li><li><a href="javascript:;">企业团购</a></li><li class="line">|</li><li><a href="javascript:;">资质证照</a></li><li class="line">|</li><li><a href="javascript:;">协议规则</a></li><li class="line">|</li><li class="app-wrapper"><a class="app" href="javascript:;">下载app<div class="qrcode"><img src="../mi/img/download.png" alt=""><span>小米商城APP</span></div></a></li><li class="line">|</li><li><a href="javascript:;">Select Location</a></li></ul><!-- 购物车 --><ul class="shop-cart"><li><a href="javascript:;"><i class="fas fa-shopping-cart"></i>购物车（０）</a></li></ul><!-- 用户登录注册 --><ul class="use-info"><li><a href="javascript:;">登录</a></li><li class="line">|</li><li><a href="javascript:;">注册</a></li><li class="line">|</li><li><a href="javascript:;">消息通知</a></li><li class="line">|</li></ul></div></div></body></html>
CSS样式文档
/* 主页index1.html的样式表 *//* 顶部导航条的样式 */.topbar-wrapper{/* 设置宽度全屏 */width: 100%;/* 设置高度和行高 */height: 40px;line-height: 40px;/* 设置背景颜色 */background-color: #333;}/* 设置超链接的颜色 */.topbar a{font-size: 12px;color:#b0b0b0;display: block;}/* 设置超链接移入的效果 */.topbar a:hover{color: #fff;}/* 设置中间分割线 */.topbar .line{font-size: 12px;color: #424242;margin: 0px 8px;margin-top: -1px;}/* 设置左侧导航栏 */.service, .topbar li{float: left;}.app{position: relative;}/* 设置app下的小三角 *//* .app-wrapper:hover > .app::after*/.app::after{display: none;content: "";/* 设置绝对定位 */position: absolute;width: 0;height: 0;/* 设置四个方向的边框 */border: 8px solid transparent;/* 去除上边框 */border-top: none;/* 单独设置下边框的颜色 */border-bottom-color: #fff;bottom: 0;right: 0;left: 0;margin: auto;}/* .app-wrapper:hover>.app .qrcode{display: block;} */.app:hover .qrcode,.app:hover::after{display: block;height: 148px;}/* 设置下载app二维码的下拉 */.app .qrcode{/* 使其脱离文档流 *//* display: none; */position: absolute;left: -40px;width: 124px;/* height: 148px; */height: 0;overflow: hidden;/* 设置行高 */line-height: 1;/* 使文字居中 */text-align: center;background-color: #fff;box-shadow: 0 0 10px rgba(0, 0, 0, .5);/* transition用来为样式设置过渡效果 */transition: height 0.3s;}/* 设置二维码图片 */.app .qrcode img{width: 90px;margin: 17px;margin-bottom: 10px;}/* 设置二维码中的文字 */.app .qrcode span{font-size: 14px;color: #000;}/* 设置右侧导航 */.shop-cart, .use-info{float: right;}/* 设置购物车的内边距 */.shop-cart{margin-left: 26px;}/* 设置购物车（０）这个超链接 */.shop-cart a{width: 120px;background: #424242;/* 设置购物车居中 */text-align: center;}/* 设置图标购物车与购物车之间的距离 */.shop-cart i{margin-right: 2px;}/* 设置超链接购物车移入效果 */.shop-cart:hover a{background-color: #fff;color:#FF6700;}
PS:鼠标移入下载app二维码下拉效果有多种方法。
效果图：
