欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

2020.3.16-----2020.3.22周报

程序员文章站 2024-03-20 11:24:28
...

这周主要学习了css3的动画,做了两个demo。大致也了解了过渡效果。

transform(转换):改变元素形状、尺寸和位置
transition(过渡):元素从一种样式逐渐改变为另一种的效果
animation(动画):通过CSS3的@keyframes(关键帧)规则,可以创建动画
rotate(deg):旋转给定的角度,正值为顺时针,负值为逆时针
下面是具体属性:
2020.3.16-----2020.3.22周报
2020.3.16-----2020.3.22周报

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

2020.3.16-----2020.3.22周报

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>rotate</title>
    <style>
        .block{
            width:100px;
            height:100px;
            background-color: rgb(240, 123, 13);
            border-radius: 50%;
            border-bottom:  5px rgb(245, 209, 143) solid;
            border-top:  5px rgb(34, 207, 238) solid;
            border-left: solid rgb(204, 34, 238) 5px;
            border-right: solid rgb(238, 34, 119) 5px;
            margin: 20% 50%;
            color:black;
            animation: myfirst 1s;
            position: relative;
            animation-direction:alternate;
            animation-iteration-count: infinite;
            transition-property: all;
            transition-duration: 1s;
        }
        @-moz-keyframes myfirst{
            0%   {background:red;}
            12.5%{background: blue;}
            25%  {background:yellow;}
            37.5%{background: seashell;}
            50%  {background:purple;}
            62.5%{background: teal;}
            75%{background: violet;}
            87.5%{background: whitesmoke;}
            100% {background:rgb(75, 250, 5);}
        }
        .block:active{
            transform: rotate(-135deg) scale(1.5) ;
            transition:all 1s linear;
        }
        .demoimg{
            width:100px;
            height:100px;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="block"></div>
</body>
</html>