HTML+CSS 旋转照片墙!源代码(简易动画干货快收藏!!)

拿走请三连,并注明出处 新手上路,路过的大佬请多多指教~ 动画特效为11张照片&#…

拿走请三连,并注明出处

新手上路,路过的大佬请多多指教~

动画特效为11张照片,环绕着旋转(照片可自改添加,源代码中用到的照片未上传)

<!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>

body {

margin: 0px;

}

#div1 {

width: 100%;

height: 50px;

background: rgba(50, 161, 235, 0.966);

}

#div2 {

background-image: url(w3.jpeg);

position:fixed;

top: 0;

left: 0;

width:100%;

height:100%;

min-width: 1000px;

z-index:-10;

zoom: 1;

background-color: #fff;

background-repeat: no-repeat;

background-size: cover;

-webkit-background-size: cover;

-o-background-size: cover;

background-position: center 0;

}

#photo_box{

width: 280px;

height: 400px;

position: fixed;

left: 0;

right: 0;

top:0;

bottom: 0;

margin: 200px auto;

transform-style: preserve-3d;/*表示所有子元素在3D空间中呈现*/

transform: rotateX(-5deg) rotateY(0deg);

animation: run 30s linear infinite;/*循环执行run动画,每30秒执行一次*/

}

/*设置图像大小、边框、圆角、位置*/

#photo_box img{

width: 250px;

height: 350px;

border: 5px solid #ccc;

border-radius: 5px;

position: absolute;

left: 0;

top: 0;

}

/*依次设置图像盒子中每个图像旋转后位置*/

#photo_box img:nth-child(1){

transform: rotateY(0deg) translateZ(500px);

}

#photo_box img:nth-child(2){

transform: rotateY(36deg) translateZ(500px);

}

#photo_box img:nth-child(3){

transform: rotateY(72deg) translateZ(500px);

}

#photo_box img:nth-child(4){

transform: rotateY(108deg) translateZ(500px);

}

#photo_box img:nth-child(5){

transform: rotateY(144deg) translateZ(500px);

}

#photo_box img:nth-child(6){

transform: rotateY(180deg) translateZ(500px);

}

#photo_box img:nth-child(7){

transform: rotateY(216deg) translateZ(500px);

}

#photo_box img:nth-child(8){

transform: rotateY(252deg) translateZ(500px);

}

#photo_box img:nth-child(9){

transform: rotateY(288deg) translateZ(500px);

}

#photo_box img:nth-child(10){

transform: rotateY(324deg) translateZ(500px);

}

#photo_box img:nth-child(11){

transform: rotateY(360deg) translateZ(500px);

}

/*采用@keyframes 规则创建run动画。*/

@keyframes run {

0%{transform: rotateX(0deg) rotateY(0deg);

}

25%{transform: rotateX(10deg) rotateY(90deg);

}

50%{transform: rotateX(0deg) rotateY(180deg);

}

75%{transform: rotateX(-10deg) rotateY(270deg);

}

100%{transform: rotateX(0deg) rotateY(360deg);

}

}

#text1 {

float: left;

color:#fff;

width: 150px;

padding:12px 0;

height: 50px;

}

#text2 {

float: right;

width: 100px;

color:#fff;

padding:12px 0;

height: 50px;

}

#text3 {

float: right;

width: 100px;

color:#fff;

padding:12px 0;

height: 50px;

}

</style>

</head>

<body>

<div id="div1">

<div id="text1">欢迎登录!</div>

<div id="text2" οnclick="outclick()" >退出</div>

<div id="text3">个人信息</div>

</div>

<div id="div2">

<div id="photo_box">

<img src="image/1.jpg">

<img src="image/2.jpg">

<img src="image/3.jpg">

<img src="image/4.jpg">

<img src="image/5.jpg">

<img src="image/6.jpg">

<img src="image/7.jpg">

<img src="image/8.jpg">

<img src="image/9.jpg">

<img src="image/10.jpg">

<img src="image/11.jpg">

</div>

</div>

</body>

/*简单设置页面*/

<script>

var name=localStorage.getItem("username");

var div1=document.getElementById("text1");

div1.innerHTML="欢迎"+name+"登录!";

function outclick() {

localStorage.clear();

window.location.href="登录页面.html";

}

</script>

</html>

记得点赞关注喔~

本文来自网络,不代表软粉网立场,转载请注明出处:https://www.rfff.net/p/2122.html

作者: HUI

发表评论

您的电子邮箱地址不会被公开。

返回顶部