2022-01-24 工作记录--CSS-TweenMax动画效果

TweenMax动画效果

TweenMax中文文档

一、实现效果

二、代码

HTML

 <div class="title_item">
        <div class="actual_item detail">
          <!-- 背景图 -->
          <img src="http://swt-app.oss-cn-chengdu.aliyuncs.com/images/20210915/735251631674455.png" alt="">
          <!-- 中间文字部分 -->
          <div class="t_texts">
            <p><span>学</span><span>员</span><span>展</span><span>示</span></p>
            <p>students</p>
          </div>
          <!-- 遮罩层 -->
          <div class="mask"></div>
        </div>
 </div>

CSS

.title_item {
  width: 33.333333%;
  height: 220px;
  margin-bottom: 45px;
}
.actual_item {
  width: 80%;
  height: 100%;
  margin: auto;
  cursor: pointer;
}
 .detail {
  position: relative;
  text-align: center;
  overflow: hidden;
}
//遮罩层
.mask {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.55);
}
//中间文字部分
.t_texts {
  position: absolute;
  z-index: 99;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
//中文文字样式
.detail p:first-child {
  font-size: 26px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #E4E4E4;
  letter-spacing: 6px;
  transition: color .5s;
}
//鼠标经过时，中文文字变成黄色
.detail:hover p:first-child {
  color: #FFAF10;
}
//英文文字样式
.detail p:last-child {
  font-size: 16px;
  font-family: Akrobat;
  color: #E4E4E4;
  letter-spacing: 1px;
}
//为了实现鼠标经过时中文文字有跳动效果，所以事先定义一下
.t_texts p span {
  transform: translate(0px,0px);
  display: inline-block;
}
//背景图片
.detail img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transition: all .5s;
}
//鼠标经过时背景图片放大并旋转-->
.detail:hover img {
  -webkit-transform: rotate3d(1,1,1,14deg) scale(1.256);
  transform: rotate3d(1,1,1,14deg) scale(1.256);
}

JS

第一步、下载TweenMax、下载jQuery

下载jQuery的步骤就不详细介绍了，下面是下载TweenMax的步骤：


第三步、在需要的地方引入TweenMax.min.js就好啦~

最终JS相关代码如下：

<script src="js/common/jquery.min.js"></script>
<script src="js/common/TweenMax.min.js"></script>

<script>
  // 鼠标经过时
  $('.detail').on('mouseenter', function () {
    var spans = $(this).find('span');
    TweenMax.staggerFromTo(spans, 0.2, {y: '0'}, {y: '-20px'}, 0.1); // 0.2表示动画持续的秒数（或帧数，如果设置了useFrames:true）；0.1表示每个动画的间隔，默认是0
  })
  // 鼠标离开后
  $('.detail').on('mouseleave', function () {
    var spans = $(this).find('span');
    TweenMax.staggerFromTo(spans, 0.2, {y: '-20px'}, {y: '0'}, 0.1); // 0.2表示动画持续的秒数（或帧数，如果设置了useFrames:true）；0.1表示每个动画的间隔，默认是0
  })
</script>

三、【补充知识点：获取$(this)子节点对象的方法】

参考链接：https://www.cnblogs.com/fatty-yu/p/6122975.html