3D旋转相册

最新推荐文章于 2024-08-29 12:21:32 发布
最新推荐文章于 2024-08-29 12:21:32 发布
阅读量221 收藏 3
点赞数
文章标签： 3d html css js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/czswydsg/article/details/117753573
版权

1.分别建立三个.html文件和一个.js文件；

2.分别是注册.html，登录.html，照片墙.html，正则表达式.js（验证邮箱、用户名和密码格式）。

（1）注册.html

<!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>
</head>
<style>
    #box{
        width: 400px;
        height: 450px;
        margin: 79px auto;
        text-align: center;
        background-color: white;
        filter: opacity(0.6);
        position: absolute;
        left: 325px;
    }
    #box1{
         width: 250px;
         height: 450px;
         background-image: url("bg2.jpg");
         margin: 80px auto;
         position: absolute;
         left: 725px;
         filter: opacity(0.9);
    }
    input{
        border:none;
        border-bottom:black 1px solid;
        text-align: center;
        outline: none;
    }
    p{
        margin: 5px;
        color: gray;
        font-size: small;
    }
    body{
          background-image: url('bg1.jpg');
        }
    #h{
        text-align: center;
        color:rgb(218, 231, 248);
    }
    #dl{
        opacity: 0.5;
        margin: 180px auto;
        background-color: rgb(171, 220, 245);
        width: 70px;
        height: 30px;
        line-height: 30px;
        border: white;
        border-radius: 13px;
    }
    a{
        text-decoration: none;
    }
</style>
</head>
<body>
<div id="box">
    <br>
     <h4>立即注册</h4>
     <p>邮箱</p>
     <input type="email" id="email">
     <p>用户名</p>
     <input type="text" id="username" placeholder="用户名长度不能超过5位">
     <p>性别</p>
     男<input type="radio" id="man" name="sex">&nbsp;&nbsp;
     女<input type="radio" id="woamn" name="sex">
     <p>头像</p>
     <input type="file" id="file">
     <p>密码</p>
     <input type="password" id="password" placeholder="密码长度至少6位">
     <p>确认密码</p>
     <input type="password" id="password1" placeholder="两次密码须一致">
     <p style="margin: 10px;"><button id="button" style="background-color: orange; border-radius: 11px; width: 150px;">注册</button></p>
</div>
<div id="box1">
<div id="h">
    <br><br>
    <h2>已有账号？</h2>
    <h6>有账号就登录吧，好久不见了！</h6>
    <div id="dl">
      <a href="登录.html">登录</a>
    </div>
    
</div>

</div>
      <script src="正则表达式.js"></script>
      <script>
        //登录跳转
        function tz(){
            window.location.href="登录.html";
        }

      //验证邮箱
        var email = document.getElementById("email");
        email.onchange = function(){
          var emailValue=this.value;
          if(!isemail(emailValue))
             alert("请输入正确的邮箱！");
          else
             console.log(emailValue);
        }        
         //验证用户名
                var un = document.getElementById("username");
                un.onchange = function(){
                var unlValue = this.value;
                // console.log(unlValue);
                if(!isname(unlValue))
                    alert("用户名格式错误！");
                else
                    console.log(unlValue);
               }         
          //验证密码 
             var psd = document.getElementById("password");
             psd.onchange = function(){
                 var psdValue = this.value;
                if(!ispsd(psdValue))
                    alert("密码格式错误！");
                else
                    console.log(psdValue);
             }
            //确认密码
             var psd1 = document.getElementById("password1");
             psd1.onchange = function(){
                var psd1Value = this.value;
                var psdValue = document.getElementById("password").value;
                if(psd1Value==psdValue)
                  console.log(psdValue);
               else
                  alert("两次密码不一致！")
             }
           //验证文件
              var file = document.getElementById("file");
              file.onchange = function(){
                var fileValue = this.value;
                if(!fileValue)
                   alert("请选择头像文件！")
                else
                   console.log(fileValue); 
                }
                
          var btn = document.getElementById("button");
          btn.onclick = function(){
              var em = document.getElementById("email").value;
              var un =document.getElementById("username").value;
              var fl = document.getElementById("file").value;
              var psd = document.getElementById("password").value;
              var psd1 = document.getElementById("password1").value;
              if(em=='' || un=='' || fl =='' || psd=='' || psd1=='')
                // console.log("value空");
                 alert("请完善注册信息！"); 
             else
             {
               // console.log(un);
                localStorage.setItem("email",em);
                localStorage.setItem("password",psd);
                alert("注册成功！");
                window.location.href="登录.html";
            }
        }
         </script>
