逆战班：css3动画特效代码

最新推荐文章于 2024-09-15 22:12:53 发布

社会yang

最新推荐文章于 2024-09-15 22:12:53 发布

阅读量165

点赞数

文章标签： css3 html animation

本文链接：https://blog.csdn.net/qq_29839583/article/details/104744881

版权

在CSS3中动画效果一般会通过transition和animation两个属性进行设计，但是transition需要触发事件才能展示随着时间的改变，元素带来的动画效果。
例如：通过动画实现旋转相册，效果如下
在这里插入图片描述 demo1
demo1代码如下（使用时仅需要相应的图片即可）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相册</title>
		<link rel="stylesheet" type="text/css" href="css/public_style.css"/>
		<style type="text/css">
			html,body{
				width: 100%;
				height: 100%;
			}/* 需要给父元素高度 */
			body{
				background: url(img/bj1.jpg) no-repeat;
				background-size: cover;
				perspective: 1500px;/* 景深 */
			}
			.pic{
				width: 200px;
				height: 400px;
				position: fixed;
				left: 50%;
				top: 50%;
				margin:-200px 0 0 -100px;
				transform-style: preserve-3d;/* 声明3D，使用3D的父元素进行声明， */
				animation: photo 5s linear ;
			}
			.pic li{
				width: 200px;
				height: 400px;
				position: absolute;
				left: 0;
				top: 0;
				
			}
			.pic li img{
				display: block;
				width: 200px;
				height: 400px;
			}
			.pic li:nth-child(1){
				transform: rotateY(36deg) translateZ(700px);
			}
			.pic li:nth-child(2){
				transform: rotateY(72deg) translateZ(700px);
			}
			.pic li:nth-child(3){
				transform: rotateY(108deg) translateZ(700px);
			}
			.pic li:nth-child(4){
				transform: rotateY(144deg) translateZ(700px);
			}
			.pic li:nth-child(5){
				transform: rotateY(180deg) translateZ(700px);
			}
			.pic li:nth-child(6){
				transform: rotateY(216deg) translateZ(700px);
			}
			.pic li:nth-child(7){
				transform: rotateY(252deg) translateZ(700px);
			}
			.pic li:nth-child(8){
				transform: rotateY(288deg) translateZ(700px);
			}
			.pic li:nth-child(9){
				transform: rotateY(324deg) translateZ(500px);
			}
			.pic li:nth-child(10){
				transform: rotateY(360deg) translateZ(500px);
			}
			/* .pic:hover { transform: rotateY(360deg);} */
			@keyframes photo{
				0%{transform: rotateY(0deg) rotateX(0deg);}
				50%{transform: rotateY(180deg) rotateX(5deg);}
				100%{transform: rotateY(360deg) rotateX(0deg);}
			}
		</style>
	</head>
	<body>
		<ul class="pic">
			<li><img src="img/pic1.jpg" ></li>
			<li><img src="img/pic2.png" ></li>
			<li><img src="./img/pic3.png" ></li>
			<li><img src="img/pic4.png" ></li>
			<li><img src="img/pic5.jpg" ></li>
			<li><img src="img/pic6.png" ></li>
			<li><img src="img/pic7.png" ></li>
			<li><img src="img/pic8.png" ></li>
			<li><img src="./img/pic9.png" ></li>
			<li><img src="img/pic10.png" ></li>
		</ul>
	</body>
</html>