使用css实现简单的动画效果

最新推荐文章于 2024-04-19 08:21:13 发布

晚，宙。

最新推荐文章于 2024-04-19 08:21:13 发布

阅读量212

点赞数

文章标签： css 前端 html5

本文链接：https://blog.csdn.net/weixin_53892095/article/details/131749959

版权

动画2D

transform 变形
属性值：
translate:平移,简写
只写一个值：代表水平方向平移，垂直方向为0
包含： translateY/translateX
水平：正值向右，负值向左
垂直：正值向下，负值向上
rotate:设置旋转单位：deg
正值顺时针负值逆时针
transform-origin:设置旋转的中心点或者边
scale:设置缩小放大，数值，代表当前元素的宽高的倍数
只写一个值：代表宽高1的缩放倍数相同
一个值：第一个代表，宽，第二个代表高
注意：缩小取值范围（0，1）
放大 >1
倾斜skew:设置倾斜，单位deg
包含skewx/skewy
只写一个值代表水平

动画过渡效果设置

transition-property:设置改变的属性
值：
单个改变的属性
all：设置所有属性改变
如果设置多个属性改变，用逗号隔开
transition-duration：设置过渡时间
transition-delay：设置过渡延迟时间
transition—timing-function:设置过渡速度
可选值
ease 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
linear 规定从开始到结束具有相同速度的过渡效果
ease-in 规定缓慢开始的过渡效果
ease-out 规定缓慢结束的过渡效果
ease-in-out 规定开始和结束较慢的过渡效果
cubic-bezier 贝塞尔曲线
transition

3D动画效果设置

1.设置关键帧
    2.通过animation引用关键帧
       animation-name：关键帧名字 必填
       animation-duration：设置动画使用时间 必填
       animation-timing-function：设置动画运行速度
          取值：
              linear/匀速
              ease/慢快慢
              ease-in
              ease-out
              ease-in-out
              贝塞尔曲线
              steps(num) 代表动画完成时通过几步
        animation-iteration-count: 设置动画播放次数;
            取值：infinite/循环播放
                  num /播放几次   
        animation-direction: 设置播放方向;
            取值：alternate 正-反-正
                  alternate-reverse 反-正-反
        animation-play-state:设置动画是否停止
            取值：running播放
                  paused停止

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			body {
				height: 100vh;
				display: flex;
				justify-content: center;
				align-items: center;
				background: linear-gradient(150deg,#d299c2,#fef9d7);
				overflow: hidden;
			}
			.contain{
				width: 200px;
				height: 200px;
				position: relative;
			}
			.buluer {
				width: 100%;
				height: 100%;
				background: radial-gradient(cricle at 75% 30%,#fff 5px,#ff21c0 8%,#5b5b5b 60%,#ff21c0 100%);
				border-radius: 50%;
				box-shadow: inset 0 0 20px #fff,
				            inset 10px 0 46px #eaf5fc,
							inset 80px 0 60px #efcde6,
							inset -20px -60px 100px #f9f6de,
							inset 0 50px 140px #f9f6de,
							0 0 90px #fff;
				animation: run 0.8s ease-in-out infinite;
			}
			.blur {
				background-color: rgba(0, 0,0,0.15);
				width: 150px;
				height: 40px;
				border-radius: 50%;
				position: absolute;
				left: 50%;
				margin-left: -75px;
				bottom: -100px;
				filter: blur(1px);
				animation: run1 0.8s ease-in-out infinite;
			}
			@keyframes run {
				0%,100%{
					transform: translateY(0);
				}
				50%{
					transform: translateY(-80px);
				}
			}
			@keyframes run1 {
				0%,100%{
					transform: scale(1);
				}
				50% {
					transform: scale(0.5);
				}
			}
		</style>
	</head>
	<body>
		<div class="contain">
			<div class="buluer"></div>
			<div class="blur"></div>
		</div>
	</body>
</html>

如上3d动画小球

晚，宙。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
使用css实现简单的动画效果

ease 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）transition—timing-function:设置过渡速度。scale:设置缩小放大，数值，代表当前元素的宽高的倍数。transition-property:设置改变的属性。transition-duration：设置过渡时间。ease-in-out 规定开始和结束较慢的过渡效果。transition-delay：设置过渡延迟时间。ease-out 规定缓慢结束的过渡效果。ease-in 规定缓慢开始的过渡效果。
复制链接

扫一扫