H5全栈_动画

最新推荐文章于 2024-02-15 09:15:57 发布

AKIRAZXX

最新推荐文章于 2024-02-15 09:15:57 发布

阅读量403

点赞数

分类专栏： html/css 文章标签： css动画变形

本文链接：https://blog.csdn.net/AKIRAZXX/article/details/99709304

版权

html/css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

CSS动画

定义动画帧

@keyframes 动画名称 {
				from {
					left:0;
				}
				to {
					left:1000px;
				}
			}
			
@keyframes 动画名称 {
				0% {
					left:0;
				}
				...
				100% {
					left:1000px;
				}
			}

引用动画

animation-name: 动画名称
animation-duration:3s; 一次动画持续时间
animation-iteration-count: 动画重复的次数
2/infinite
animation-timing-function: 动画速度曲线
steps() 步伐函数
linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
animation-fill-mode 动画最后一帧的填充样式
forwards 当动画完成后，保持最后一个属性值
backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值
both 向前和向后填充模式都被应用。
animation-direction 动画方向
alternate-reverse 来回
reverse 逆向
alternate 正常
animation-delay 延迟
animation-play-state: 动画状态
running; 运行
paused 停止

第三方动画库

animate.css
如何应用第三方库css/js【iconfont / fontawesome / animate.css】：
1. 模块用 npm install xxx
2. 本地下载 animate.css/iconfont.css
3. cdn 别人吧代码管理在别人的服务器（cdn）上,我们在线应用

梦幻西游

应用

<head>
	<meta charset="UTF-8">
	<title>梦幻西游</title>
	<link rel="stylesheet" href="../common.css">
	<style>
		.content {
			width: 950px;
			position: absolute;
			left: 50%;
			margin-left: -475px;
			bottom: 300px;
		}
		.content > ul::after {
			display: block;
			content: "";
			clear: both;
		}
		.content > ul > li {
			float: left;
			width: 200px;
			height: 180px;
			margin-right: 50px;
			overflow: hidden;
		}
		.content > ul > li:last-child {
			margin-right: 0;
		}
		.content > ul > li > div {
			width: 1600px;
			height: 180px;

			animation-name: dong;
			animation-duration: 1s;
			animation-timing-function: steps(8);
			animation-iteration-count: infinite;
			/*animation-direction: reverse;*/
		}
		.content > ul > li > div  img {
			width: 100%;
		}

		/*定义动画*/
		@keyframes dong {
			from {
				margin-left: 0;
			}
			to {
				margin-left: -1600px;
			}
		}

		html,body,.main {
			height: 100%;
		}
		.main {
			width: 100%;
			overflow-x: hidden;
		}
		.main > .bg {
			width: 3920px;
			height: 100%;
			margin-left: -1920px;
			background-image: url('./images/bg.jpg');
			background-repeat: repeat-x;

			animation-name: bg;
			animation-duration: 30s;
			animation-timing-function: linear;
			animation-iteration-count: infinite;
		}

		@keyframes bg {
			from {
				margin-left: -1920px
			}
			to {
				margin-left: 0;
			}
		}
	</style>
</head>
<body>
	<div class="main">
		<div class="bg"></div>
	</div>
	<!-- 屏幕中间 宽 200 * 4 + 50*3 = 950 -->
	<div class="content">
		<ul>
			<li>
				<div><img src="./images/wk.png" alt=""></div>
			</li>
			<li>
				<div><img src="./images/bj.png" alt=""></div>
			</li>
			<li>
				<div><img src="./images/ts.png" alt=""></div>
			</li>
			<li>
				<div><img src="./images/ss.png" alt=""></div>
			</li>
		</ul>
	</div>
</body>

transform 变形函数

transform-origin: left top; 变形的原点
left 左
top 上
right 右
bottom 下
transform: scale(1); 定义2D缩放转化

