模仿tmall主页 brand div

最新推荐文章于 2022-09-19 18:50:45 发布
最新推荐文章于 2022-09-19 18:50:45 发布
阅读量600 收藏
点赞数
分类专栏： Web前端 文章标签： html css 动画 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ink_cherry/article/details/69420420
版权

div 主要是一个刷新的反转动画 文本和图片url没有写后台 自己就用几张图片达成演示前端效果的目的
这里写图片描述

这里写代码片

html 没什么太复杂的 文本信息和图片是并列级别的 只旋转img图片就好 一开始那个换一批 用js简单写了一下 但是我想用css写 用transform 鼠标移开又转去就很不舒服 然后用animation就没有这个坏处（此处记录一下animation 和hover等事件 的好处） 很开心 旋转主要就是一个不复杂的的js函数
js函数用一个延时器 因为过渡执行慢一些 让变更图片的效果 不再前90deg旋转中暴露出来

  var count=1;



   $('#refresh-li').click(function(){

    $('.brandimg-div').css("transform","rotateY(-90deg)");
    setTimeout(function(){

  for(var i=0;i<16;i++)
    {
      var img=$('.brandimg-div img').eq(i);
      img.attr("src","brand/brand"+count+".webp");
      // img.attr("src","brand/brand1.webp");
    }
    $('.brandimg-div').css("transform","rotateY(-180deg)");
}
      ,300)

   count++;

   })

css



#brand-list
{  display: inline-block;
    position: relative;
    width:488px;
    height: 436px;
    background-color: #f5f5f5;
    float:right;
}
#brand-list ul
{ list-style-type: none;
    width:488px;
}
#brand-list li
{   
    position: relative;
    display: list-item;
   float: left;
   width:120px;
   height: 108px;
   margin-right: 2px;
   margin-bottom: 1px;


}
#brand-mask
{  position: absolute;
    width:121px;
    height: 108px;
}
.brandimg-div
{   line-height: 108px;
    height: 108px;
    display: table-cell;
    margin:0 auto;
    text-align: center;
     vertical-align: middle;
    background-color: #fff;
    transition:all .5s;
}
.brandimg-div  img
{  display: inline;
   width:82%;
   height: 50px;
   transform:rotateY(180deg);
}
#brand-list li:hover .brand-mask
{
  opacity:1;
}

.brand-mask
{
   position: absolute;
   width:100%;
   height: 100%;
   right:0;
   top:0;
   opacity: 1;
   background-color: rgba(0,0,0,.8);
   transition: all .3s ease-out;
    opacity: 0;

}

.brand-mask span
{
   display: block;
   font-size: 12px;
   text-align: center;
   line-height: 80px;
   color:#fff;
}
.brand-mask a 
{   position: absolute; 
    text-align: center;
    left:50%;
    transform:translateX(-50%);
    bottom:30px;
   display: inline-block;
    width:63px;
    height: 18px;
      border-radius: 10px;
      background-color: red;
      font-size: 12px;
      color:#fff;

}

#brand-refresh
{  position: absolute;

   transform-origin:50% 50%;
  left:45px;
   top:30px;
    font-size: 30px;
    color:#999;
    transition:all .5s;
}
#refresh-li
{
    background-color: #fff;
    color:#999;
}
@keyframes refreshrotate
{
    from { transform:rotateZ(0deg);}
    to  {transform:rotateZ(180deg);}
}
#refresh-li:hover #brand-refresh
{   
    animation:refreshrotate .5s  1;
    /*-webkit-transform:rotateZ(180deg);   */
          /*用旋转的时候会偏移*/
          /*transform:rotateZ(180deg); */
          /*animation:rotate .5s ease 1;*/
}

#refresh-info
{    display: inline-block;
    width: 100%;

    position: absolute;
     bottom:20px;
     font-size: 14px;
    text-align: center;
}

