CSS动画转换，过渡

最新推荐文章于 2023-07-19 18:35:51 发布

梨涡柚子茶*

最新推荐文章于 2023-07-19 18:35:51 发布

阅读量145

点赞数 1

本文链接：https://blog.csdn.net/apple_58104230/article/details/117574449

版权

这篇博客展示了如何使用CSS动画和过渡效果，实现图形从左侧滑动到右侧，同时从圆形平滑地变换为正方形，再变回圆形，并伴随着颜色的动态变化。通过这段代码，读者可以学习到CSS在创建动态视觉效果方面的强大能力。

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

上效果图：

实现从左侧到右侧，图形从圆-正方形-圆，并且颜色变化的过程：

<style>
			div{
				width: 100px;
				height: 100px;
                border-radius: 100%;
				background-color: pink;
				position: absolute;
                top: 50%;
				left: 50%;
				animation: move 2s ease 0s infinite alternate;
				-webkit-animation: move 2s ease 0s infinite alternate;
			}
			
			@keyframes move{
				0%{
					left: 0;
					background-color: pink;
				}
                47%{
                    left: 680px;
                    background-color: pink ;
                    bord