HTML+CSS 旋转照片墙！源代码（简易动画干货快收藏！！）
拿走請三連，并注明出處
新手上路，路過的大佬請多多指教~
動畫特效為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>
?
記得點贊關注喔~
總結
以上是生活随笔為你收集整理的HTML+CSS 旋转照片墙！源代码（简易动画干货快收藏！！）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 最新笔记本电脑排行榜前十名 最好的笔记本
- 下一篇： 魔方APP项目-07-客户端提交登录信息