html

  <div id="brand-list"> 

        <ul>
          <li>
              <div class="brandimg-div">
                   <img src="brand/brand18.webp">
              </div>

              <div class="brand-mask">
                  <span> 关注人数2.7
                  </span>
                  <a href="">点击进入</a>
              </div>

          </li>

             <li>
              <div class="brandimg-div">
                   <img src="brand/brand18.webp">
              </div>

              <div class="brand-mask">
                  <span> 关注人数2.7
                  </span>
                  <a href="">点击进入</a>
              </div>

          </li>

             <li>
              <div class="brandimg-div">
                   <img src="brand/brand18.webp">
              </div>

              <div class="brand-mask">
                  <span> 关注人数2.7
                  </span>
                  <a href="">点击进入</a>
              </div>

          </li>

             <li>
              <div class="brandimg-div">
                   <img src="brand/brand18.webp">
              </div>

              <div class="brand-mask">
                  <span> 关注人数2.7
                  </span>
                  <a href="">点击进入</a>
              </div>

          </li>

             <li>
              <div class="brandimg-div">
                   <img src="brand/brand18.webp">
              </div>

              <div class="brand-mask">
                  <span> 关注人数2.7
                  </span>
                  <a href="">点击进入</a>
              </div>

          </li>

             <li>
              <div class="brandimg-div">
                   <img src="brand/brand18.webp">
              </div>

              <div class="brand-mask">
                  <span> 关注人数2.7
                  </span>
                  <a href="">点击进入</a>
              </div>

          </li>

             <li>
              <div class="brandimg-div">
                   <img src="brand/brand18.webp">
              </div>

              <div class="brand-mask">
                  <span> 关注人数2.7
                  </span>
                  <a href="">点击进入</a>
              </div>

          </li>

             <li>
              <div class="brandimg-div">
                   <img src="brand/brand18.webp">
              </div>

              <div class="brand-mask">
                  <span> 关注人数2.7
                  </span>
                  <a href="">点击进入</a>
              </div>

          </li>

             <li>
              <div class="brandimg-div">
                   <img src="brand/brand18.webp">
              </div>

              <div class="brand-mask">
                  <span> 关注人数2.7
                  </span>
                  <a href="">点击进入</a>
              </div>

          </li>

             <li>
              <div class="brandimg-div">
                   <img src="brand/brand18.webp">
              </div>

              <div class="brand-mask">
                  <span> 关注人数2.7
                  </span>
                  <a href="">点击进入</a>
              </div>

          </li>

             <li>
              <div class="brandimg-div">
                   <img src="brand/brand18.webp">
              </div>

              <div class="brand-mask">
                  <span> 关注人数2.7
                  </span>
                  <a href="">点击进入</a>
              </div>

          </li>

             <li>
              <div class="brandimg-div">
                   <img src="brand/brand18.webp">
              </div>

              <div class="brand-mask">
                  <span> 关注人数2.7
                  </span>
                  <a href="">点击进入</a>
              </div>

          </li>

             <li>
              <div class="brandimg-div">
                   <img src="brand/brand18.webp">
              </div>

              <div class="brand-mask">
                  <span> 关注人数2.7
                  </span>
                  <a href="">点击进入</a>
              </div>

          </li>

             <li>
              <div class="brandimg-div">
                   <img src="brand/brand18.webp">
              </div>

              <div class="brand-mask">
                  <span> 关注人数2.7
                  </span>
                  <a href="">点击进入</a>
              </div>

          </li>

             <li>
              <div class="brandimg-div">
                   <img src="brand/brand18.webp">
              </div>

              <div class="brand-mask">
                  <span> 关注人数2.7
                  </span>
                  <a href="">点击进入</a>
              </div>

          </li>

          <li id="refresh-li">
            <span id="brand-refresh" class="ui-icon ui-icon-refresh"></span>
            <p id="refresh-info">换一批</p>
          </li>



        </ul>
    </div>
