html css学习笔记-过渡，动画

最新推荐文章于 2024-05-19 10:07:11 发布

绿叶清风

最新推荐文章于 2024-05-19 10:07:11 发布

阅读量749

点赞数

分类专栏： html/css

本文链接：https://blog.csdn.net/PZ0605/article/details/45767153

版权

html/css 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .div1{
            width: 100px;
           height: 100px;
           background-color: blue;
            /*高宽各2s,旋转*/
            /*不同的浏览器*/
            -webkit-transition: width 2s,height 2s,transform 2s;
            -moz-transition: width 2s,height 2s,transform 2s;
            -ms-transition: width 2s,height 2s,transform 2s;
            -o-transition: width 2s,height 2s,transform 2s;
            transition: width 2s,height 2s,transform 2s;
        }
        .div1:hover{
            width: 200px;
            height: 200px;
            /*旋转360，同时高宽变成200*/
            transform:rotate(360deg);
            -webkit-transform:rotate(360deg);
        }

        /*动画效果*/
        .div2{
            width: 100px;
            height: 100px;
            background-color: yellow;
            position: relative;
            /*指定自定义的amin动画*/
            /* infinite alternate：不断执行动画*/
            animation:amin 5s infinite alternate;
            -webkit-animation:anim 5s infinite alternate;
        }
        @keyframes amin{
            0%{background: red;left:0px;top: 0px;}
            25%{background: blue;left:200px;top:0px;}
            50%{background: darkgrey;left:200px;top:200px;}
            75%{background: #fff342;left: 0px;top: 200px;}
            100%{
                background: fuchsia;left:0px;top:0px;
            }
        }

    </style>
</head>
<body>
  <!--
    css3 过渡：是元素从一种样式转换成另一种样式
       动画效果的css
       动画执行的时间
    属性：
      transition:设置四个过渡属性
      tansiton-property:过渡的名称
      transiton-duration:过渡花费的时间
      transiton-timing-function:过渡效果的时间曲线
      transition-delay:过渡效果开始时间（延迟开始的时间）
  -->
  <div class="div1">
      效果展示
  </div>
  <!--
  动画效果
    通过css可以进行创建动画
    css3动画需要遵循@keyframes规则
       规定动画的时长
       规定动画的名称
  -->
<div class="div2">

</div>
</body>
</html>

绿叶清风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html css学习笔记-过渡，动画

.div1{ width: 100px; height: 100px; background-color: blue; /*高宽各2s,旋转*/ /*不同的浏览器*/ -webkit-transition: width 2s,height 2s,t
复制链接

扫一扫

专栏目录