css3动画案例—太阳大海跳动

最新推荐文章于 2024-07-22 19:12:50 发布

何迟

最新推荐文章于 2024-07-22 19:12:50 发布

阅读量2.4k

点赞数 4

分类专栏： CSS 前端开发也蛮有意思的

本文链接：https://blog.csdn.net/qq_42036616/article/details/83537807

版权

本文介绍了CSS3动画的应用，通过一个实例展示了如何创建太阳和大海跳动的效果。重点包括：动画的复用性，只需为元素指定动画名称即可执行；以及动画内多个效果的顺序影响，注意不同效果之间的差异。

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

要点：

1.一个动画定义完成之后，任何元素只要调用这个动画的名字，都可以执行这个动画

2.同一个动画，里面的多个效果也是有前后顺序的，注意效果的差别

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin:0;
			padding: 0;
		}
		/*去除所有边框，不然背景会留白边*/
		html,body{
			width: 100%;
			height: 100%;
			background-color: #0ea9b1;
			overflow: hidden;
			/*图片会撑开页面，会有滚动条*/
		}
		/*浏览器全屏*/
		img{
			width: 100%;
			height: auto;
			position: absolute;
			bottom: 0;
			left: 0; 
		}
		img:first-child{
            animation: qifu 2s ease infinite;
		}
		img:last-child{
            animation: qifu 3s ease-in infinite;
		}

		@keyframes qifu{
            0%{
            	bottom: 0;
            }
            50%{
            	bottom: -30