Ink_cherry
关注
专栏目录
模仿天猫实战【SSM版】——后台开发
我没有三颗心脏的博客
04-28 1033
上一篇文章链接：模仿天猫实战【SSM版】——项目起步 后台需求分析 在开始码代码之前，还是需要先清楚自己要做什么事情，后台具体需要实现哪些功能： 注意： 订单、用户、订单、推荐链接均不提供增删的功能。 后台界面设计 不像前端那样有原型直接照搬就可以了，后台的设计还真的有难到我…毕竟我是一个对美有一定要求的人，一方面想尽量的简洁、简单，另一方面又不想要太难看，那怎么...
tmall_ssm:模仿天猫ssm项目
03-30
【tmall_ssm:模仿天猫SSM项目】 该项目是一个基于Java技术栈的电子商务平台模拟，主要采用Spring、SpringMVC和MyBatis（SSM）框架进行开发，旨在帮助学习者理解和实践大型Web应用的开发流程。Spring作为核心的依赖...
仿天猫/京东商城H5网站,可适配手机端
01-04
仿照天猫商城,京东商城,H5网站,有商城模块,购物车,订单,我的,首页,分类等等模块,可用于android端,ios端,微信公众号,也可以电脑web打开访问
vue基本使用1
weixin_46014553的博客
09-19 696
官方给出的概念:Vue(读音/vju:/，类似于view)是一套用于构建用户界面的前端框架。 vue框架的特性,主要体现在如下两方面:数据驱动视图双向数据绑定在使用了vue的页面中，vue 会监听数据的变化，从而自动重新渲染页面的结构。示意图如下; 好处:当页面数据发生变化时，页面会自动重新渲染注意:数据驱动视图是单向的数据绑定。在填写表单时，双向数据绑定可以辅助开发者在不操作DOM的前提下，自动把用户填写的内容同步到数据源中。示意图如下: 好处:开发者不再需要手动操作DOM元素，来获取表单元素最新的值!M
品牌列表案例源代码(完成之后的代码)
03-19
Vue基础实现案例
一起从零开始学VUE（2）——品牌列表案例
qq_46258819的博客
01-15 1919
VUE小案例——品牌列表案例 利用v-for实现列表的渲染 利用全局过滤器格式化时间 利用v-if来动态渲染数据
品牌列表案例初始模板代码
03-19
品牌列表案例初始模板代码
ElastSearch整合SpringBoot模仿京东商城实现关键字高亮显示
见证自己学习,成长的记录
04-26 4133
效果如下
07-仿京东搜索
xixihaha_coder的博客
11-15 1730
京东搜索：项目搭建 1、new springboot 导入依赖 <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.61</version> </dependency> <dependency> <groupId>org.spr
vue基础-品牌列表案例.zip
12-28
vue基础-品牌列表案例 vue的增删
模仿天猫电商平台项目-tmall_ssm.zip
最新发布
11-04
模仿天猫电商平台项目-tmall_ssm
TMall首页原型 - release.rp
09-15
TMall首页原型 - release.rp
tmall_ssm_java系统_tmall_ssm_tmall_TmallUS_天猫_
09-30
【标题】"tmall_ssm_java系统_tmall_ssm_tmall_TmallUS_天猫_" 描述了一个基于Java技术栈的大型电商系统——TmallUS，它可能是天猫国际（Tmall Global）在美国的一个分支或者专门为美国市场定制的版本。在这个系统中...
tmall_springboot.zip
04-11
本项目使用 Springboot 框架进行系统设计与开发，同学们可以观察并模仿到 Springboot 是如何成熟，并高效率地实现各种业务场景的。 由浅入深 以动手为主，代码驱动，从简单功能开始，逐一展开，配合图文视频讲解，...
品牌列表案例
m0_63400611的博客
05-11 475
案例效果 代码 需要引入bootstrap.css文件 index.html <!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,
【vue】品牌列表案例（1.1实训）
qq_45746744的博客
01-01 667
基于 vue 渲染表格数据 步骤1：使用 v-for 指令循环渲染表格的数据 <tr v-for="brand in brandlist" :key="brand.id"> <td>{{brand.id}}</td> <td>{{brand.brandname}}</td> <td>{{brand.state}}</td> <td>{{brand.addtime}}</td> <td&
使用vue常见指令实现案列
weixin_44364634的博客
01-18 220
vue实现列表的增加删除
11、品牌列表案例
s12345672的博客
10-25 651
<!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>品牌列表案例<
tmall-data数据集
08-07
tmall-data是一个包含丰富数据的数据集，主要用于淘宝天猫电商平台的研究和分析。 tmall-data数据集中包含了大量关于淘宝天猫平台上商品、用户和交易的信息。该数据集涵盖了多个方面的数据，包括商品的类别、销售量、价格、品牌等信息，用户的行为、消费习惯、地理位置等信息，以及交易的日期、支付方式、物流信息等内容。 通过对tmall-data数据集的分析，可以获得淘宝天猫平台上商品销售的趋势和规律，了解不同用户的购物行为和兴趣偏好，优化商品的推荐策略和销售策略，提升用户的购物体验和平台的盈利能力。 对于商家来说，tmall-data数据集可以帮助他们更好地了解市场需求和竞争态势，通过分析用户行为和购买决策的数据，提高商品定价的精确度和市场竞争力，优化广告投放和促销活动的效果，提升销售额和利润。 对于研究人员和学者来说，tmall-data数据集可以作为一个宝贵的资源，用于电商行为研究、市场营销分析、用户行为建模等方面。通过对该数据集的深入分析，可以获取大量有关电子商务领域的实证数据，为相关领域的研究提供支持和参考。 总之，tmall-data数据集是一个非常具有价值的资源，通过对其进行深入分析，可以获得有关淘宝天猫平台上商品、用户和交易的丰富信息，为商家和研究人员提供有力的支持和参考。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值