<head>
	<meta charset="UTF-8">
	<title>图片放大</title>
	<link rel="stylesheet" href="../common.css">
	<style>
		.product {
			float: left;
			width: 400px;
		}
		.product > .top {
			border: 1px solid red;
			font-size: 0;
			height: 300px;
			overflow: hidden;
		}
		.product > .top > img{
			width: 100%;
		}
		.product > .top:hover > img{
			animation-name: x;
			animation-duration: 3s;
			animation-fill-mode: forwards;
		}

		@keyframes x {
			0%{
				transform: scale(1);
			}
			100%{
				transform: scale(1.2);
			}
		}
	</style>
</head>
<body>
	<div class="product">
		<div class="top">
			<img src="./image/desktop.png" alt="">
		</div>
	</div>
</body>

transform: rotate(360deg); 定义 2D 旋转，在参数中规定角度
rotate(45deg);
rotateX(45deg); 定义沿着 X 轴的 3D 旋转
rotateY(45deg); 定义沿着 Y 轴的 3D 旋转
rotateZ(45deg); 定义沿着 Z 轴的 3D 旋转

<head>
	<meta charset="UTF-8">
	<title>唱片</title>
	<style>
		.box {
			width: 200px;
			height: 200px;
			border: 20px solid #333;
			border-radius: 50%;
			
			overflow: hidden;
			animation-name:x;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-timing-function: linear;
		}
		.box img {
			width: 100%;
		}
		@keyframes x{
			to {
				transform: rotate(360deg);
			}
		}
	</style>
</head>
<body>
	<div class="box">
		<img src="./image/desktop.png" alt="">
	</div>
</body>

transform:skew(60deg); 定义沿着 X 和 Y 轴的 2D 倾斜转换
skew(45deg)
skewX(45deg) 定义沿着 X 轴的 2D 倾斜转换(左右拉伸)
skewY(45deg) 定义沿着 Y 轴的 2D 倾斜转换(上下拉伸)

<head>
	<meta charset="UTF-8">
	<title>唱片</title>
	<style>
		.box {
			width: 200px;
			height: 200px;
			border: 20px solid #333;
			overflow: hidden;

			animation-name:x;
			animation-duration: 8s;
			animation-iteration-count: infinite;
			animation-timing-function: linear;
		}
		.box img {
			width: 100%;
		}
		@keyframes x{
			to {
				transform: skewY(60deg);
			}
		}
	</style>
</head>
<body>
	<div class="box">
		<img src="./image/desktop.png" alt="">
	</div>
</body>

transform: translateY(-200px); 定义 2D 转换
translate(300px)
translateX(300px) 定义转换，只是用 X 轴的值(左右)
translateY(300px) 定义转换，只是用 Y 轴的值(上下）

<head>
	<meta charset="UTF-8">
	<title>变形</title>
	<link rel="stylesheet" href="../common.css">
	<style>
		.box {
			width: 300px;
			height: 300px;
			text-align: center;
			line-height: 300px;
			background-color: pink;
			
			/*变形的原点*/
			transform-origin: left top;

			transition-property: transform;
			transition-duration: 2s;
		}
		.box:hover {
			/*transform: rotateY(45deg);*/
			/*transform: scale(2);*/
			/*transform: skew(45deg);*/
			transform: translateY(-200px);
		}
		.cell {
			height: 300px;
			background-color: lightblue;
		}
	</style>
</head>
<body>
	<div class="box">hello world</div>
	<div class="cell"></div>
</body>

更多可看

过渡

transition
transition-property 属性
transition-duration 持续时间
transition-timing-function 时间曲线函数

transition与animation的区别：

transition表示某些属性的过渡
width:100px;
width:200px;
width:100px -> 200px 过渡
transition-property:width;
transition-duration:2s;
transition-timing-function:linear;
不需要定义关键帧
transition用于表示简单的动画，需要触发（:hover）

AKIRAZXX

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5全栈_动画

CSS动画定义动画帧@keyframes 动画名称 { from { left:0; } to { left:1600px; } } @keyframes 动画名称 { 0% { left:0; } ... 100% { left:1600px; } }引用动...
复制链接

扫一扫