拿走请三连,并注明出处
新手上路,路过的大佬请多多指教~
动画特效为11张照片,环绕着旋转(照片可自改添加,源代码中用到的照片未上传)
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;
}
/*简单设置页面*/
var name=localStorage.getItem("username");
var div1=document.getElementById("text1");
div1.innerHTML="欢迎"+name+"登录!";
function outclick() {
localStorage.clear();
window.location.href="登录页面.html";
}
记得点赞关注喔~