动画效果

最新推荐文章于 2019-12-05 08:56:11 发布

_xw2018

最新推荐文章于 2019-12-05 08:56:11 发布

阅读量130

点赞数

分类专栏： html+css入门

本文链接：https://blog.csdn.net/sm20170867238/article/details/92830874

版权

html+css入门专栏收录该内容

13 篇文章 1 订阅

订阅专栏

（1）animation-name：指定动画名称
（2）animation-duration：设置动画总耗时
（3）animation-iteration-count：设置动画播放次数
（4）animation-direction：alternate //设置交替动画
（5）animation-delay：设置动画延迟
（6）animation-fill-mode：forward|backward|both //设置动画结束时的状态
（7）animation-timing-function：设置动画速率
（8）animation-play-state：paused|running //设置动画播放状态

创建动画：@keyframes + 动画名字
格式：
@keyframes moveTest{
    from(0%){
      //添加样式
   }
   50%{
       //添加样式
   }
   to(100%){
       //添加样式
   }
}
百分比是指整个动画耗时的百分比

综合代码演示

<!DOCTYPE html>
<html>
	<head>
		<title>立方体</title>
		<meta charset="utf-8" />
	</head>
	<style>
		#content{
			margin: 200px auto;
			height: 200px;
			width: 200px;
			position: relative;
		}
		#box{
			height: 200px;
			width: 200px;
			position: relative;
			transform: rotate3d(1,1,0,-30deg);
			transform-style: preserve-3d;
			animation-name: Rotate;
			animation-duration: 5s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
			animation-timing-function: linear;
			animation-play-state:paused;
		}
		@keyframes Rotate{
			from{
				transform: rotate3d(1,1,1,30deg);
			}
			to{
				transform: rotate3d(1,1,1,330deg);
			}
		}
		#box > div{
			height: 200px;
			width: 200px;
			opacity: 0.4;
			position: absolute;
			transition: transform 3s;
			border: 1px solid darkblue;
			background-color: black;
		}
		#top{
			transform: translateY(-100px) rotateX(-90deg);
		}
		#bottom{
			transform: translateY(100px) rotateX(90deg);
		}
		#left{
			transform: translateX(-100px) rotateY(-90deg);
		}
		#right{
			transform: translateX(100px) rotateY(90deg);
		}
		#front{
			transform: translateZ(100px);
		}
		#back{
			transform: translateZ(-100px) rotateY(180deg);
		}
		#box:hover > div{
			border: 0px solid darkblue;
		}
		#box:hover #top{
			transform: translateY(-200px) rotateX(-90deg);
		}
		#box:hover #bottom{
			transform: translateY(200px) rotateX(90deg);
		}
		#box:hover #left{
			transform: translateX(-200px) rotateY(-90deg);
		}
		#box:hover #right{
			transform: translateX(200px) rotateY(90deg);
		}
		#box:hover #front{
			transform: translateZ(200px);
		}
		#box:hover #back{
			transform: translateZ(-200px) rotateY(180deg);
		}
		button{
			height: 30px;
			width:60px;
			margin: 15px;
			margin-top: 100px;
		}
		p{
			position: absolute;
			right: -150%;
			top:50%;
		}
	</style>
	<body>
		<div id="content">
			<div id="box">
				<div id="top" class="dire"></div>
				<div id="bottom" class="dire"></div>
				<div id="left" class="dire"></div>
				<div id="right" class="dire"></div>
				<div id="front" class="dire"></div>
				<div id="back" class="dire"></div><br/>
			</div>
			<button id="play">旋转</button>
			<button id="pause">停止</button>
			<p>颜色选择：<input type="color" id="color" /></p>
		</div>
	</body>
	<script>
		document.querySelector('#play').onclick=function(){
			var box=document.querySelector('#box');
			box.style.animationPlayState="running";
		}
		document.querySelector('#pause').onclick=function(){
			var box=document.querySelector('#box');
			box.style.animationPlayState="paused";
		}
		document.querySelector('#color').onchange=function(){
			var color=document.querySelector('#color');
			var dire=document.querySelectorAll('.dire');
			for(var i=0;i<dire.length;i++){
				dire[i].style.backgroundColor=color.value;
			}
		}
	</script>
</html>

效果截图

_xw2018

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动画效果

（1）animation-name：指定动画名称（2）animation-duration：设置动画总耗时（3）animation-iteration-count：设置动画播放次数（4）animation-direction：alternate //设置交替动画（5）animation-delay：设置动画延迟（6）animation-fill-mode：forward|backward...
复制链接

扫一扫