菜单 搜索
首页 前端知识 web前端开发—进阶css（动画）

web前端开发—进阶css（动画）

2024-04-29 12:04:02 前端知识 前端哥 853 157 我要收藏

目录

动画

实现步骤：

        1. 定义动画

        2. 使用动画

动画属性：

animation复合属性代码：

animation复合属性拆分写法代码：

精灵动画制作步骤：

多组动画：

综合实例：

        综合实例—走马灯（无缝动画）代码：

        综合实例—全民出游主页动画代码：

动画

目标：使用animation添加动画效果

思考：过渡可以实现什么效果？

   答：实现2个状态间的变化过程。

动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）

动画的本质：是快速切换大量图片时在人脑中形成的具有连续性的画面 ；构成动画的最小单元：帧或动画帧。

实现步骤：

        1. 定义动画

        2. 使用动画

  动画实现的步骤代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画实现步骤</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: pink;
 
            /* 使用动画的属性 */
            animation: change 2s;
        }
 
        /* 一. 定义动画：从200变大到600 */
   /*     @keyframes change {
            from {
                width: 200px;
            }
            to {
                width: 600px;
            }
        }
        */
 
        /* 二. 定义动画：200 到 长500*宽300 到 800*500 */
        /* 百分比指的是动画总时长的占比 */
       @keyframes change {
            0% {
                width: 200px;
            }
            50% {
                width: 500px;
                height: 300px;
            }
            100% {
                width: 800px;
                height: 500px;
            }
        }
        
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>
复制

动画属性：

目标：使用animation相关属性控制动画执行过程

注意： 动画名称和动画时长必须赋值 ；取值不分先后顺序 ； 如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间。