</body>
</html>

效果展示

（2）登录.html

<!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>
        #box{
            background-color: white;
            width: 400px;
            height: 400px;
            border-radius: 50%;
            margin: 80px auto;
            text-align: center;
            filter: opacity(0.7);
            transition-duration:1s;
            transition-timing-function:linear;
        }
         #box:hover{
            transform:rotateY(360deg);
        }
        input{
            border:none;
            border-bottom:black 1px solid;
            text-align: center;
            outline: none;
        }
        p{
            color: gray;
            font-size: small;
        }
        button{
            background-color: orange;
            border-radius: 11px;
            width: 70px;
        }
    <style>
</head>
<body style="background-image: url('bg1.jpg');">
    <div id="box">
        <br>
        <br>
         <h4>立即登录</h4>
         <p>邮箱</p>
         <input type="email" id="email">
         <p>密码</p>
         <input type="password" id="password" placeholder="密码长度至少6位">
         <p><a style="font-size: 1px;" href="#">忘记密码?</a></p>
         <button id="dl">登录<button>&nbsp;&nbsp;
         <button id="zc">注册<button>
    </div>
    <script src="正则表达式.js"></script>
    <script>
        //验证邮箱
          var email = document.getElementById("email");
          email.onchange = function(){
            var emailValue=this.value;
            //console.log(emailValue);
            if(!isemail(emailValue))
               alert("请输入正确的邮箱！");
            else
               console.log(emailValue);
          } 
             //注册按钮点击事件
            var btn1 = document.getElementById("zc");
             btn1.onclick = function(){
                 window.location.href="注册.html";
             }

             //登录按钮点击事件
             var btn = document.getElementById("dl");
             btn.onclick = function(){
                 var em = document.getElementById("email").value;
                 var psd = document.getElementById("password").value;
                 if(localStorage.getItem("email")==em && localStorage.getItem("password")==psd)
                 {
                    alert("登录成功！");
                    window.location.href="照片墙.html";
                 }
                 else
                    alert("邮箱或密码错误！"); 
             }

    </script>
</body>
<html>

 效果展示

(3)照片墙.html

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        body {
            margin: 0;
            padding: 0;
            background: url("bg1.jpg") ;
        }
        :root{
            height: 100%;
        }
        body{
            height: 100%;
            perspective: 2000px;
            transform-style: preserve-3d;
        }

        #photos{
            width: 250px;
            height: 250px;
            position: absolute;
            left: 50%;
            top: 40%;
            transform: translate(-50%,-50%);
            transform-style: preserve-3d;
            animation: run 10s linear infinite;
        }
        @keyframes run{
            0%{
                transform: translate(-50%,-50%) rotateY(0deg);
            }
            100%{
                transform: translate(-50%,-50%) rotateY(360deg);
            }
        }
        img{
            width: 250px;
            position: absolute;
            opacity: 0.99;
            backface-visibility: visible;
            /* 默认值为visible，即能看见3d画面的背面，hidden看不见 */
        }
        img:nth-of-type(1){
            transform: rotateY(45deg) translatez(450px);
        }
        img:nth-of-type(2){
            transform: rotateY(90deg) translatez(450px);
        }
        img:nth-of-type(3){
            transform: rotateY(135deg) translatez(450px);
        }
        img:nth-of-type(4){
            transform: rotateY(180deg) translatez(450px);
        }
        img:nth-of-type(5){
            transform: rotateY(225deg) translatez(450px);
        }
        img:nth-of-type(6){
            transform: rotateY(270deg) translatez(450px);
        } 
        img:nth-of-type(7){
            transform: rotateY(315deg) translatez(450px);
        } 
        img:nth-of-type(8){
            transform: rotateY(360deg) translatez(450px);
        } 
       a{
           text-decoration: none;
           float: right;
       }
    <style>
