css 动画

最新推荐文章于 2023-03-30 21:42:50 发布

meng_xiaoxiao

最新推荐文章于 2023-03-30 21:42:50 发布

阅读量173

点赞数

分类专栏： dom 文章标签： css html

本文链接：https://blog.csdn.net/meng_xiaoxiao/article/details/126346202

版权

dom 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

2d动画：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="layout">
			<div class="dd" style="float: left; width: 200px;height:100px; background-color: darkred;">
				<div style="float: left; width: 100px;height:100px; background-color: darkred;"></div>
				<div style="float: left;width: 100px;height: 100px; background-color: green;"></div>
			</div>

		</div>
		<div class="div0"></div>

		<div class="div1">1</div>
		<div class="div2">2</div>
		<div class="div3">3</div>
		<div class="div4">4
			<div class="div5">5</div>
		</div>
		<div class="div6">
			<div>6</div>
			<div>6</div>
			<div>6</div>
		</div>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
		</ul>
	</body>

	<style type="text/css">
		.layout {

			height: 100px;
			width: 100px;
			overflow: hidden;
		}
		.dd{
			transition: all .5s ease; 
		}
		.dd:hover{
			transform: translatex(-100px);
		}

		ul {
			padding-top: 10px;
			height: 70px;
			background-color: palegreen;
		}

		ul li {
			float: left;
			margin-left: 0.625rem;
			width: 60px;
			height: 60px;

			border: 1px solid pink;
			border-radius: 50%;
			line-height: 60px;
			text-align: center;
			list-style: none;
			transition: all .5s;
			cursor: pointer;

		}

		ul li:hover {
			transform: scale(1.2);
		}

		.div3:hover {
			transform: scale(2);
		}

		.div6::after {
			content: "";
			display: block;
			clear: both;
			visibility: hidden;
		}

		.div6 div {
			float: left;
			height: 100px;
			width: 100px;
			overflow: hidden;
			border: 1px solid pink;
		}

		.div6 div::before {
			content: "1";
			display: block;
			height: 100px;
			width: 100px;
			transform: rotate(180deg);
			transform-origin: left bottom;
			background-color: hotpink;
			transition: all .5s;
		}

		.div6 div:hover::before {
			transform: rotate(0);
		}

		.div4 {
			height: 100px;
			text-align: center;
			background-color: royalblue;
		}

		.div5 {
			height: 50px;
			width: 100px;
			margin: 0 auto;
			background-color: pink;
		}

		.div0 {
			display: flex;
			width: 100px;
			height: 100px;
			position: relative;
			top: 50px;
			left: 50px;
			background-color: palegoldenrod;
		}

		.div1 {
			width: 100px;
			height: 100px;
			width: 100px;
			height: 100px;
			background-color: red;
			transition: all .5s;
			transform-origin: left bottom;

		}

		.div1:hover {
			transform: rotate(360deg);
		}

		.div2 {
			width: 100px;
			height: 100px;
			transform: translateX(50px);
			background-color: pink;
		}

		.div3 {
			width: 100px;
			height: 100px;
			background-color: palegreen;
		}
	</style>
</html>

