【慕课网】前端零基础入门---步骤四：升级页面化妆师CSS3---07-CSS3动画

最新推荐文章于 2024-07-10 17:46:06 发布

dqh_zsh

最新推荐文章于 2024-07-10 17:46:06 发布

阅读量125

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/qq_43405634/article/details/104432254

版权

07-CSS3动画

第1章 animation属性详解

1-1 animation-name

在这里插入图片描述

1-2 animation-duration

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<style type="text/css">
		div{
			font-family: 'Microsoft Yahei';
			font-size: 60px;
			font-weight: bold;
			line-height: 600px;
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			width: 800px;
			height: 600px;
			margin: auto;
			text-align: center;
			border:5px solid #000;
			border-radius: 50%;
			animation-name: banner;
			animation-duration: 2s;
		}
		@keyframes banner{
			from{opacity: 1;}
			to{opacity: 0;}
		}

	</style>
</head>
<body>
	<div>大家好，欢迎来到慕课网！</div>
</body>
</html>

1-3 animation-timing-function

在这里插入图片描述

1-4 animation-delay

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<style type="text/css">
		div{
			font-family: 'Microsoft Yahei';
			font-size: 60px;
			font-weight: bold;
			line-height: 600px;
			position: absolute;
			top: -1200px;
			right: 0;
			left: 0;
			bottom: 0;
			width: 800px;
			height: 600px;
			margin: auto;
			text-align: center;
			border:5px solid #000;
			border-radius: 50%;
			animation-name: disp;
			animation-duration: 2s;
			animation-delay: 2s;
		}
		@keyframes disp{
			from{top: -1000px;}
			to{top: 0;}
		}

	</style>
</head>
<body>
	<div>大家好，欢迎来到慕课网！</div>
</body>
</html>

1-5 animation-iteration-count

在这里插入图片描述

1-6 animation-direction

在这里插入图片描述

1-7 animation-fill-mode

在这里插入图片描述

1-8 animation-play-state

在这里插入图片描述

1-9 animation

在这里插入图片描述

第2章关键帧

2-1 @keyframes

在这里插入图片描述

第3章动画性能优化

3-1 will-change原理

在这里插入图片描述

3-2 will-change应用

在这里插入图片描述

dqh_zsh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【慕课网】前端零基础入门---步骤四：升级页面化妆师CSS3---07-CSS3动画

07-CSS3动画第1章 animation属性详解1-1 animation-name1-2 animation-duration<!DOCTYPE html><html lang="en"><head> <title>3</title> <meta http-equiv="Content-Type" c...
复制链接

扫一扫

【慕课网】前端零基础入门---步骤四：升级页面化妆师CSS3---07-CSS3动画

07-CSS3动画

第1章 animation属性详解

1-1 animation-name

1-2 animation-duration

1-3 animation-timing-function

1-4 animation-delay

1-5 animation-iteration-count

1-6 animation-direction

1-7 animation-fill-mode

1-8 animation-play-state

1-9 animation

第2章 关键帧

2-1 @keyframes

第3章 动画性能优化

3-1 will-change原理

3-2 will-change应用

“相关推荐”对你有帮助么？

第2章关键帧

第3章动画性能优化