css实现背景动态效果图

最新推荐文章于 2024-03-12 15:35:04 发布

随风小薇

最新推荐文章于 2024-03-12 15:35:04 发布

阅读量4.5k

点赞数

分类专栏：干货分享文章标签： css 微信 html

本文为博主原创文章，未经博主允许不得转载

本文链接：https://blog.csdn.net/qq_39197547/article/details/122037748

版权

干货分享专栏收录该内容

13 篇文章 0 订阅 ¥299.90 ¥99.00

订阅专栏

效果静态图如下，如需查看动态效果，请运行下面代码！

<!DOCTYPE html>
<html>
<head>
<style> 
.box{
	width:400px;
    height:450px;
    position: relative;
    background-color: #13ec74;
    overflow:hidden;
}
.cr {
  width: 200px;
  height: 200px;
  background-color: #45d84b;
  position: absolute;
  animation-name: example;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  border-radius:50%;
  top:-50px;
  right:-50px;
  z-index:2
}
.cr11 {
  width: 500px;
  height: 500px;
  background-color: #86e4b0;
  position: absolute;
  animation-name: example1;
  animation-duration: 4s;
  animation-iteration-count

了解本专栏