《个人相册》项目相册页面（HTML+CSS+JS）

CSS部分

 body {margin: 0px;
}#title {width: 100%;height: 50px;background: #000;
}#title1 {float: left;color: #fff;width: 150px;padding: 12px 0;height: 50px;
}#title2 {float: right;width: 100px;color: #fff;padding: 12px 0;height: 50px;
}#title3 {float: right;width: 100px;color: #fff;padding: 12px 0;height: 50px;
}#bgmain {background-image: url("1.jpg");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: 100px;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 rgb(14, 5, 5);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);}
}

JS部分

 <script>
var name = localStorage.getItem("username");
var welcometitle = document.getElementById("title1");
welcometitle.innerHTML = "欢迎" + name + "登录！";function out() {localStorage.clear();window.location.href = "登录.html";
}function personalinfor() {var uname = localStorage.getItem("username");var uemailneme = localStorage.getItem("Email");alert("用户名:" + uname + "邮箱：" + uemailneme);
}</script>

运行效果：

《个人相册》项目相册页面（HTML+CSS+JS）相关推荐

520情人节送女朋友的3D相册礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐)
520情人节送女朋友的3D相册礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐) 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或者正在追求的妹子一 ...
HTML5七夕情人节表白网页_浪漫星空-爱心相册_ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤浪漫星空-爱心相册❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码 css爱心表白这是程 ...
50天50个前端小项目（纯html+css+js）第六天（页面滚动动画）
今天我们来实现的是页面滚动动画,比如说页面使用鼠标滚轮向下滚动的时候,内容区域会分别从左从右滑动到居中的内容区域,大概效果如下: 接下来来看实现首先是html: 没什么特别的地方,主要就是设置一些内 ...
关于Springboot项目页面中css,js文件加载失败的问题
记录一个刚开始接触Springboot时踩到的小坑.问题如下: 正在写一个登录功能,页面套用了bootstrap的模板,用浏览器打开页面有样式,但是整个项目跑起来的时候跳转的页面就会丢失样式,浏览器控 ...
50天50个前端小项目（纯html+css+js）第八天（形成波浪动画结合登录表单）
今天来做一个结合登录表单实现的波浪动画效果,没错,你没听错,重点不是表单,是波浪. 先看效果:首先是平平无奇的波浪效果然后当你点击输入框的时候:例如输入框里的Email和Password是会一个单词 ...
html设计有项目的页面,HTML+CSS项目开发经验总结(推荐)
好几天没更新博客了,刚实战完一个HTML+CSS的简单项目.经过几天的摸索,发现收益良多.之前只是单纯得写demo,看知识点,没有亲自实战项目.但实战过后才会了解,如何才能更好地提升自己的技术.针对这 ...
50天50个前端小项目（纯html+css+js）第十二天（FAQ 问题与回答框）
大家10.24程序员节快乐啊! 前两天摸了两天,嘿嘿,怪不好意思的. 今天我们来做一个问答框,就是根据按钮显示和关闭回答! 先看效果: 就是能自主控制问题答案的显示: 来直接看代码: html部分: ...
HTML期末大学生网页设计作业——奇恩动漫HTML (1页面) HTML+CSS+JS网页设计期末课程大作业
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...
HTML期末大学生网页设计作业——奇恩动漫HTML (1页面) HTML+CSS+JS网页设计期末课程大作业...
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...

《个人相册》项目相册页面（HTML+CSS+JS）

《个人相册》项目相册页面（HTML+CSS+JS）相关推荐

最新文章

热门文章