css3动画学习小计

最新推荐文章于 2022-10-22 09:53:51 发布

Sukyo_h

最新推荐文章于 2022-10-22 09:53:51 发布

阅读量401

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/hongmy94/article/details/104265526

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

学习了一下css3的动画属性，进行一下相关知识的总结。

主要涉及以下几个属性

animation(动画)	用于设置动画，是一个简写的属性，包含6个属性
transtision(过度)	用于设置元素的样式过度，和animation有着类似的效果，细节上有很大不同
transform(变形)	元素进行旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix
translate(移动)	是transform，用于X轴和Y轴移动

1、transform

进行2D/3D转换允许我们对元素进行旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix

2、transition（过渡）

用于设置元素的样式过渡和animation有着类似的效果，但细节上有很大的不同主要包括以下几个属性

transition-property:指定过渡或动态模拟的css属性

transition-duration:指定完成过渡所需的时间

transition-timing-function:指定过渡函数

transition-delay:指定开始出现的延迟时间

transation的局限性

transition的优点在于简单易用，但是它有几个很大的局限。

（1）transition需要事件触发，所以没法在网页加载时自动发生。

（2）transition是一次性的，不能重复发生，除非一再触发。

（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。

animation属性类似于transition，他们都是随着时间改变元素的属性值，其主要区别在于：使用transition属性只能通过指定属性的初始状态和结束状态，然后在两个状态之间进行平滑过渡的方式来实现动画；animation在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到一种动画的效果

3、animation + @keyframes 配合使用

常用例子：

（1）下划线动画效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=100%">
    <style>
        div{
            margin-top: 20px;
            scroll-margin-bottom: 20px;
        }
        /* 下划线动画效果 */
      .fancy-link{
          text-decoration: none;
          background-image:linear-gradient(red, red);
          background-repeat: no-repeat;
          background-position: bottom left;
          background-size: 0 3px;
          transition: background-size 500ms ease-in-out;
      }
      .fancy-link:hover{
          background-size: 100% 3px
      }
    </style>
    
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>
            <p>1、这是鼠标移到文字上在其下方出现<a class="fancy-link" href="#">下划线动画效果</a>通过控制背景图片的尺寸（background-size）来实现虚拟的下划线效果的。</p>
    </div>

</body>
</html>

（2）悬浮放大图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>悬浮放大图片</title>
    <style>
       #div1{
           width: 100px;
           height:100px;
           background: red;
           margin: 100px;
           transition: all 1s ease-out
       }
       #div1:hover{
           transform: scale(2)
       }
    </style>
</head>
<body>
    <div id="div1"></div>
</body>
<script>
   
</script>
</html>

（3）字体滚动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文字滚动效果</title>
    <style>
     .div1 {
        width:200px;
        height:200px;
        overflow:hidden;
        margin:auto;
        position:relative;
    }
    @keyframes anis {
        100% {
          /* 页面垂直移动 */
          transform:translateY(-200px)
        /* transform:translateX(-200px) 页面垂直移动 */
    }
    }
    .div2 {
        animation:anis 10s linear infinite;
    }
    .div2:hover {
        animation-play-state:paused;
    }
    </style>
</head>
<body>
        <div class="div1">
                <div class="div2">
                    <p>111111111111111111111</p>
                    <p>211111111111111111111</p>
                    <p>311111111111111111111</p>
                    <p>411111111111111111111</p>
                    <p>511111111111111111111</p>
                    <p>611111111111111111111</p>
                    <p>711111111111111111111</p>
                    <p>811111111111111111111</p>
                    <p>911111111111111111111</p>
                    <p>101111111111111111111</p>
                    <p>111111111111111111111</p>
                    <p>121111111111111111111</p>
                    <p>131111111111111111111</p>
                    <p>141111111111111111111</p>
                    <p>151111111111111111111</p>
                    <p>161111111111111111111</p>
                </div>
            </div>
</body>
</html>

（4）进度条实现的几种方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>进度条实现的几种方式</title>
    <style>
    body{
        width: 100%;
        height: 500px;
    }
     .other{
      width: 50%;
      height: 2%;
      color:#f00;
      background:green;
      border-radius: 0.2rem;
  }
  /* 表示总长度背景色 */
  .other::-webkit-progress-bar{     
     background-color: #f2f2f2;
     border-radius: 0.2rem;
 }
  /* 表示已完成进度背景色 */
 .other::-webkit-progress-value{
       background: #a21211;
       border-radius: 0.2rem; 
 }
    </style>
</head>
<body>
        <label for="myProgress">进度条</label>
        <progress class="myProgress other" value="0" max="100"></progress>
        <span class="mySpan"></span>
        <p>
           进度条 <progress class="myProgress" value="0" max="100"></progress>
           <span class="mySpan"></span>
        </p>

        <p><b>注释：</b>Internet Explorer 9 以及更早的版本不支持 <progress> 标签。</p>

</body>
<script type="text/javascript">
    window.onload = function () {
      var myProgress = document.getElementsByClassName("myProgress"); 
      var mySpan = document.getElementsByClassName("mySpan");
      var value = myProgress[0].value;
      mySpan[0].innerText = value + "%";
      var ID = setInterval(function () {
        value = myProgress[0].value;
        if (value < 100) {
          value += 10;
          myProgress[0].value = value;
          myProgress[1].value = value;
          mySpan[0].innerText = value + "%";
          mySpan[1].innerText = value + "%";
        }
        if (value == 100) {
          clearInterval(ID);
        }
      }, 500);
    }
  </script>
</html>

Sukyo_h

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3动画学习小计

学习了一下css3的动画属性，进行一下相关知识的总结。主要涉及以下几个属性animation(动画) 用于设置动画，是一个简写的属性，包含6个属性 transtision(过度) 用于设置元素的样式过度，和animation有着类似的效果，细节上有很大不同 transform(变形) 元素进行旋转rotate、扭曲skew、缩放scale和移动tra...
复制链接

扫一扫