</head>
<body>
    <div>
        <a href="登录.html">退出</a>
    </div>
    <div id="photos">
        <img src="1.jpg" alt="">
        <img src="2.jpg" alt="">
        <img src="3.jpg" alt="">
        <img src="4.jpg" alt="">
        <img src="5.jpg" alt="">
        <img src="6.jpg" alt="">
        <img src="7.jpg" alt="">
        <img src="8.jpg" alt="">
    </div>
</body>
<html>

效果展示

 

(4)正则表达式.js

//验证邮箱
function isemail(str){
    var pattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
     return pattern.test(str);
}
 //验证用户名
function isname(str){
   var pattern = /^[a-z0-9_-]{1,5}$/;
   return pattern.test(str);
}
//验证密码
function ispsd(str){
    var pattern = /[a-zA-Z0-9]{5}$/;
    return pattern.test(str);
}

文件夹文件

 

 

橙子是唯一的水果
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
3D旋转相册代码及详细使用教程
m0_54861649的博客
02-24 805
相信很多小伙伴看着短视频里的3D旋转相册很想要吧，下面就让我们来看看它的代码及使用方法！ 效果展示 代码展示 1.html 3D立体动态相册
教你零基础制作3D旋转相册（送给那个她~）
热门推荐
ChrisPhantom的博客
03-08 1万+
3D立体相册 　　是的，相信大家或多或少的会在一些地方看到某些程序员用代码给自己女朋友写3D立体相册，那么你会不会也想自己手动敲出那些炫酷的代码呢？ 　　那你是找对地方了。废话不多说，今天为大家分享利用html实现3D旋转效果。不用怕，不需要什么软件的，只需要一个电脑和，一只手！
3d旋转相册
qq_53489791的博客
08-01 639
3d旋转相册 1.首先所有的图片的容器绝对定位，叠放在一起，然后一次设置rotateY依次增加45deg ， 然后为每个图片的容器设置translateZ，向Z轴方向移动500px，所有图片会从对应的角度向外移动，像圆形一样展开。 2.创建动画，让rotateY旋转360deg。然后给盒子添加动画，时间为16s，设置linear和infinite，让动画匀速无限次播放。 3.给最后一张图片设置反向旋转，就可以使其看起来是静止的。 源代码： <style> @keyframes
3D 旋转相册
mwsblue的博客
08-25 755
最近事情不太多，想着练习一下3D动画（其实就是想做这个相册），各位想送女朋友礼物或者表白的小伙伴也可以动手做试试，或许有意想不到的效果也说不定，话不多说，进入正题。 效果图： 可以事先准备自己喜欢的图片，外层方块加内层方块共12张图片，代码量也不多，用到的也是些简单的3D样式。 1、transform-style: preserve-3d; //设置元素的子元素是位于 3D 空间中 2、通过rotate和translate实现正方体的六个面 3、给包裹正方体的父元素设置动画旋转 4、鼠标移
web3D旋转相册
m0_69435261的博客
11-11 649
3D旋转相册
3D旋转相册1.0
qq_45879198的博客
08-28 1394
文章目录前言一、3D旋转相册演示二、3D旋转相册源代码三、所需要的文件 前言 利用html css 写的一个简单的3D旋转相册，使用了媒体查询，可以适用于手机平板电脑 提示：以下是本篇文章正文内容，下面案例可供参考 一、3D旋转相册演示 体验网址：3D旋转相册 二、3D旋转相册源代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta h
Html3D旋转相册
weixin_46810858的博客
10-30 440
操作流程: 1.下载文件及资源并解压 2.双击index.html文件到浏览器中运行 文件链接:3D旋转相册 效果效果:
vue实现3D旋转相册
qq_44614878的博客
11-01 1477
vue实现3D旋转相册
超酷的3D旋转相册
蔡蔡先生的博客
08-02 477
2.修改html代码的<img>的src路径。photo/你的图片的名字.图片格式。jquery-1.8.3.min.js：公用js文件（百度下载）那么修改后的src路径就是src="photo/照片1.jpg"作者最近刷抖音看到这样的视频，觉得挺炫酷的。比如，你放入photo文件夹的图片名是：照片1.jpg。texiao.css：实现效果的样式文件（自己写的）1.把自己的图片放入photo文件夹中。立体旋转照片.html：相册显示的页面。photo：放照片的文件夹。
用html+CSS实现的3D旋转相册（表白代码）
06-03
《HTML+CSS构建3D旋转相册：一个浪漫的表白技术指南》 在网页设计的世界里，创新和个性化是吸引用户的重要...无论你是前端新手还是有经验的开发者，这个3D旋转相册都能为你提供宝贵的实践机会，进一步提升你的技能。
HTML5 3D旋转相册的实现示例
11-21
前一段时间，突然看到一个炫酷的3D旋转相册，这里记录一下，先看效果图： HTML5 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5 3D旋转...
html,js,css+流星3D旋转相册
04-24
情人节送女朋友的流星3D旋转相册，独属理科人的浪漫。 需要注意：1.网页html请使用Microsoft edge或者QQ浏览器打开。 2.照片在img里替换，名字为从1到10依次编号，拓展名统一使用gif，故也可以显 示gif动图。照片...
3d旋转相册—css3高级进阶
04-13
在本课程"3d旋转相册—css3高级进阶"中，我们将深入探讨如何利用CSS3的强大功能创建一个令人印象深刻的3D旋转相册。这个项目非常适合那些已经具备一定编程经验，特别是对HTML和CSS有基本理解的开发者。通过学习这个...
JavaScript制作3D旋转相册
10-16
本文介绍的是使用JavaScript制作一个3D旋转相册，其中涉及的技术点主要包括CSS3的3D变换属性以及JavaScript对DOM元素的操作和交互响应。 ### 知识点1：CSS3 3D变换 在本文内容中，通过CSS3的`transform`属性，实现...
Sweet Home 3D：Mac 与 Win 平台的强大 3D 室内装潢设计软件
2401_82627223的博客
08-29 979
Sweet Home 3D for Mac/win 是一款功能强大、操作便捷、广泛应用的 3D 室内装潢设计软件。
数据集不够用？3DGS助力生成带标注的全新扩展数据！
soaring_casia的专栏
08-29 752
本文表明研究者可以轻松更换场景中的物体和背景，同时自动生成准确的物体标注数据。
Unity坐标系计算3D中两直线的最短距离及最近点的几何原理
最新发布
薛文旺
08-29 259
Unity坐标系计算3D中两直线的最短距离及最近点的几何原理
腾讯提出一种新的针对风格化角色和逼真服装动画的生成3D运动转移方法，生成效果逼真！
AIGC Studio：分享AIGC前沿知识和好玩应用，公众号同名。
08-26 1163
为风格化角色制作动画以匹配参考动作序列是电影和游戏行业中一项要求很高的任务。现有方法主要关注角色身体的刚性变形，而忽略了由物理动力学驱动的服装局部变形。它们以与身体相同的方式变形服装，导致结果细节有限且不切实际，例如身体与服装的穿透。相比之下，我们提出了一种新颖的方法，旨在通过逼真的服装动画实现高质量的运动传输。由于现有数据集缺乏生成逼真服装动画所需的注释，我们构建了一个名为 MMDMC 的新数据集，它将来自 MikuMikuDance 社区的风格化角色与现实世界的动作捕捉数据相结合。
3d旋转相册html
08-30
你可以在以下代码中找到一个基本的3D旋转相册的HTML实现： ```html <!DOCTYPE html> .container { perspective: 1000px; width: 300px; height: 300px; } .carousel { transform-style: preserve-3d; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

橙子是唯一的水果

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值