前端篇-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>1li>
  <li>2li>
  <li>3li>
  <li>4li>
  <li>5li>
  <li>6li>
  <li>7li>
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">Hellodiv>
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">transformdiv>
      <div class="bottom">perspectivediv>
    div>
  li>
  <li>
    <div class="box">
      <div class="front">transformdiv>
      <div class="bottom">perspectivediv>
    div>
  li>
  <li>
    <div class="box">
      <div class="front">transformdiv>
      <div class="bottom">perspectivediv>
    div>
  li>
  <li>
    <div class="box">
      <div class="front">transformdiv>
      <div class="bottom">perspectivediv>
    div>
  li>
  <li>
    <div class="box">
      <div class="front">transformdiv>
      <div class="bottom">perspectivediv>
    div>
  li>
  <li>
    <div class="box">
      <div class="front">transformdiv>
      <div class="bottom">perspectivediv>
    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”

北极熊奔跑

图片素材

<div>div>

大数据热点图

<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>