css3过渡和动画知识点

最新推荐文章于 2024-08-17 22:24:13 发布

小五角

最新推荐文章于 2024-08-17 22:24:13 发布

阅读量115

点赞数

文章标签： css 定位 css3 html

本文链接：https://blog.csdn.net/qq_45868384/article/details/117664743

版权

该博客展示了两个CSS动画示例，案例一利用`@keyframes`创建了一个圆形颜色和位置变化的动画效果；案例二则通过相对定位和动画实现了元素在矩形区域内移动并改变形状和颜色的效果。这两个案例详细解释了CSS动画和相对定位的应用。

摘要由CSDN通过智能技术生成

案例一：

.nav{
           /*width: 200px;
           height: 200px;
           background-color: orange;
           border-radius: 50%;*/
           animation: yidong infinite 10s alternate;
       }
       @keyframes yidong{
           0%{
               width: 200px;
               height: 200px;
               margin-left: 0%;
           border-radius: 50%;
               background-color: orange;

           }
           50%{
               width: 200px;
               height: 200px;
               margin-left: 45%;
           border-radius: 0;
               background-color: yellow;

           }
           100%{
               width: 200px;
               height: 200px;
               margin-left: 87%;
               background-color: cornflowerblue;
               border-radius: 50%;}
       }

<body>

<body>

效果图：

案列2：

.nav1{
           width: 800px;
           height: 500px;
           border: 1px solid;
           margin: 0 auto;
       }
       .nav2{
           width:100px;
           height:100px;
           background:red;
           position:relative;/*生成相对定位的元素，相对于其正常位置进行定位。*/
           -webkit-animation: yi2 infinite 10s alternate;
       }
       @keyframes yi2{
           0%{
               background: yellow;
               left:0px; top:0px;
           }
           25%{
               background: bisque;
               border-radius: 50%;
               left:700px;
               top: 0;
           }
           50%{
               background: cyan;
               border-radius:50% ;
               top: 400px;
               left: 700px;
           }
           75%{
               background: coral;
               border-radius: 0%;
               top: 400px;
               left: 0px;
           }
           100%{
               background: wheat;
               border-radius: 0;
               left: 0;
               top: 0;
           }

       }

<body>

</body>

效果图：

小五角

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3过渡和动画知识点

案例一：.nav{ /*width: 200px; height: 200px; background-color: orange; border-radius: 50%;*/ animation: yidong infinite 10s alternate; } @keyframes yidong{ 0%{ ...
复制链接

扫一扫