[HTML/CSS]动画效果以及自定义动画效果

最新推荐文章于 2024-03-30 18:20:23 发布

web菜鸟新生

最新推荐文章于 2024-03-30 18:20:23 发布

阅读量1.8k

点赞数

分类专栏： html基础文章标签： css 动画 html

本文链接：https://blog.csdn.net/weixin_45144581/article/details/125024708

版权

html基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一，实现div或者文字的当鼠标浮于其上时的动画效果：

1，transition加在div中，实现动画效果的过渡效果，transition: all 3s;其中all表示所有样式都参与过渡，3s表示实现效果的时间；linear为使动画匀速进行；

2，transform放在hover中实现动画效果，translate表示位置的移动；scale表示缩放，其中的值为原大小的几倍；rotate表示旋转，其中旋转的度数单位为deg。

<html>
	<head>
		<meta charset="utf-8">
		<style>
			div{
				width: 300px;
				height: 300px;
				background: skyblue;
				/* 动画过渡效果 */
				transition: all 3s linear;
			}
			div:hover{
				background: rgb(0, 47, 167);
				/* transform 2d动画；translate 位置移动 */
				/* scale 缩放 */
				/* rotate 旋转；deg表示度数 */
				/* transform: rotate(60deg); */
				transform: translate(50px) scale(0.5) rotate(360deg);
			}
		</style>
	</head>
	<body>
		<div>
			
		</div>
	</body>
</html>

二，实现自定义动画效果：

1，自定义动画效果为设置一个keyframes关键字用来定义此动画效果，

        @keyframes abc {
               20%{
               }
               40%{
               }
               60%{
               }
               80%{
               }
               100%{
               }
           }

其中abc为此动画的名字，百分数为该动画效果每时间段内的样式，

2，调用定义好的动画效果：animation: abc 1s infinite linear;

abc为动画名，1s为动画时间，infinite使动画循环进行，linear为使动画匀速进行。

例子代码：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				background-color: black;
			}
			div{
				width: 800px;
				height: 100px;
				line-height: 100px;
				background: skyblue;
				margin: 50px auto;
				color: white;
				font-size: 60px;
				font-weight: bold;
				text-align: center;
				animation: abc 1s infinite linear;
			}
			@keyframes abc {
				20%{
					background-color: blue;
					color: white;
				}
				40%{
					background-color: gold;
					color: black;
				}
				60%{
					background-color: red;
					color: green;
				}
				80%{
					background-color: green;
					color: purple;
				}
				100%{
					background-color: purple;
					color: yellow;
				}
			}
		</style>
	</head>
	<body>
		<div>
			到沈阳了，指定没你好果汁吃
		</div>
	</body>
</html>

web菜鸟新生

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
[HTML/CSS]动画效果以及自定义动画效果

一，实现div或者文字的当鼠标浮于其上时的动画效果：1，transition加在div中，实现动画效果的过渡效果，transition: all 3s;其中all表示所有样式都参与过渡，3s表示实现效果的时间；linear为使动画匀速进行；2，transform放在hover中实现动画效果，translate表示位置的移动；scale表示缩放，其中的值为原大小的几倍；rotate表示旋转，其中旋转的度数单位为deg。<html> <head> <meta c
复制链接

扫一扫