css圆弧动画

最新推荐文章于 2024-05-27 14:48:10 发布

前端小li

最新推荐文章于 2024-05-27 14:48:10 发布

阅读量565

点赞数

分类专栏： css HTML 文章标签： css 动画 css3

本文链接：https://blog.csdn.net/HTML5_student/article/details/121949178

版权

HTML 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8"> 
 <style>
.body{
    background-color: aqua;
    height: 700px;
    width: 1000px;
   
} 
@keyframes bimg1 { 
    0% {top: 400px;} 
    50% {top:0px;transform:scale(1);opacity: 1; }   
    100% {top:0px; transform:scale(2);opacity: 0;}   
} 
@keyframes bimg2 { 
    0%  {left: 0;}
    100% {left: 400px;} 
} 
 #item {  
  animation: bimg1 7s infinite cubic-bezier(0,1,0,1),bimg2 7s infinite cubic-bezier(0,0,0,1); 
  width: 50px; 
  height: 50px; 
  position: absolute; 
  background: red; 
}
@keyframes bimg3 { 
    0% {top: 400px;} 
    50% {top:0px;transform:scale(1);opacity: 1; } 
    100% {top:0px;transform:scale(2);opacity: 0;} 
    
} 
@keyframes bimg4 { 
    0%  {left: 800px;}
    100% {left: 400px;} 
} 
 #item2 {  
  animation: bimg3 7s infinite cubic-bezier(0,1,0,1),bimg4 7s infinite cubic-bezier(0,1,0,1); 
  width: 50px; 
  height: 50px; 
  position: absolute; 
  background: yellow;

} 
 

 
 </style>
</head>
<body>
    <div class="body">
        <div id="item">
      
        </div> 
        <div id="item2">
      
        </div> 
    </div>
  
</body>
</html>

前端小li

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css圆弧动画

<!doctype html><html><head><meta charset="utf-8"> <style>.body{ background-color: aqua; height: 700px; width: 1000px; } @keyframes bimg1 { 0% {top: 400px;} 50% {top:0px;transform:scale(1);opaci
复制链接

扫一扫