animation复合属性代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>animation复合属性</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: pink;
			
			/* animation: change 1s */
			
           /* animation: change 5s linear; */  /* linear匀速运动 */ 
 
            /* 分步动画 */
		   /* animation: change 1s steps(3) */ /* 分成3部分执行 */
            /* 3: 重复3次播放 */
         /* animation: change 1s steps(3) 1s 3; */
 
            /* 无限循环 ,带方向*/
            /* animation: change 1s infinite alternate; */
 
            /* 默认值, 动画停留在最初的状态 */
           /* animation: change 1s backwards; */
		   
		   /* 动画重复5次播放,带方向,停留在最初状态 */
		  /* animation: change 1s 5 alternate backwards; */
 
            /* 动画停留在结束状态 */
		/* 	animation: change 1s forwards; */
			
			/* 动画分3步，重复5次播放,带方向,停留在结束状态 */
			animation: change 1s steps(3) 1s 5 alternate forwards;
        }
 
        @keyframes change {
            from {
                width: 200px;
            }
            to {
                width: 600px;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>
复制

animation复合属性拆分写法代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>animation拆分写法</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: pink;
 
            animation-name: change;  /* 动画名称属性：animation-name */
            animation-duration: 1s;   /* 动画时长属性:animation-duration */
            animation-iteration-count: infinite;   /* 动画重复次数属性:animation-iteration-count */
            
        }
 
        .box:hover {
           /* 鼠标移入的时候暂停动画 */
           animation-play-state: paused;  /* 动画暂停的属性: animation-play-state */
 
 
        @keyframes change {
            from {
                width: 200px;
            }
            to {
                width: 600px;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>
复制

目标：使用steps实现逐帧动画 。

逐帧动画：帧动画。开发中，一般配合精灵图实现动画效果。

animation-timing-function: steps(N)； 将动画过程等分成N份。

精灵动画制作步骤：

（1）准备显示区域： 设置盒子尺寸是一张小图的尺寸（图片的分辨率➗小图个数），背景图为当前精灵图。

（2）定义动画： 改变背景图的位置（移动的距离就是精灵图的宽度）。

（3）使用动画：添加速度曲线steps(N)，N与精灵图上小图个数相同 ； 添加无限重复效果。

多组动画：

思考：如果想让小人跑远一些，该如何实现？

        答：精灵动画的同时添加盒子位移动画。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>精灵动画</title>
  <style>
    .box {
      /* 1.准备显示区域  1680/12=140 : 保证显示区域的尺寸和一个精灵小图的尺寸相同 */
      width: 140px;
      height: 140px;
      /* border: 1px solid #000; */
      background-image: url(./images/bg.png);
 
      /* 12: 精灵小图的个数 ，多个动画“,”号隔开*/
      animation: 
	   /* 逐帧动画 速度曲线steps(12) ，原地一直跑：infinite*/
        move 1s steps(12) infinite , 
		/* 小人 跑远一些 ，改变盒子的位置，停留在终点位置：forwards*/
        run 1s forwards
      ;
    }
 
	/* 	2. 定义动画 */
    @keyframes move { 
    /*   from {
          background-position: 0 0;
        }   */                        
        to {
          /* 1680: 整个精灵图的宽度 */
          background-position:  -1680px 0;
        }
    }
 
    /* 定义一个盒子移动的动画  800px */
    @keyframes run {
      /* 动画的开始状态和盒子的默认样式相同的, 可以省略开始状态的代码 */
     /* from {
        transform: translateX(0);
      } */
      to {
        transform: translateX(800px);
      }
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>
复制

动画1

综合实例：

        综合实例—走马灯（无缝动画）代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      li {
        list-style: none;
      }
 
      img {
        width: 200px;
      }
      
      .box {
        width: 600px;
        height: 112px;
        border: 5px solid #000;
        margin: 100px auto;
        overflow: hidden; /* 溢出部分隐藏 */
      }
 
     .box ul {
        width: 2000px;   /* 10张图在一横排 */
		/* 一直走:infinite;匀速运动:linear */
        animation: move 6s infinite linear;
      }
 
    .box li {
        float: left;
      }
 
      /* 定义动画:位移, ul 左侧使用  x -1400  */
     @keyframes move {
		 
		from{
		  transform:translateX(0);
		 }
		 
        to {
          transform: translateX(-1400px);
        }
      }
 
     /* 用户鼠标移入box,动画暂停在ul上 */
     .box:hover ul {
        animation-play-state: paused;
      } 
      
    </style>
  </head>
  <body>
    <div class="box">
      <ul>
        <li><img src="./images/1.jpg" alt="" /></li>
        <li><img src="./images/2.jpg" alt="" /></li>
        <li><img src="./images/3.jpg" alt="" /></li>
        <li><img src="./images/4.jpg" alt="" /></li>
        <li><img src="./images/5.jpg" alt="" /></li>
        <li><img src="./images/6.jpg" alt="" /></li>
        <li><img src="./images/7.jpg" alt="" /></li>
 
        <!-- 无缝动画，第567移动的时候,显示区域不能留白，将起始的123张图替补做显示区域的填充 -->
        <li><img src="./images/1.jpg" alt="" /></li>
        <li><img src="./images/2.jpg" alt="" /></li>
        <li><img src="./images/3.jpg" alt="" /></li>
      </ul>
    </div>
  </body>
</html>
复制

动画2

        综合实例—全民出游主页动画代码：

html:(缩放背景图  background-size)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
	<!-- 引入样式表 -->
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 云彩图片 作为背景-->
    <div class="cloud">
        <img src="./images/yun1.png" alt="">
        <img src="./images/yun2.png" alt="">
        <img src="./images/yun3.png" alt="">
		<img src="./images/san.png" alt="">
		<img src="./images/1.png" alt="">
 		<img src="./images/2.png" alt="">
		<img src="./images/3.png" alt="">
		<img src="./images/4.png" alt="">
		<img src="./images/font1.png" alt="">
		<img src="./images/lu.png" alt=""> 
    </div>
</body>
</html>
复制

css:

* {
    margin: 0;
    padding: 0;
}
 
/* 修改html的高度跟浏览器一样高 */
html {
    height: 100%;
}
 
body {
    height: 100%;
	/* 背景图水平居中 center 无重复：no-repeat */
    background: url(./../images/f1_1.jpg) no-repeat center 0;
	
 
    /* 缩放背景图  background-size*/
 
    /* 图片等比例缩放, 当宽度或者高度和盒子尺寸相等, 图片就不再缩放了， 可能会留白*/
    /* background-size: contain; */
 
    /* 图片等比例缩放, 图片完全覆盖到整个盒子, 可能会导致图片显示不全 */
    background-size: cover;
}
 
/* 
1. img 引入图片, 控制位置
2. 定义动画,使用动画
*/
 
.cloud img {
    position: absolute;
    left: 50%;
    top: 0;
}
 
.cloud img:nth-child(1) {
    margin-left: -300px;
    top: 20px;
    animation: cloud 1s infinite alternate;
} 
	.cloud img:nth-child(2) {
    margin-left: 400px;
    top: 100px;
    animation: cloud 1s infinite alternate 0.2s;
} 
	.cloud img:nth-child(3) {
    margin-left: -550px;
    top: 200px;
    animation: cloud 1s infinite alternate 0.4s;
}
 
	.cloud img:nth-child(4){
		width: 50px;
		margin-left: -250px;
		top: 150px;
		animation: cloud 1s infinite alternate 0.2s;
		transform: translateY(-20px);
		transform: scale3D(1.5,1.5,1.5)
	}
	.cloud img:nth-child(5){
		width: 50px;
		margin-left: -227px;
		top: 430px;
		animation: cloud 1s infinite linear alternate 0.5s;	
		transform: translateY(-20px);
	}
	.cloud img:nth-child(6){
		width: 50px;
		margin-left: -47px;
		top: 430px;
		animation: cloud 1s infinite linear alternate 0.5s;	
		transform: translateY(-20px) ;
	}
	.cloud img:nth-child(7){
		width: 50px;
		margin-left: 117px;
		top: 430px;
		animation: cloud 1s infinite linear alternate 0.5s;	
		transform: translateY(-20px);
	}
	.cloud img:nth-child(8){
		width: 50px;
		margin-left: 257px;
		top: 430px;
		animation: cloud 1s infinite linear alternate 0.5s;	
		transform: translateY(-20px);
		
	}
 
	.cloud img:nth-child(9){
			width: 250px;
			margin-left:-150px;
			top: 200px;
			animation: cloud 1s infinite linear alternate 0.5s;	
			transform: translateY(-20px);
			transform: scale3D(1.5,1.5,1.5)
		}
		.cloud img:nth-child(10){
				width: 90px;
				margin-left:50px;
				top: 80px;
				
			}
		.cloud:hover img:nth-child(9){
			animation-play-state: paused;
		}	
		
/* 云彩动画 */
@keyframes cloud {
    to {
        transform: translateX(20px);
    }
}
复制

效果图：

动画3

转载请注明出处或者链接地址：https://www.qianduange.cn//article/6553.html
标签
css动画
上一篇：HTML基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！