对过渡、动画的初步认识

最新推荐文章于 2024-11-04 14:24:17 发布

Gelxgx

最新推荐文章于 2024-11-04 14:24:17 发布

阅读量132

点赞数

文章标签： html css css3 html5

本文链接：https://blog.csdn.net/Gelxgx/article/details/105321506

版权

触碰图标改变样式

今天学习了过渡，除了基本的基础代码以外，还可以通过添加伪元素添加鼠标经过、悬停的效果
首先载入两张图片备用：
在这里插入图片描述
首先设置好html样式：

 <div class="db">
        <div class="tt">
            <div class="ttLogo"></div>
        </div>
    </div>

除了打底的背景外，内部设置两个div是为了鼠标悬停时，能让图标背板和图标共同进行过渡
设置好css样式

* {
  margin: 0;
  padding: 0;
}

.db {
  width: 500px;
  height: 500px;
  background-color: rgb(230, 230, 230);
  margin: 0 auto;
  position: relative;
  top: 100px;
  box-shadow: 5px 5px 5px rgb(219, 219, 219);
}

.tt {
  width: 200px;
  height: 200px;
  background-color: white;
  margin: 0 auto;
  position: relative;
  top: 100px;
  border-radius: 50px;
  box-shadow: 5px 5px 5px rgb(219, 219, 219);
  transition: border-radius, .6s linear;
}

.ttLogo {
  width: 100%;
  height: 100%;
  background-image: url(ttb.png);
  background-repeat: no-repeat;
  background-size: 50% auto;
  background-position: center;
  transition: background-image .6s linear;

}

.tt:hover {
  border-radius: 100px;
  transition: all .6s linear;
}

.ttLogo:hover {
  background-image: url(ttf.png);
  transition: all .6s linear;
}

为了让鼠标进入、离开都要获得过渡效果，需要在原样式上同样添加过渡代码，即可实现效果
在这里插入图片描述

动画实现样式转换

需要将过渡去掉，并更换上动画代码和关键帧

.tt {
插入动画说明
  animation: dhbk 3s infinite alternate ease-in;
}

.ttLogo {
 插入动画说明
  animation: dhtb 3s infinite alternate ease-out;
}

@keyframes dhbk {
  0% {
    border-radius: 50px;
    background-color: white;
  }


  100% {
    border-radius: 100%;
    background-color: rgb(18, 150, 219);

  }
}

@keyframes dhtb {
  0% {
    background-image: url(ttf.png);
  }
  100% {
    background-image: url(ttb.png);
  }
}