全能美工王

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
热搜: 活动 交友 discuz
查看: 186|回复: 3

仿小米手机官网鼠标滑过效果

[复制链接]
  • TA的每日心情
    慵懒
    2016-1-21 17:07
  • 签到天数: 24 天

    连续签到: 2 天

    [LV.4]偶尔看看III

    57

    主题

    62

    帖子

    1124

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    1124

    优秀版主灌水之王最佳新人突出贡献荣誉管理宣传达人推广达人热心会员活跃会员论坛元老

    发表于 2015-11-29 15:00:33 | 显示全部楼层 |阅读模式
    前几天看到小米手机官方的产品滑过效果挺好的,就花了点时间模仿下来了,先看效果:

    主要的是要做弹出的橙色部分,做的时间是竖着的,写上一些文字,保存的时候要保存横着的,就是这样的(黑色区域是透明的)


    我已经尽量说清楚了,大家可以自己研究下代码
    1. <div style="height:320px;">
    2.     <div class="footer-more-trigger" style="border:0px;left:auto;padding:0px;top:auto;">
    3.         <div class="footer-more-trigger" style="border:0px;padding:0px;top:0px;width:1920px;left:-485px;height:340px;background:#F5F5F5;">
    4. <div style="height:340px;width:996px;overflow:hidden;background: #f5f5f5;">
    5. <!-- 包裹 -->
    6. <div class="footer-more-trigger" style="width:996px;height:10px;border:none;left:0px;top:20px;padding:0px;left:462px;">
    7. <!-- 产品列表 -->
    8. <div class="footer-more-trigger" style="width:996px;height:300px;border:none;left:0px;padding:0px;font-family:微软雅黑;top:0px;">
    9.        <!--产品01-->
    10.        <div  style="width:234px;height:300px;display:block;float:left;margin-right:20px;padding:0px;text-align:center;background: #fff;">
    11.        <div style="width:64px;height:20px;margin-left:85px;line-height:20px;text-align:center;font-size: 12px;color:#fff;background:#e53935;">热卖中</div>
    12.        <img src="https://img.alicdn.com/imgextra/i3/2528527229/TB2ZQ_ycVXXXXaoXXXXXXXXXXXX_!!2528527229.jpg" alt="金属卡片" width="180" height="180" />
    13.        <div style="width:234px;height:25px;line-height:25px;color:#333;font-size:14px;">金属拉丝卡片U盘</div>
    14.        <div style="width:234px;height:25px;line-height:25px;color:#ff6700;font-size:14px;">8GB</div>
    15.        <div style="width:234px;height:50px;line-height:30px;color:#b0b0b0;font-size:14px;">可激光、彩印、丝印logo</div>
    16.        </div>
    17.        <!--产品02-->
    18.        <div  style="width:234px;height:300px;display:block;float:left;margin-right:20px;padding:0px;text-align:center;background: #fff;">
    19.        <div style="width:64px;height:20px;margin-left:85px;line-height:20px;text-align:center;font-size: 12px;color:#fff;background:#e53935;">热卖中</div>
    20.        <img src="https://img.alicdn.com/imgextra/i4/2528527229/TB2PXjDcVXXXXXGXXXXXXXXXXXX_!!2528527229.jpg" alt="迷你U盘" width="180" height="180" />
    21.        <div style="width:234px;height:25px;line-height:25px;color:#333;font-size:14px;">迷你旋转商务U盘</div>
    22.        <div style="width:234px;height:24px;line-height:25px;color:#ff6700;font-size:14px;">8GB</div>
    23.        <div style="width:234px;height:50px;line-height:30px;color:#b0b0b0;font-size:14px;;">可激光、丝印</div>
    24.        </div>
    25.        <!--产品03-->
    26.        <div  style="width:234px;height:300px;display:block;float:left;margin-right:20px;padding:0px;text-align:center;background: #fff;">
    27.        <div style="width:64px;height:20px;margin-left:85px;line-height:20px;text-align:center;font-size: 12px;color:#fff;background:#e53935;">热卖中</div>
    28.        <img src="https://img.alicdn.com/imgextra/i1/2528527229/TB2oxTDcVXXXXXqXXXXXXXXXXXX_!!2528527229.jpg" alt="塑料卡片" width="180" height="180" />
    29.        <div style="width:234px;height:25px;line-height:25px;color:#333;font-size:14px;">超薄名片式U盘</div>
    30.        <div style="width:234px;height:25px;line-height:25px;color:#ff6700;font-size:14px;">8GB</div>
    31.        <div style="width:234px;height:50px;line-height:30px;color:#b0b0b0;font-size:14px;">可彩印、丝印</div>
    32.        </div>
    33.        <!--产品04-->
    34.        <div  style="width:234px;height:300px;display:block;float:left;margin-right:0px;padding:0px;text-align:center;background: #fff;">
    35.        <div style="width:64px;height:20px;margin-left:85px;line-height:20px;text-align:center;font-size: 12px;color:#fff;background:#83c44e;">新品</div>
    36.        <img src="https://img.alicdn.com/imgextra/i2/2528527229/TB2UPVTdVXXXXalXXXXXXXXXXXX_!!2528527229.jpg" alt="水晶U盘" width="180" height="180" />
    37.        <div style="width:234px;height:25px;line-height:25px;color:#333;font-size:14px;">创意发光水晶U盘</div>
    38.        <div style="width:234px;height:25px;line-height:25px;color:#ff6700;font-size:14px;">8GB</div>
    39.        <div style="width:234px;height:50px;line-height:30px;color:#b0b0b0;font-size:14px;">可激光、丝印</div>
    40.        </div>
    41. </div>
    42. <!--动感切换开始-->
    43. <div class="footer-more" style="width:996px;height:300px;padding:0px;margin:0px;position:relative;right:0px;bottom:0px;border:none;background:none;overflow:hidden;">
    44.      <div class="J_TWidget footer-more-panel" data-widget-type="Carousel" data-widget-config="{'activeTriggerCls':'item-text','easing':'easeBoth','effect':'scrollx','navCls':'ling-nav','contentCls':'ling-cnt','activeIndex':4,'autoplay':false}" style="position:relative;border:none;bottom:0px;right:0px;padding:0px;background:none;">
    45.              <ul class="ling-cnt" style="display:none;"><li></li></ul>
    46.              <div class="ling-nav search-wrap-cloud" style="width:999999px;height:300px;"><!-- width得足够大 -->
    47.                  <a  target="_blank" style="width:300px;height:234px;display:block;float:left;position:relative;right:33px;top:33px;padding:0px;background-image:url(https://img.alicdn.com/imgextra/i3/2528527229/TB2GxmCeFXXXXaNXpXXXXXXXXXX_!!2528527229.png);transition:all 0.6s;transform:rotate(90deg);-ms-transform:rotate(90deg);-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);-o-transform:rotate(90deg);">
    48.                  </a>
    49.                  <a  target="_blank" style="width:300px;height:234px;display:block;float:left;position:relative;right:82px;top:33px;padding:0px;background-image:url(https://img.alicdn.com/imgextra/i3/2528527229/TB2LG9JeFXXXXc_XXXXXXXXXXXX_!!2528527229.png);transition:all 0.6s;transform:rotate(90deg);-ms-transform:rotate(90deg);-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);-o-transform:rotate(90deg);">
    50.                  </a>
    51.                  <a  target="_blank" style="width:300px;height:234px;display:block;float:left;position:relative;right:131px;top:33px;padding:0px;background-image:url(https://img.alicdn.com/imgextra/i4/2528527229/TB2xLmAeFXXXXaPXpXXXXXXXXXX_!!2528527229.png);transition:all 0.6s;transform:rotate(90deg);-ms-transform:rotate(90deg);-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);-o-transform:rotate(90deg);">
    52.                  </a>
    53.                  <a  target="_blank" style="width:300px;height:234px;display:block;float:left;position:relative;right:180px;top:33px;padding:0px;background-image:url(https://img.alicdn.com/imgextra/i4/2528527229/TB2E_aReFXXXXbtXXXXXXXXXXXX_!!2528527229.png);transition:all 0.6s;transform:rotate(90deg);-ms-transform:rotate(90deg);-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);-o-transform:rotate(90deg);">
    54.                  </a>
    55.             </div>
    56.      </div>
    57. </div>
    58. <!-- 效果end -->
    59. </div>
    60. </div>
    61.          </div>
    62.      </div>
    63. </div>
    复制代码


    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2016-1-21 17:07
  • 签到天数: 24 天

    连续签到: 2 天

    [LV.4]偶尔看看III

    57

    主题

    62

    帖子

    1124

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    1124

    优秀版主灌水之王最佳新人突出贡献荣誉管理宣传达人推广达人热心会员活跃会员论坛元老

     楼主| 发表于 2015-11-29 15:03:49 | 显示全部楼层
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    擦汗
    2016-4-19 15:59
  • 签到天数: 48 天

    连续签到: 2 天

    [LV.5]常住居民I

    0

    主题

    13

    帖子

    1610

    积分

    金牌会员

    Rank: 6Rank: 6

    积分
    1610
    发表于 2015-11-30 09:42:27 | 显示全部楼层
    顶!!!!!!
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2016-1-9 11:11
  • 签到天数: 8 天

    连续签到: 1 天

    [LV.3]偶尔看看II

    0

    主题

    9

    帖子

    173

    积分

    注册会员

    Rank: 2

    积分
    173
    发表于 2015-11-30 15:39:59 | 显示全部楼层
    棒棒的
    回复 支持 反对

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|Archiver|手机版|小黑屋|全能美工王  

    GMT+8, 2017-7-22 14:39 , Processed in 0.319886 second(s), 34 queries .

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc. 技术支持 by 巅峰设计.

    快速回复 返回顶部 返回列表