改变旋转中心动画过渡设置圆自定义设置动画放大缩小动画

最新推荐文章于 2025-01-07 12:18:31 发布

謦潇的小弟

最新推荐文章于 2025-01-07 12:18:31 发布

阅读量198

点赞数

分类专栏：前端文章标签： html5 css3

本文链接：https://blog.csdn.net/m0_49191104/article/details/127644116

版权

前端专栏收录该内容

4 篇文章

订阅专栏

这篇博客详细介绍了如何使用CSS3实现改变元素旋转中心、设置动画过渡效果、创建圆形元素、自定义动画以及执行放大缩小动画的方法。通过指定不同的属性值，可以实现各种动态效果，例如控制过渡时间、运行曲线、延迟时间等，为网页增加视觉吸引力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

改变旋转中心

transform-origin： 0px 0px；

transform：translate（300px，100px）；

动画过渡

	transition: transform 3s linear 0.2s;

注意：

值1 表示过渡的属性(宽高旋转阴影) 若只需要其中一个则是把all改为对应的
值2 表示过渡时间开始到结束的时间
值3 表示运行的曲线(匀速)
值4 延迟时间

设置圆

/* 可以设置 50% 如果是正方形则为圆 长方形则为椭圆 */
				border-radius: 50px;

/* 阴影 */
				/* 
				 */
				box-shadow: 50px 30px 30px paleturquoise;

注意：值1 表示x轴正数向右负数向左
值2 表示y轴正数下负数是上
值3 表示模糊的范围正数越大阴影越淡负数没有阴影
值4 表示颜色

自定义设置动画

/* 动画 */
				   /*动画名（自定义 与@keyframes donghua 对应） 运行时间 */
				   /* linear 匀速 0.5s 延迟 infinite 无数次 运行次数 */
				animation:danhua 2s linear 0.5s infinite;
				@keyframes donghua{
					0%{
						transform: rotate(0deg);}
					100%{
						transform: rotate(360deg);
					}
				}
				/* 敲一个@k选择他就好 */
				@keyframes name{
					from{}
					to{}
				}
			}

放大缩小动画

/* 放大/缩小 */
				/* 优先级高于其他 */
				/* 设置多个效果则是用空格隔开 */
				transform: rotate(90deg) scale(0.5);
				border-radius: 50%;
				/* transform: ; */

注意：

设置多个效果则是用空格隔开
放大/缩小优先级高于其他