前端篇-CSS常用动画效果

动画效果

1、transform scale+transition

鼠标经过放大效果

<div>
  <a href="#">
    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg3.cache.netease.com%2Fphoto%2F0008%2F2011-06-10%2F765U5SP32EI00008.550x.0.jpg&refer=http%3A%2F%2Fimg3.cache.netease.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623921591&t=3a536f99e3646497e810edfacf2d7bb2%22%20alt=" alt="">
  </a>
</div>

div {
  overflow: hidden;
  width: 300px;
  height: 200px;
}
/*为img添加放大效果*/
div:hover img {
  transform: scale(1.2);
}
/*为img添加过渡效果*/
div img {
  transition: all .4s;
}
/*转换为块级元素，宽度100%*/
img {
  display: block;
  width: 100%;
}

分页按钮动画效果

  li {
    float: left;
    margin: 10px;
    width: 50px;
    height: 50px;
    /*清除li样式*/
    list-style: none;
    text-align: center;
    line-height: 50px;
    border: olivedrab 1px solid;
    border-radius: 50%;
    /*添加过度效果*/
    transition: all .4s;
  }

  li:hover {
  /*鼠标经过添加放大效果*/
    transform: scale(1.3);
  }

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
</ul>

搜索框小三角动画

.search {
  position: relative;
  width: 300px;
  height: 50px;
  border: 2px solid steelblue;
  margin: 0 auto;
}

.search::after {
  content: "";
  position: absolute;
  top: 16px;
  right: 15px;
  width: 10px;
  height: 10px;
  border-bottom: 2px solid steelblue;
  border-right: 2px solid steelblue;
  transform: rotate(45deg);
  transition: all .3s;
}

.search:hover::after {
  transform: rotate(225deg);
  top: 20px;
}

<div class="search"></div>

矩形框旋转显示效果

.box {
  overflow: hidden;
  margin: 100px auto;
  width: 100px;
  height: 100px;
  border: 3px solid steelblue;
  border-radius: 10px;
}

.box::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: tomato;
  transform: rotate(180deg);
  transform-origin: left bottom;
  transition: all 0.2s;
  border-radius: 4px;
}

.box:hover::before {
  transform: rotate(0);
}

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

3D-rotateX

body {
  perspective: 300px;
}
img {
  display: block;
  margin: 100px auto;
  transition: all 1s;
}
img:hover {
  transform: rotateX(45deg);
}

<img src="media/font.jpg" alt="">

3D-rotateY

body {
  perspective: 500px;
}
img {
  display: block;
  margin: 100px auto;
  transition: all 1s;
}
img:hover {
  transform: rotateY(45deg);
}

<img src="media/font.jpg" alt="">

3D-rotateZ

body {
  perspective: 500px;
}
img {
  display: block;
  margin: 100px auto;
  transition: all 1s;
}
img:hover {
  transform: rotate3d(1, 1, 0, 45deg);
}

<img src="media/pig.jpg" alt="">

3D呈现transform-style

body {
  perspective: 500px;
}

.box {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 100px auto;
  transition: all 2s;
  /* 让子元素保持3d立体空间环境 */
  transform-style: preserve-3d;
}

.box:hover {
  transform: rotateY(60deg);
}

.box div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: cadetblue;
}

.box div:last-child {
  background-color: chocolate;
  transform: rotateX(60deg);
}

<div class="box">
  <div></div>
  <div></div>
</div>

两面翻转的盒子

body {
  perspective: 400px;
}

.box {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 100px auto;
  transition: all .4s;
  /* 让背面的紫色盒子保留立体空间 给父级添加的 */
  transform-style: preserve-3d;
}

.box:hover {
  transform: rotateY(180deg);
}

.front,
.back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  font-size: 30px;
  color: #fff;
  text-align: center;
  line-height: 300px;
}

.front {
  background-color: darkcyan;
  z-index: 1;
}

.back {
  background-color: cornflowerblue;
  /* 像手机一样 背靠背 旋转 */
  transform: rotateY(180deg);
}

<div class="box">
  <div class="front">你好</div>
  <div class="back">Hello</div>
</div>

3D导航栏

ul {
  margin: 100px;
}

ul li {
  float: left;
  margin: 0 5px;
  width: 120px;
  height: 35px;
  list-style: none;
  /* 我们需要给box 旋转 也需要透视 给li加 里面的子盒子都有透视效果 */
  perspective: 500px;
  text-align: center;
  line-height: 35px;
  color: #fff;
}

.box {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all .4s;
}

.box:hover {
  transform: rotateX(90deg);
}

