transitions / animation 动画

最新推荐文章于 2022-12-27 13:11:08 发布

yysmilehaha

最新推荐文章于 2022-12-27 13:11:08 发布

阅读量313

点赞数

分类专栏： css3

本文链接：https://blog.csdn.net/yysmilehaha/article/details/48264947

版权

css3 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
  div{
    background: #ccc; 首先自己本身要有默认的
    transition:background 1s linear; 多个可以用,号分开   可以用transform 
  }
  
  div:hover{
    background: red  后面再写改变之后的样子
  }
  </style>
</head>
<body>
<!-- tansition : property duration timing-function-->
  <div>实例文字</div>
</body>
</html>

二：animation

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
  div{
    background: red;
    transform:rotate(0deg);
    width: 300px;
    
  }
  @-webkit-keyframes mycolor {
    0%{
      background: red;
      transform:rotate(0deg);
    }
    40%{
      background: blue;
      transform:rotate(40deg);
    }
    80%{
      background: pink;
      transform:rotate(-40deg);
    }
    100%{
      background: red;
      transform:rotate(0deg);
    }
  }
  /*-webkit-animation-name    -webkit-animation-duration -webkit-animation-timing-function*/
  div:hover{
    -webkit-animation: mycolor 3s linear
  }
  </style>
</head>
<body>
<div>实力文字</div>
</body>
</html>

yysmilehaha

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
transitions / animation 动画

div{ background: #ccc; 首先自己本身要有默认的 transition:background 1s linear; 多个可以用,号分开可以用transform } div:hover{ background: red 后面再写改变之后的样子 } 实例文字二：animation d
复制链接

扫一扫

专栏目录