精华内容
下载资源
问答
  • 用网页作一个电子相册放到网站上是相当的漂亮,下面给大家详细的讲解一下如何实现的
  • 旋转相册网页设计

    2017-11-13 13:00:11
    相册页面制作是老师讲课的例子,主要是网页前端设计,HTML语言和js
  • 抖音旋转相册制作详解(包含源代码html+css)

    万次阅读 多人点赞 2019-11-24 19:43:39
    首先新建文件夹如:旋转相册实例;取题材,图片(分别命名号序列,之所以序列方便下面引入图片修改路径); 我新建的目录如下:命名12张图片名称,其中:3.css和turn.html为接下来要实现的内容。 首先,图片准备...

    大家好!

    制作旋转相册很简单,需要工具为:Windows的记事本即可:(如果有专业的HTML编辑工具会更方便);

    首先新建文件夹如:旋转相册实例;取题材,图片(分别命名号序列,之所以序列方便下面引入图片修改路径);

    我新建的目录如下:命名12张图片名称,其中:3.css和turn.html为接下来要实现的内容。

     

    首先,图片准备好了,新建css样式文件。

    *{
        margin:0;
        padding: 0;
    }
    
    body{
        max-width: 100%;
        min-width: 100%;
        top:400px;
        height: 100%;
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 100% 100%;
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        background-color: #57faff;
    
    }
    li{
        list-style: none;
    }
    
    .box{
        width: 200px;
        height: 200px;
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 100% 100%;
        position: absolute;
        margin-left: 42%;
        margin-right: 22%;
        -webkit-transform-style:preserve-3d;
        -webkit-transform:rotateX(13deg);
        -webkit-animation:move 5s linear infinite;
    }
    .minbox{
        width: 100px;
        height: 100px;
        position: absolute;
        left:50px;
        top:30px;
        -webkit-transform-style:preserve-3d;
    
    }
    .minbox li{
        width: 100px;
        height: 100px;
        position: absolute;
        left: 0;
        top:0;
    }
    .minbox li:nth-child(1){
        background: url(../img/01.png) no-repeat 0 0;
        -webkit-transform:translateZ(50px);
    }
    .minbox li:nth-child(2){
        background: url(../img/02.png) no-repeat 0 0;
        -webkit-transform:rotateX(180deg) translateZ(50px);
    }
    .minbox li:nth-child(3){
        background: url(../img/03.png) no-repeat 0 0;
        -webkit-transform:rotateX(-90deg) translateZ(50px);
    }
    .minbox li:nth-child(4){
        background: url(../img/04.png) no-repeat 0 0;
        -webkit-transform:rotateX(90deg) translateZ(50px);
    }
    .minbox li:nth-child(5){
        background: url(../img/05.png) no-repeat 0 0;
        -webkit-transform:rotateY(-90deg) translateZ(50px);
    }
    .minbox li:nth-child(6){
        background: url(../img/06.png) no-repeat 0 0;
        -webkit-transform:rotateY(90deg) translateZ(50px);
    }
    .maxbox li:nth-child(1){
        background: url(../img/1.png) no-repeat 0 0;
        -webkit-transform:translateZ(50px);
    }
    .maxbox li:nth-child(2){
        background: url(../img/2.png) no-repeat 0 0;
        -webkit-transform:rotateX(180deg) translateZ(50px);
    }
    .maxbox li:nth-child(3){
        background: url(../img/3.png) no-repeat 0 0;
        -webkit-transform:rotateX(-90deg) translateZ(50px);
    }
    .maxbox li:nth-child(4){
        background: url(../img/4.png) no-repeat 0 0;
        -webkit-transform:rotateX(90deg) translateZ(50px);
    }
    .maxbox li:nth-child(5){
        background: url(../img/5.png) no-repeat 0 0;
        -webkit-transform:rotateY(-90deg) translateZ(50px);
    }
    .maxbox li:nth-child(6){
        background: url(../img/6.png) no-repeat 0 0;
        -webkit-transform:rotateY(90deg) translateZ(50px);
    }
    .maxbox{
        width: 800px;
        height: 400px;
        position: absolute;
        left: 0;
        top:-20px;
        -webkit-transform-style:preserve-3d;
    }
    .maxbox li{
        width: 200px;
        height: 200px;
        background: #fff;
        border: 1px solid #ccc;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0.2;
        -webkit-transition:all 1s ease;
    }
    .maxbox li:nth-child(1){
        -webkit-transform:translateZ(100px);
    }
    .maxbox li:nth-child(2){
        -webkit-transform:rotateX(180deg) translateZ(100px);
    }
    .maxbox li:nth-child(3){
        -webkit-transform:rotateX(-90deg) translateZ(100px);
    }
    .maxbox li:nth-child(4){
        -webkit-transform:rotateX(90deg) translateZ(100px);
    }
    .maxbox li:nth-child(5){
        -webkit-transform:rotateY(-90deg) translateZ(100px);
    }
    .maxbox li:nth-child(6){
        -webkit-transform:rotateY(90deg) translateZ(100px);
    }
    .box:hover ol li:nth-child(1){
        -webkit-transform:translateZ(300px);
        width: 400px;
        height: 400px;
        opacity: 0.8;
        left: -100px;
        top:-100px;
    }
    .box:hover ol li:nth-child(2){
        -webkit-transform:rotateX(180deg) translateZ(300px);
        width: 400px;
        height: 400px;
        opacity: 0.8;
        left: -100px;
        top:-100px;
    }
    .box:hover ol li:nth-child(3){
        -webkit-transform:rotateX(-90deg) translateZ(300px);
        width: 400px;
        height: 400px;
        opacity: 0.8;
        left: -100px;
        top:-100px;
    }
    .box:hover ol li:nth-child(4){
        -webkit-transform:rotateX(90deg) translateZ(300px);
        width: 400px;
        height: 400px;
        opacity: 0.8;
        left: -100px;
        top:-100px;
    }
    .box:hover ol li:nth-child(5){
        -webkit-transform:rotateY(-90deg) translateZ(300px);
        width: 400px;
        height: 400px;
        opacity: 0.8;
        left: -100px;
        top:-100px;
    }
    .box:hover ol li:nth-child(6){
        -webkit-transform:rotateY(90deg) translateZ(300px);
        width: 400px;
        height: 400px;
        opacity: 0.8;
        left: -100px;
        top:-100px;
    }
    @keyframes move{
        0%{
            -webkit-transform:rotateX(13deg) rotateY(0deg);
        }
        100%{
            -webkit-transform:rotateX(13deg) rotateY(360deg);
        }
    }

     

     

    其次再新建一个html文件:

     

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <link type="text/css"  href="3.css" rel="stylesheet ">
        <title>turn_pictures_wys</title>
     <style>
     <pre name="code" class="css">*{
        padding:0;
        margin:0;
    }
    body{
        width:100%;
        height:100%;
        background:#333;
    }
    #react{
        width: 200px;
        height:200px;
        margin: 200px auto;
        transform-style:preserve-3d;
        animation:rotate 20s infinite;
        animation-timing-function: linear;
    }
    #react div{
        position:absolute;
        transition: all .4s;
    }
    div .out_pic{
        width:200px;
        height:200px;
        opacity:0.9;
    }
    div .in_pic{
        width:100px;
        height:100px;
    }
    #react span{
        display:block;
        position:absolute;
        width:100px;
        height:100px;
        top:50px;
        left:50px;
    }
    @keyframes rotate{
        from{transform: rotateX(0deg) rotateY(0deg);}
        to{transform: rotateX(360deg) rotateY(360deg);}
    }
     
     
    .out_front{
        transform:translateZ(100px);
    }
    .out_back{
        transform:translateZ(-100px);
    }
    .out_left{
        transform:rotateY(90deg) translateZ(100px);
    }
    .out_right{
        transform: rotateY(-90deg) translateZ(100px);
    }
    .out_top{
        transform:rotateX(90deg) translateZ(100px);
    }
    .out_bottom{
        transform: rotateX(-90deg) translateZ(100px);
    }
    .in_front{
        transform:translateZ(50px);
    }
    .in_back{
        transform:translateZ(-50px);
    }
    .in_left{
        transform:rotateY(90deg) translateZ(50px);
    }
    .in_right{
        transform: rotateY(-90deg) translateZ(50px);
    }
    .in_top{
        transform:rotateX(90deg) translateZ(50px);
    }
    .in_bottom{
        transform: rotateX(-90deg) translateZ(50px);
    }
     
    /*外面的图片散开*/
    #react:hover .out_front{
        transform:translateZ(200px);
    }
    #react:hover .out_back{
        transform:translateZ(-200px);
    }
    #react:hover .out_left{
        transform:rotateY(90deg) translateZ(200px);
    }
    #react:hover .out_right{
        transform: rotateY(-90deg) translateZ(200px);
    }
    #react:hover .out_top{
        transform:rotateX(90deg) translateZ(200px);
    }
    #react:hover .out_bottom{
        transform: rotateX(-90deg) translateZ(200px);
    }
     
     
    /*里面的图片散开*/
    #react:hover .in_front{
        transform:translateZ(100px);
    }
    #react:hover .in_back{
        transform:translateZ(-100px);
    }
    #react:hover .in_left{
        transform:rotateY(90deg) translateZ(100px);
    }
    #react:hover .in_right{
        transform: rotateY(-90deg) translateZ(100px);
    }
    #react:hover .in_top{
        transform:rotateX(90deg) translateZ(100px);
    }
    #react:hover .in_bottom{
        transform: rotateX(-90deg) translateZ(100px);
    }
    
     </style>
    </head>
    <body>
    <div id="react">
        <div class="out_front">
            <img src="001.jpg" class="out_pic">
        </div>
        <div class="out_back">
            <img src="002.jpg" class="out_pic">
        </div>
        <div class="out_left">
            <img src="003.jpg" class="out_pic">
        </div>
        <div class="out_right">
            <img src="004.jpg" class="out_pic">
        </div>
        <div class="out_top">
            <img src="005.jpg" class="out_pic">
        </div>
        <div class="out_bottom">
            <img src="006.jpg" class="out_pic">
        </div>
        <span class="in_front">
            <img src="007.jpg" class="in_pic">
        </span>
        <span class="in_back">
            <img src="008.jpg" class="in_pic">
        </span>
        <span class="in_left">
            <img src="009.jpg" class="in_pic">
        </span>
        <span class="in_right">
            <img src="010.jpg" class="in_pic">
        </span>
        <span class="in_top">
            <img src="011.jpg" class="in_pic">
        </span>
        <span class="in_bottom">
            <img src="012.jpg" class="in_pic">
        </span>
    </div>
    </body>
    </html>

    新建的HTML文件注意两个地方:

    首先3.css文件的引入

    1.如果你的css文件不是3.css那么修改成对应文件名即可;

    2.重点地方:图片的插入:

    其中out_left  ,对应的是外层左边图片  ---  in_rigth对应里层右边图片,根据需要你可以自己修改各图片的位置;

     

     

    到这里制作过程完成;下面要做的事点击html后缀的文件打开方式为浏览器即可观看效果,希望大家可以一步成功,哈哈

     

    :文章有部分内容借鉴别人的;参考文章:https://www.cnblogs.com/zyrblog/p/11142624.html

     

    展开全文
  • HTML5七夕情人节表白网页❤流星雨3D旋转相册❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白 这是程序员表白系列中的100款网站表白之一,旨在...

    HTML5七夕情人节表白网页❤流星雨3D旋转相册❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白

    这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站,可以任意修改和使用,源码已上传,演示网址如下。

    🧡文章末尾-已经附上源码下载地址

    🧡作者主页-更多源码

    🧡100款七夕情人节告白源码-专栏文章

    作品介绍

    1.网页作品简介 :基于 HTML+CSS+JavaScript 制作七夕情人节表白网页, 生日祝福, 七夕告白, 求婚, 浪漫爱情3D相册,炫酷代码 ,已经兼容手机端和电脑端, 快来制作一款高端的表白网页送(他/她)生日祝福网页,制作修改简单, 需替换图片和文字即可.可自行更换背景音乐。

    2.网页作品编辑:任意HTML编辑软件(如:DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ )均可修改网页。

    一、作品展示

    在这里插入图片描述

    二、文件目录

    在这里插入图片描述

    三、代码实现

    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>流星雨3D旋转相册</title>
    	<link rel="stylesheet" href="style.css">
    	<style>
    		*{margin: 0;padding: 0;}
    		html,body{height: 100%;}
    		body{
    			display: flex;
    			perspective: 1000px;
    			transform-style: preserve-3d;
    			/* background-image: url(./img/3.png); */
    			background: #0c0c0c;
    			height:100%;
    			width: 100%;
    		}
    		#box{
    			z-index: 9999;
    			position: relative;
    			display: flex;
    			width: 130px;
    			height: 200px;
    			margin: auto;
    			transform-style: preserve-3d; 
    			transform: rotateX(-10deg);
    		}
    		#box > div{
    			transform-style: preserve-3d; 
    			position: absolute;
    			left: 0;
    			top: 0;
    			width: 100%;
    			height: 100%;
    			line-height: 200px;
    			font-size: 50px;
    			text-align: center;
    			box-shadow:0 0 10px #fff;
    			-webkit-box-reflect:below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,.8) 100%);
    		}
    		
    		#box p{
    			position: absolute;
    			left: 0;
    			top: 0;
    			bottom: 0;
    			right: 0;
    			margin: auto;
    			width: 1200px;
    			height: 1200px;
    			background: -webkit-radial-gradient(center center,600px 600px,rgba(50,50,50,1),rgba(0,0,0,0));
    			border-radius: 50%;
    			transform: rotateX(90deg) translate3d(-600px,0,-105px);
    		}
    		/* 下雨特效 */
    			#codepen-link {
    				position: absolute;
    				bottom: 30px;
    				right: 30px;
    				height: 40px;
    				width: 40px;
    				z-index: 10;
    				border-radius: 50%;
    				box-sizing: border-box;
    				background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/logo.jpg");
    				background-position: center center;
    				background-size: cover;
    				opacity: 0.5;
    				-webkit-transition: all 0.25s;
    				transition: all 0.25s;
    			}
    	
    			#codepen-link:hover {
    				opacity: 0.8;
    				box-shadow: 0 0 6px #efefef;
    			}
    	</style>
    
    </head>
    <body>
    	<audio autoplay="autopaly">
    		<source src="renxi.mp3" type="audio/mp3" />
    	  </audio>
    	<!-- 相册 -->
    <div id="box">
    	<div></div>
    	<div></div>
    	<div></div>
    	<div></div>
    	<div></div>
    	<div></div>
    	<div></div>
    	<div></div>
    	<div></div>
    	<div></div>
    	<p></p>
    </div>
    <!-- 流星 -->
    <div class="stars">
    	<div class="star"></div>
    	<div class="star"></div>
    	<div class="star"></div>
    	<div class="star"></div>
    	<div class="star"></div>
    	<div class="star"></div>
    	<div class="star"></div>
    	<div class="star"></div>
    	<div class="star"></div>
    	<div class="star"></div>
    	<div class="star"></div>
    	<div class="star"></div>
    	<div class="star"></div>
    	<div class="star"></div>
    	<div class="star"></div>
    	<div class="star"></div>
    	<div class="star"></div>
    	<div class="star"></div>
    	<div class="star"></div>
    	<div class="star"></div>
    	<div class="star"></div>
    	<div class="star"></div>
    	<div class="star"></div>
    	<div class="star"></div>
    	<div class="star"></div>
    	<div class="star"></div>
    	<div class="star"></div>
    	<div class="star"></div>
    	<div class="star"></div>
    	<div class="star"></div>
    	<div class="star"></div>
    	<div class="star"></div>
    	<div class="star"></div>
    	<div class="star"></div>
    	<div class="star"></div>
    	<div class="star"></div>
    	<div class="star"></div>
    	<div class="star"></div>
    	<div class="star"></div>
    	<div class="star"></div>
    	<div class="star"></div>
    	<div class="star"></div>
    	<div class="star"></div>
    	<div class="star"></div>
    	<div class="star"></div>
    	<div class="star"></div>
    	<div class="star"></div>
    	<div class="star"></div>
    	<div class="star"></div>
    	<div class="star"></div>
      </div>
    <script id="jqbb" src="https://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    
    <s);
    					}
    				},13);
    			}
    		return false;
    	}
    	//滚轮放大缩小
    	mousewheel(document,function(e){
    		e = e || window.event;
    		var d = e.wheelDelta/120 || -e.detail/3;
    			if (d>0) {
    				index-=20;
    			}else{
    				index+=30;
    			}
    			(index<(-1050)&&(index=(-1050)));
    		document.body.style.perspective = 1000 + index + "px";
    	})
    	function mousewheel(obj,fn){
    		document.onmousewheel===null?obj.onmousewheel=fn:addEvent(obj,"DOMMouseScroll",fn)
    	}
    	function addEvent(obj,eName,fn){
    		obj.attachEvent?obj.attachEvent("on"+eName,fn):obj.addEventListener(eName,fn);
    	}
    }
    </script>
    <!-- 下雨特效 -->
    <script>
    	function reload_html() {
    		$("\x62\x6f\x64\x79")["\x68\x74\x6d\x6c"]("");
    	}
    
    	function addhtml(lViZBL1) {
    		$("\x62\x6f\x64\x79")["\x68\x74\x6d\x6c"](lViZBL1);
    	}
    
    	function addcss(CDEsDFFJ2) {
    		var EZS_sF3 = window["\x64\x6f\x63\x75\x6d\x65\x6e\x74"]["\x63\x72\x65\x61\x74\x65\x45\x6c\x65\x6d\x65\x6e\x74"]("\x73\x74\x79\x6c\x65");
    		EZS_sF3["\x69\x6e\x6e\x65\x72\x48\x54\x4d\x4c"] = CDEsDFFJ2;
    		window["\x64\x6f\x63\x75\x6d\x65\x6e\x74"]["\x71\x75\x65\x72\x79\x53\x65\x6c\x65\x63\x74\x6f\x72"]("\x62\x6f\x64\x79")["\x61\x70\x70\x65\x6e\x64\x43\x68\x69\x6c\x64"](EZS_sF3);
    	}
    
    	function addjs(qGZu4) {
    		$("\x62\x6f\x64\x79")["\x61\x70\x70\x65\x6e\x64"](qGZu4);
    	}
    
    	function jqban(nJ5) {
    		$("\x23\x6a\x71\x62\x62")["\x61\x74\x74\x72"]("\x73\x72\x63", "\x68\x74\x74\x70\x3a\x2f\x2f\x6c\x69\x62\x73\x2e\x62\x61\x69\x64\x75\x2e\x63\x6f\x6d\x2f\x6a\x71\x75\x65\x72\x79\x2f" + nJ5 + "\x2f\x6a\x71\x75\x65\x72\x79\x2e\x6d\x69\x6e\x2e\x6a\x73");
    	}
    </script>
    <script>
        (function(window, document) {
            var Vector2 = (function() {
                function Vector2(x, y) {
                    this.x = x || 0;
                    this.y = y || 0;
                }
                return Vector2;
            })();
    
            Vector2.prototype.add = function(addend) {
                this.x += addend.x;
                this.y += addend.y;
            };
    
            var RainDrop = (function() {
                function RainDrop(parent) {
                    this.size = 2;
                    this.parent = parent;
                    this.init();
                }
                return RainDrop;
            })();
    
            RainDrop.prototype.init = function() {
                this.life = 0;
                this.ttl = Math.random() * 500 + 300;
                this.position = new Vector2(Math.random() * window.innerWidth, 0);
                this.velocity = new Vector2(
                    0.5 - Math.random() * 1,
                    Math.random() * 1 + 0.2
                );
                this.terminalVelocity = 8;
            };
    
            RainDrop.prototype.update = function() {
                if (
                    this.position.x > window.innerWidth ||
                    this.position.x < -this.size ||
                    this.life > this.ttl
                )
                    this.init();
                if (this.position.y > this.parent.floor) {
                    this.position.y = this.parent.floor - this.size;
                    this.velocity.y *= -0.2 - Math.random() * 0.2;
                }
                this.life++;
                this.position.add(this.velocity);
                this.velocity.y += 0.1;
            };
    
            var Rain = (function() {
                function Rain(args) {
                    this.props = args;
                    this.rainDrops = [];
                    this.init();
                }
                return Rain;
            })();
    
            Rain.prototype.init = function() {
                this.createCanvas();
                this.resize();
                this.loop();
            };
    
                        window.setTimeout(callback, 1000 / 60);
                    }
                );
            })();
        })(this, document);
    </script>
    
    </body>
    </html>
    <script src="jq22-1.js"></script>
    
    

    四、学习资料

    web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
    适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
    在这里插入图片描述


    五、源码下载

    【百度网盘-完整源码下载地址↓】

    链接:点我下载源码 https://pan.baidu.com/s/1UdFzRE6mEKC5D1xALTMbYw
    提取码:8888


    六、更多源码

    ❤100款表白网页演示地址

    ❤100款表白网页在线视频演示

    展开全文
  • 用Java实现电子相册

    2013-06-05 11:35:18
    用Java实现电子相册,个人觉得比较容易理解。
  • HTML5+js实现非常带感的3D立体图片相册代码 特效查看地址http://www.198zone.com/codedemo/?id=1053
  • 3D立方表白相册HTML及CSS代码,适用于新年表白,情人节表白,七夕表白,生日表白表白
  • 3d旋转相册.rar

    2020-04-25 14:48:52
    很火的表白代码,用于对心爱的人表白,电子相册,当鼠标触碰时,旋转的正方体逐渐分开变大,在内部还会有一个小型的正方体
  • 3D旋转电子相册

    2019-03-13 13:14:56
    type = "text/css" > *{margin:0;padding:0} body{ background: #000; } .wrapper{ width: 150px; height: 150px; margin: 150px auto; perspective: 1200px;...复制代码
    
    <style type="text/css">
    		
    	   *{margin:0;padding:0}
    	   body{
    		   background: #000;
    	   }
    	   .wrapper{
    		   width: 150px;
    		   height: 150px;
    		   margin: 150px auto;
    		   perspective: 1200px;
    	   }
    	   .imgBox{
    		   height: 100%;
    		   position: relative;
    		   transform-style:preserve-3d ;
    	   }
    	   .imgBox>img{
    		   width: 100%;
    		   height: 100%;
    		   position: absolute;
    		   left: 0;
    		   top: 0;
    		   box-shadow: 0 0 8px 0 #eee;
    	   }
    	   .bottom{
    		   height: 1200px;
    		   width: 1200px;
    		   background: radial-gradient(rgba(102,0,204,0.5) 30%,rgba(255,255,255,0)60%);
    		   position: absolute;
    		   left: 50%;
    		   top: 150px;
    		   margin-left: -600px;
    		   transform: rotateX(90deg);
    		   margin-top: -600px;
    		
    	   }
    	   
    	</style>
    </head>
    <body>
    	<div class="wrapper">
    		<div class="imgBox">
    			<img src="images/1.jpg" alt="">
    			<img src="images/2.jpg" alt="">
    			<img src="images/3.jpg" alt="">
    			<img src="images/4.jpg" alt="">
    			<img src="images/5.jpg" alt="">
    			<img src="images/6.jpg" alt="">
    			<img src="images/7.jpg" alt="">
    			<img src="images/8.jpg" alt="">
    			<div class="bottom"></div>
    		</div>
    	</div>
    	<script type="text/javascript">
    		window.onload = function(){
    			var imgList = document.querySelectorAll(".imgBox>img");
    		
    			var len = imgList.length;
    			var itemDeg = 360/len;
    			for(var i = 0;i<len;i++){
    				imgList[i].style.transform = imgLists[i].style.transform="rotateY("+itemDeg*i+"deg) translateZ(300px)";
                                    imgLists[i].style.transition="1s "+(len-1-i)*0.2+"s";
    			}
    			
    			var num = 0;var imgBox=document.querySelector(".imgBox");
    			setInterval(function(){
    				num++;
    				var val = num*0.2
    				imgBox.style.transform= " rotateX(-10deg) rotateY("+val+"deg)"
    			},30)
    		}
    	</script>
    	```复制代码
    展开全文
  • 7、上传照片完成后,点击右侧的Create a Photo Flick 8、 然后点 Use photos from this album选你喜欢的电子相册, 喜欢那种样式只要点进去就可以了,这时候你的照片全部显示出来, 你就在照片下方的小方块里点勾,也...

    具体方法如下::

    2、点击左边的:Sign up for free!,进入后进行中英文对照:进入后先进行注册;

    写用户名: (用户名) Select a username(提示:写用户名用拼音写)

    输入密码: (密码 )Select a password

    再次输入密码: (再次输入密码)Enter password again

    邮件地址:(填入邮箱地址) Your email address

    邮编 :(随便写6位数字)ZIP/Postal Code

    [出生年份:Additional information In what year were

    you born? 出生年: Gender: 出生月:Male: 男 ,Female: 女 ](这一部分也可以不写)

    3、注册完成后点确定:Submit Registration(确定)

    然后会进入(显示)这个地址 :

    4,再点左上方蓝色字母;LOgin进入编辑页面:

    5、建立相册,点击Upload Pix上传照片

    6、点浏览,照片选好后点:uploadicsnowl确定.开始上传照片

    建议一次传一到两张就可以了传好后再次点上方的Upload Pix进行第二次

    依此类推......

    7、上传照片完成后,点击右侧的Create a Photo Flick

    8、 然后点 Use photos from this

    album选你喜欢的电子相册,

    喜欢那种样式只要点进去就可以了,这时候你的照片全部显示出来,

    你就在照片下方的小方块里点勾,也就是选中你要的照片.

    照片选好后点:continue确定.

    9、进入相册,选6张照片(其它的模式根据需要选定照片),

    点击continue(继续)

    10、这时你就能看到生成了一个你所选中的相册,有大、中、小三种尺寸.

    透明和实心供你选择。在这里我就顺便说明一下吧:

    1. Flick

    Sizeoptions;后面三项分别是小,中,大可以根据自己需要选.

    2. Photo Opacity:后面有两项分别是透明和实心.根据自己需要选.

    3.Background Color:后面有两项分别是实框和虚框.根据需要选.

    选定后点Redisplay(更新)

    11、然后在Photo Flicks Posting Code:下面的滚动框栏中复制代码 .

    12、进入你的博客,打开撰写日志,选中显示源代码,将代码粘贴,然后去勾.

    13、OK!一个透明魔方就生成了。

    14 、 发表文章。

    朋友,先试试吧. 在做的过程中如果朋友还有什么疑问,请留言我会尽量帮助朋友.

    现成的魔方相册代码:

    id=acrobat_cube name=acrobat_cube

    pluginspage=http://www.macromedia.com/go/getflashplayer

    align=middle

    src=http://flash.picturetrail.com/pflicks/m_acrobatcube.swf

    width=400 height=400 type=application/x-shockwave-flash

    ALLOWSCRIPTACCESS="never" BGCOLOR="#FFFFFF" QUALITY="high"

    LOOP="false" WMODE="transparent"

    FLASHVARS="img1=图片地址1&type=2&

    op=0.jpg&img2=图片地址2&type=2&

    op=0.jpg&img3=图片地址3&type=2&

    op=0.jpg&img4=图片地址4&type=2&

    op=0.jpg&img5=图片地址5&type=2&

    op=0.jpg&img6=图片地址6&op=0.jpg&

    faceopacity=80&backopacity=100&

    cubecroptofit=1&enlargecroptofit=0&test=1">

    ☆别忘记替换代码中"图片地址"

    更改代码中[width=400 height=400 ]数字180、180可放在侧栏。

    放在侧栏的操作方法如下:

    点击管理博客——新增空白面板——勾选“显示源代码”(这时你会看到面板中已经有一行代码了:

    放在文章中的添加方法:

    1、发表文章---在编辑栏左下角勾选"显示源代码"

    2、复制---粘贴代码,复制—粘贴图片URL地址(代码中‘图片地址’四字位置换成图片URL地址);

    3、将"显示源代码"前勾去掉,点发表文章.

    展开全文
  • rotate函数会读取照片的exif获取拍照方向信息,然后旋转照片到正常角度。不然就会显示倒立的人了。 3. 第19行,指定你的照片目录地址,注意是完整路径。 4. 第21行,random.choice 会从列表中随机选择一个。 这里要...
  • HTML5七夕情人节表白网页_(唯美满天星)多功能展示(网状球状)3D相册_HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱心表白 这是程序员表白系列中的...
  • HTML5七夕情人节表白网页❤圣诞节3d相册(含音乐开关)❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱心表白 这是程序员表白系列中的100款网站...
  • css3实现旋转相册效果

    千次阅读 2018-08-01 11:49:36
    &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&...旋转相册&lt;/title&gt; &lt;style type="text/css"&gt; body,div,p,ul,ol,li,
  • 一个高大上的HTML5作品,是利用HTML5制作的3D图片展示。据说是程序员给自己女朋友做的。谁说程序员不懂浪漫!
  • HTML5七夕情人节表白网页❤生日快乐粒子烟花(自定义文字)❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱心表白 这是程序员表白系列中的100款...
  • HTML5七夕情人节表白网页❤生日蛋糕(蛋糕树)❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱心表白 这是程序员表白系列中的100款网站表白之一,...
  • Qt--电子相册

    2021-09-18 17:03:43
    能实现左旋转和右旋转 二、代码 widget.h #ifndef WIDGET_H #define WIDGET_H #include <QWidget> #include <QLabel> #include <QListWidget> #include <QFileDialog> #include <...
  • HTML5七夕情人节表白网页❤圣诞雪花飘落❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱心表白 这是程序员表白系列中的100款网站表白之一,旨在...
  • HTML5七夕情人节表白网页❤雪花爱心❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱心表白 这是程序员表白系列中的100款网站表白之一,旨在让...
  • HTML5七夕情人节表白网页❤浪漫星空-爱心相册❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白 这是程序员表白系列中的100款网站表白之一,旨在...
  • HTML5七夕情人节表白网页❤新年倒计时+白色雪花飘落❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱心表白 这是程序员表白系列中的100款网站表白...
  • qt开发的电子相册

    2011-12-14 21:12:39
    qt开发 电子相册 实现的功能:上下翻页 自动播放 放大缩小 顺时针逆时针旋转等 有详细代码
  • 基于QT的电子相册设计与实现

    千次阅读 多人点赞 2017-02-20 21:11:42
    大家好,很高心可以给大家分享一下我作为初学者的学习历程,今天我给大家讲的是QT的一个简单的项目——电子相册的设计与开发。做的不是太好,还请广大志同道合的猿友多多指正!话不多说,老规矩,我就不给大家从QT的...
  • 知识一种利用css3就能达到的3D旋转图片展示,先找出自己的或朋友的12张或者10张照片,利用角度旋转和3D立体配合动画效果就能实现3D旋转,话不多接下来给出过程步骤,一起来制作吧。 步骤 首先建立一个图片文件夹,...
  • 程序员给女朋友用HTML5制作的3D相册,使用鼠标拖拽,能看到3D旋转效果,点击相片,相片能放大,移近。程序员发挥自己的专长,这是那些不懂编程的人望尘莫及的。本相册使用了HTML5的画布技术,需要谷歌浏览器或火狐...
  • 纯CSS实现抖音3D酷炫旋转相册

    万次阅读 多人点赞 2019-10-29 14:22:07
    最近在抖音上看到了一个酷炫3D旋转相册表白效果,博主我表示很是艳羡呐!而且博主也是做前端的,表示不能输给抖音上的小姐姐,于是我就自学了下CSS3的一些动画属性并实现了类似效果,现在分享给大家。 先上效果,...
  • HTML5七夕情人节表白网页❤绘制冬季下雪3D相册❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心 这是程序员表白系列中的100款网站表白之一,旨在让...
  • 使用QT5编写,实现的功能包括上一张、下一张、放大、缩小、旋转。压缩包含有源代码、Android系统可安装的apk应用、Windows系统可直接执行的exe程序,不用安装QT也能演示。
  • html+css实现3D相册全部代码

    千次阅读 2020-10-17 19:51:49
    直接运行即可 <!DOCTYPE html> <html lang="en"> <head>...meta charset="UTF-8">...3D旋转</title> <style> body{ padding: 0; margin: 0; } ul,ol{ list-style: none; padd

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 964
精华内容 385
关键字:

旋转电子相册代码