.front,
.bottom {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.front {
  background-color: #ffba40;
  z-index: 1;
  transform: translateZ(17.5px);
}

.bottom {
  background-color: #ff1b40;
  /* 这个x轴一定是负值 */
  /* 我们如果有移动 或者其他样式，必须先写我们的移动 */
  transform: translateY(17.5px) rotateX(-90deg);
}

<ul>
  <li>
    <div class="box">
      <div class="front">transform</div>
      <div class="bottom">perspective</div>
    </div>
  </li>
  <li>
    <div class="box">
      <div class="front">transform</div>
      <div class="bottom">perspective</div>
    </div>
  </li>
  <li>
    <div class="box">
      <div class="front">transform</div>
      <div class="bottom">perspective</div>
    </div>
  </li>
  <li>
    <div class="box">
      <div class="front">transform</div>
      <div class="bottom">perspective</div>
    </div>
  </li>
  <li>
    <div class="box">
      <div class="front">transform</div>
      <div class="bottom">perspective</div>
    </div>
  </li>
  <li>
    <div class="box">
      <div class="front">transform</div>
      <div class="bottom">perspective</div>
    </div>
  </li>
</ul>

2、@keyframes+background-position

属性	描述
@keyframes	规定动画
animation	所有动画属性的简写，除了animation-play-state属性。
animation-name	规定@keyframes动画的名称。 (必须的)
animation-duration	规定动画完成一个周期所话费的秒或毫秒，默认0 。 (必须的)
animation-timing-function	规定动画的速度曲线，默认是 “ease”。
animation-delay	规定动画何时开始，默认是0。
animation-iteration-count	规定动画播放的次数，默认是1，无线循环infinite。
animation-duration	规定动画是否在下一周期逆向播放，默认是"normal"，逆向播放“alternate”。
animation-play-state	规定动画是否在运行或暂停，默认是“running”，还有“pause”
animation-fill-mode	规定动画结束后的状态，保持结束装态“forwards”，回到起始“backwards”

北极熊奔跑

图片素材

<style>
  body {
    background-color: #333;
  }

  div {
    position: absolute;
    width: 200px;
    height: 100px;
    background-image: url('./bear.png');
    background-repeat: no-repeat;
    /*run 根据名称调用动画run 1s 动画时长 steps(8) 设置动画步长(根据图片的动画帧决定) infinite 循环播放 两个动画之间使用逗号分隔 forwards 停留在动画结束时的状态*/
    animation: run 1s steps(8) infinite, move 2s forwards;
  }
	/*奔跑动画*/
  @keyframes run {
    0% {
    /*使用background-position制作动画效果*/
      background-position: 0 0;
    }

    100% {
    /*移动位置由图片实际大小决定*/
      background-position: -1600px 0;
    }
  }
/*奔跑至中间的动画*/
  @keyframes move {
    0% {
      left: 0;
    }

    100% {
      left: 50%;
      margin-left: -100px;
    }
  }
</style>

<div></div>

大数据热点图

<style>
  body {
    background-color: #333;
  }
  
  .map {
    position: relative;
    width: 747px;
    height: 616px;
    background: url(media/map.png) no-repeat;
    margin: 0 auto;
  }
  
  .city {
    position: absolute;
    top: 227px;
    right: 193px;
    color: #fff;
  }
  
  .tb {
    top: 500px;
    right: 80px;
  }
  
  .dotted {
    width: 8px;
    height: 8px;
    background-color: #09f;
    border-radius: 50%;
  }
  
  .city div[class^="pulse"] {
    /* 保证我们小波纹在父盒子里面水平垂直居中 放大之后就会中心向四周发散 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    box-shadow: 0 0 12px #009dfd;
    border-radius: 50%;
    animation: pulse 1.2s linear infinite;
  }
  /*为发散点设置延迟 注意权重问题*/
  .city div.pulse2 {
    animation-delay: 0.4s;
  }
  
  .city div.pulse3 {
    animation-delay: 0.8s;
  }
    
  @keyframes pulse {
    0% {}
    70% {
      /* transform: scale(5);  我们不要用scale 因为他会让 阴影变大*/
      width: 40px;
      height: 40px;
      opacity: 1;
    }
    100% {
      width: 70px;
      height: 70px;
      opacity: 0;
    }
  }
</style>

<div class="map">
  <div class="city">
    <div class="dotted"></div>
    <div class="pulse1"></div>
    <div class="pulse2"></div>
    <div class="pulse3"></div>
  </div>
  <div class="city tb">
    <div class="dotted"></div>
    <div class="pulse1"></div>
    <div class="pulse2"></div>
    <div class="pulse3"></div>
</div>
</div>

文字展开效果

div {
   margin: 200px auto;
   overflow: hidden;
   font-size: 20px;
   width: 0;
   height: 30px;
   background-color: cadetblue;
   /* 让我们的文字强制一行内显示 */
   white-space: nowrap;
   /* steps 就是分几步来完成我们的动画 有了steps 就不要在写 ease 或者linear 了 */
   animation: w 4s steps(10) forwards;
}

@keyframes w {
	/*默认div 宽度为0 则不会显示内容*/
   0% {
     width: 0;
   }
   /*通过增加div宽度实现内容的显示*/
   100% {
     width: 200px;
   }
}

<div>尝试使用步长制作动画</div>