3d动画：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div style="width: 400px;margin: 0 auto;height: 100px;">
			<div class="div0" style="float: left;">
				<div class="div1">d</div>
			</div>
			<div class="div00" style="float: left;margin-left: 40px;">
				<div class="div11">d</div>
			</div>
		</div>

		<div class="div2">
			<img src="./assets/win.png">
		</div>
		<div class="div3">
			<div class="div3-1">
				<img src="./assets/win.png">
				<div class="div3-2"></div>
			</div>
		</div>



		<div class="div4">
			<div class="div4-1">我是七鸽</div>
			<div class="div4-2">我是舞载</div>
		</div>

		<div class="rotateP">
			<div class="box">
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
		</div>
		<ul>
			<li>
				<div class="front">我是七鸽</div>
				<div class="back">我是舞载</div>
			</li>
			<li>
				<div class="front">我是七鸽</div>
				<div class="back">我是舞载</div>
			</li>

			<li>
				<div class="front">我是七鸽</div>
				<div class="back">我是舞载</div>
			</li>
		</ul>
	</body>
	<style type="text/css">
		.rotateP {
			margin: 20px;
			perspective: 500px;
			background-color: palegoldenrod;
		}

		.rotateP .box {

			width: 120px;
			height: 100px;
			margin: 0 auto;
			position: relative;
			transform-style: preserve-3d;
			transition: all 2s;

		}

		.rotateP:hover .box {
			transform: rotateY(360deg);
		}

		.box div {
			position: absolute;
			top: 0;
			left: 0;
			height: 100px;
			width: 120px;
			background-image: url(assets/win.png);
			background-size: 120px 100px;
		}

		.box div:nth-child(1) {
			transform: rotateY(0deg) translateZ(120px);
		}

		.box div:nth-child(2) {
			transform: rotateY(60deg) translateZ(120px);
		}

		.box div:nth-child(3) {
			transform: rotateY(120deg) translateZ(120px);
		}

		.box div:nth-child(4) {
			transform: rotateY(180deg) translateZ(120px);
		}

		.box div:nth-child(5) {
			transform: rotateY(240deg) translateZ(120px);
		}

		.box div:nth-child(6) {
			transform: rotateY(300deg) translateZ(120px);
		}



		ul {
			height: 80px;
		}

		ul li {
			float: left;
			margin-left: 10px;
			width: 120px;
			height: 42px;
			line-height: 42px;
			list-style: none;
			position: relative;

			transform-style: preserve-3d;
			transition: all .2s;
		}


		ul li div {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			text-align: center;
		}

		ul li:hover {
			transform: rotateX(90deg);
		}

		.front {
			z-index: 1;
			background-color: pink;
			transform: translateZ(21px);
		}

		.back {
			color: white;
			background-color: purple;
			transform: translateY(20px) rotateX(-90deg);
		}


		.div4 {
			color: white;
			position: relative;
			transform-style: preserve-3d;
			perspective: 500px;
			transition: all 1s;
		}

		.div4 div {
			margin: 0 auto;
			height: 100px;
			width: 100px;
			line-height: 100px;
			border-radius: 50%;
			text-align: center;

		}

		.div4-1 {
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			background-color: red;
		}

		.div4-2 {
			background-color: green;
			transform: rotateY(180deg);
		}

		.div4:hover {
			transform: rotateY(180deg);
		}


		.div3 {
			perspective: 500px;
			transform-style: preserve-3d;
		}

		.div3-1 {
			position: relative;
			width: 100px;
			margin: 0 auto;
			perspective: 500px;
			transform-style: preserve-3d;
			transform: rotateY(45deg);
		}

		.div3-1 img {
			width: 100px;
			height: 100px;
		}

		.div3-1 .div3-2 {
			position: absolute;
			top: 0;
			left: 0;
			width: 100px;
			height: 100px;
			background-color: palevioletred;
			transform: rotateX(80deg);
		}

		.div3:hover .div3-1 {
			animation: div3-1 1s infinite linear;
		}

		@keyframes div3-1 {
			from {
				transform: rotateX(0deg);
			}

			to {
				transform: rotateX(360deg);
			}
		}

		.div2 {
			perspective: 500px;
			text-align: center;
		}

		.div2 img {
			width: 100px;
			height: 100px;
			transition: all 2s;
		}

		.div2:hover img {

			animation-name: rotateMove;
			animation-duration: 2s;
			animation-iteration-count: infinite;
			animation-timing-function: linear;
			animation-direction: alternate;
		}

		@keyframes rotateMove {
			0% {
				transform: rotateY(0) translateX(0);
			}

			25% {
				transform: translateX(100px) rotateY(90deg);
			}

			50% {
				transform: translateX(200px) rotateY(180deg);
			}

			75% {
				transform: translateX(300px) rotateY(270deg);
			}

			100% {
				transform: translateX(400px) rotateY(360deg);
			}
		}

		@keyframes translatex {
			0% {
				transform: translateX(0);
			}

			25% {
				transform: translateX(50px);
			}

			50% {
				transform: translateX(100px);
			}

			75% {
				transform: translateX(150px);
			}

			100% {
				transform: translateX(200px);
			}
		}

		@keyframes rotatex {
			0% {
				transform: rotateX(0);
			}

			25% {
				transform: rotateX(90deg);
			}

			50% {
				transform: rotateX(180deg);
			}

			75% {
				transform: rotateX(270deg);
			}

			100% {
				transform: rotateX(360deg);
			}
		}

		@keyframes rotatey {
			0% {
				transform: rotateY(0);
			}

			25% {
				transform: rotateY(45deg);
			}

			50% {
				transform: rotateY(90deg);
			}


			75% {
				transform: rotateY(135deg);
			}


			100% {
				transform: rotateY(180deg);
			}
		}

		.div0 {
			perspective: 500px;
		}

		.div1 {

			margin: 0 auto;
			height: 100px;
			width: 100px;
			background-color: pink;
			animation: div1 1s infinite linear;
		}

		.div11 {

			margin: 0 auto;
			height: 100px;
			width: 100px;
			background-color: purple;
			animation: div1 1s infinite linear;
		}


		@keyframes div1 {
			from {
				transform: rotateY(0deg)
			}

			to {
				transform: rotateY(360deg)
			}
		}
	</style>
</html>