精华内容
下载资源
问答
  • 动态电子相册

    2018-08-06 14:51:51
    动态电子相册(毕业季动态电子相册PPT模板)
  • 这是一套动态电子相册产品图片切换展示PPT动画,第一PPT模板网提供幻灯片动画免费下载; PPT动画首页简洁,PPT动画内容页面包含一些列的产品图片,是一套动态电子相册;本套PPT动画可以用作切换展示PPT动画,你可以...
  • 父亲节动态电子相册PPT_精美学习课件ppt
  • 这是一套动态电子相册产品图片切换展示PPT动画,第一PPT模板网提供幻灯片动画免费下载; PPT动画首页简洁,PPT动画内容页面包含一些列的产品图片,是一套动态电子相册;本套PPT动画可以用作切换展示PPT动画,你可以...
  • 小清新动态电子相册PPT模板2
  • 毕业季动态电子相册PPT模板2
  • 动态电子相册产品图片切换展示PPT动画下载
  • 小清新动态电子相册PPT模板。一套小清新动态电子照片相册幻灯片模板。建议安装字体:经典行书简、方正启体简体。
  • 毕业季动态电子相册PPT模板。一套电子照片相册模板,适合制作学生毕业照片相册。使用字体:汉仪喵魂体W。
  • <!DOCTYPE html> 相册 img{width:420px;height:580px;} div{
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>相册</title>
            <style type="text/css">
                img{width:420px;height:580px;}
                div{    
                    width:420px;
                    height:580px;
                    position:absolute;
                    left:0;top:0;right:0;bottom:0;
                    margin:auto;
                    transform-style: preserve-3d;
                    transition: all 12s;
                    background:url(../img/img2.jpg);
                    background-size: 100% 100%;
                }
                div img{
                    position: absolute;
                }
                div img:nth-child(1){transform: translateZ(500px);}
                div img:nth-child(2){transform: rotateY(60deg) translateZ(500px) ;}
                div img:nth-child(3){transform: rotateY(120deg) translateZ(500px) ;}
                div img:nth-child(4){transform: rotateY(180deg) translateZ(500px) ;}
                div img:nth-child(5){transform: rotateY(240deg) translateZ(500px) ;}
                div img:nth-child(6){transform: rotateY(300deg) translateZ(500px) ;}
                div:hover{
                    transform: rotateY(720deg) rotateX(45deg);
                }
            </style>
        </head>
        <body bgcolor="#808080">
            <div>
                <img src="../img/img1.jpg" alt="" />
                <img src="../img/xiaohai.jpg" alt="" />
                <img src="../img/img3.jpg" alt="" />
                <img src="../img/img4.jpg" alt="" />
                <img src="../img/img5.jpg" alt="" />
                <img src="../img/img6.jpg" alt="" />
            </div>
            <audio src="../img/gaobaiqiqiu.mp3" autoplay="autoplay" loop="loop"></audio>
        </body>
    </html>
    

    把自己的英文相册照片 和 背景音乐加在相应位置就行了,注意音乐不能以中文开头,最好是英文

    展开全文
  • 解压执行make可编译,基于ARM平台的电子相册实现源码,含带jpeg和freetype动态库,代码涉及大量指针操作、大量链表操作、framebuffer屏显、目录/文件检测、字体编解码、图片编解码操作,Makefile文件也可做其他...
  • 一个利用picturebox做预览的电子相册.实现动态加载
  • 用网页作一个电子相册放到网站上是相当的漂亮,下面给大家详细的讲解一下如何实现的
  • 电子相册 结婚相册制作 动态相册制作 flash相册 动画
  • 用Java实现电子相册

    2013-06-05 11:35:18
    用Java实现电子相册,个人觉得比较容易理解。
  • 软件可以方便的将您的照片、视频等加入音乐制作成动态电子相册,并可对电子相册设置密码,软件还提供了丰富多彩的特效、动态场景、3D场景等,使相册中不仅可以加入普通照片、文字、图片、动画等,还可以在相册任意...
  • 艾奇4.71电子相册制作软件,可把图片,视频等制作成自己想要的动态文件,带破解补丁,放在安装目录执行就可以。
  • 《艾奇KTV电子相册视频制作软件》是一款功能超强的电子相册和卡拉OK视频制作软件。 可以把您的照片和视频配上音乐和歌词字幕,制作成各种格式的视频电子相册。 只需简单的3步操作,就能输出DVD、VCD、MP4、AVI、FLV...
  • 本项目是一套基于JavaWeb的电子相册/网络相册管理系统,主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的Java学习者。 包含:项目源码、数据库脚本、软件工具、项目说明等,该项目可以直接作为毕设...
  • 这是一套时尚欧美人物电子相册PPT模板,共36张; 幻灯片模板使用了美女模特图片进行制作。电子相册封面,放置了两张人物照片作为背景图片。中间放置白色矩形文本框填写相册标题。 PowerPoint模板内容页,由多张人物...
  • 清新杂志画册风植物电子相册PPT模板,共25页; PPT模板使用了画册风制作,PPT封面摆放了额植物鲜花PPT背景图片,和电子相册标题等。界面清新文艺。...本模板适合用于制作各类动态电子相册PPT。.PPTX格式;
  • 动态交互式电子相册
  • 绝对可以用的电子相册 flex 电子相册 动态显示 java
  • 艾奇KTV电子相册制作是一款功能超强的电子相册和卡拉OK视频制作软件。 可以把您的照片和视频配上音乐和歌词字幕,制作成各种格式的视频电子相册。 只需简单的3步操作,就能输出DVD、VCD、MP4、AVI、FLV、iPad、...
  • 情人节、纪念日、表白网页设计 HTML+JS 可自定义表白语言及背景音乐。 可自定义修改样式及其他。
  • 这是一个大学生《青春纪念册》PPT电子相册,共9张。第一PPT模板网提供精美校园相关幻灯片模板免费下载; 关键词:青春纪念册PPT下载,炫酷动态PPT电子相册模板,.PPTX格式;
  • html+css实现多种动态相册

    万次阅读 多人点赞 2019-07-21 16:45:53
    电子相册 全屏背景切换 照片墙 百叶窗 3d照片墙 立方体相册 代码

    电子相册

    原理:由a标签的锚点进行图片上的切换,左侧大图用verflow: hidden进行隐藏,右侧小图用overflow: scroll进行显示。
    HTML:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<link rel="stylesheet" type="text/css" href="../css/ElectronAlbum.css"/>
    	</head>
    	<body>
    		<div class="box">
    			<h1>电子相册</h1>
    			<ul class="list1">
    				<li><img src="../img/danji.jpg" id="img1"></li>
    				<li><img src="../img/dianwei.jpg" id="img2"></li>
    				<li><img src="../img/diaochan.jpg" id="img3"></li>
    				<li><img src="../img/lanlinwang.jpg" id="img4"></li>
    				<li><img src="../img/luban.jpg" id="img5"></li>
    				<li><img src="../img/zhaoyun.jpg" id="img6"></li>
    				<li><img src="../img/zhugeliang.jpg" id="img7"></li>
    				<li><img src="../img/kai.jpg" id="img8"></li>
    			</ul>
    			<ul class="list2">
    				<li><a href="#img1"><img src="../img/danji.jpg"></a></li>
    				<li><a href="#img2"><img src="../img/dianwei.jpg"></a></li>
    				<li><a href="#img3"><img src="../img/diaochan.jpg"></a></li>
    				<li><a href="#img4"><img src="../img/lanlinwang.jpg"></a></li>
    				<li><a href="#img5"><img src="../img/luban.jpg"></a></li>
    				<li><a href="#img6"><img src="../img/zhaoyun.jpg"></a></li>
    				<li><a href="#img7"><img src="../img/zhugeliang.jpg"></a></li>
    				<li><a href="#img8"><img src="../img/kai.jpg"></a></li>
    			</ul>
    		</div>
    	</body>
    </html>
    

    CSS

    * {
    	margin: 0;
    	padding: 0;
    }
    
    body {
    	background: #333;
    }
    
    li {
    	list-style: none;
    }
    
    h1 {
    	text-align: center;
    	height: 50px;
    	line-height: 50px;
    	color: #FFFFFF;
    }
    .box{
    	width: 660px;
    	height: 320px;
    	margin: 200px auto;
    	border: 5px solid white;
    	box-shadow: 0px 0px 10px black;
    }
    .list1,.list2{
    	float: left;
    }
    .list1{
    	width: 480px;
    	height: 270px;
    	overflow: hidden;
    }
    .list2{
    	width: 180px;
    	height: 270px;
    	overflow: scroll;
    }
    .list1 img{
    	width: 480px;
    	height: 270px;
    }
    .list2 img{
    	width: 160px;
    	height: 90px;
    }
    

    全屏背景切换

    原理:和电子相册类似用a标签进行图片的切换,设置图片原来的位置以及点击a标签后的:target属性,设置动画效果。
    HTML:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>FullPhoto</title>
    		<link rel="stylesheet" type="text/css" href="../css/FullPhoto.css"/>
    	</head>
    	<body>
    		<div class="box">
    			<img src="../img/dianwei.jpg" id="img1">
    			<img src="../img/diaochan.jpg" id="img2">
    			<img src="../img/lanlinwang.jpg" id="img3">
    			<img src="../img/sunshangxiang.jpg" id="img4">
    			<img src="../img/luban.jpg" id="img5">
    		</div>
    		<div class="list">
    			<ul>
    				<li><a href="#img1"><img src="../img/dianwei.jpg"></a></li>
    				<li><a href="#img2"><img src="../img/diaochan.jpg"></a></li>
    				<li><a href="#img3"><img src="../img/lanlinwang.jpg"></a></li>
    				<li><a href="#img4"><img src="../img/sunshangxiang.jpg"></a></li>
    				<li><a href="#img5"><img src="../img/luban.jpg"></a></li>
    			</ul>
    		</div>
    	</body>
    </html>
    

    CSS:

    * {
    	margin: 0;
    	padding: 0;
    }
    
    .box {
    	width: 100%;
    	height: 100%;
    }
    
    .box img {
    	width: 100%;
    	height: 100%;
    	position: fixed;
    	transition: all 1s linear;
    }
    
    .list {
    	position: absolute;
    	z-index: 999;
    	width: 1000px;
    	height: auto;
    	bottom: 20px;
    	left: 0;
    	right: 0;
    	margin: auto;
    }
    
    .list li {
    	list-style: none;
    	width: 130px;
    	height: 130px;
    	border: 5px solid lightskyblue;
    	float: left;
    	margin-left: 60px;
    	overflow: hidden;
    	border-radius: 50%;
    
    }
    
    .list li img {
    	width: 200%;
    }
    
    .box img:nth-child(1) {
    	opacity: 0;
    	left: -100%;
    }
    
    .box img:nth-child(1):target {
    	z-index: 1;
    	opacity: 1;
    	left: 0;
    }
    
    .box img:nth-child(2) {
    	top: -100%;
    }
    
    .box img:nth-child(2):target {
    	z-index: 1;
    	transform: rotate(360deg);
    	top: 0;
    }
    
    .box img:nth-child(3) {
    	opacity: 0;
    	right: -100%;
    }
    
    .box img:nth-child(3):target {
    	z-index: 1;
    	opacity: 1;
    	right: 0;
    }
    
    .box img:nth-child(4) {
    	bottom: -100%;
    }
    
    .box img:nth-child(4):target {
    	z-index: 1;
    	transform: rotate(360deg);
    	bottom: 0;
    }
    
    .box img:nth-child(5) {
    	opacity: 0;
    }
    
    .box img:nth-child(5):target {
    	z-index: 1;
    	opacity: 1;
    	transform: rotate(360deg);
    }
    

    照片墙

    原理:利用悬浮属性,使鼠标悬浮在上面的图片进行相应的变化
    版本1:
    HTML:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>PhotoWall1</title>
    		<link rel="stylesheet" type="text/css" href="../css/PhotoWall1.css"/>
    	</head>
    	<body>
    		<ul>
    			<li><img src="../img/danji.jpg" ></li>
    			<li><img src="../img/dianwei.jpg" ></li>
    			<li><img src="../img/diaochan.jpg" ></li>
    			<li><img src="../img/sunshangxiang.jpg" ></li>
    			<li><img src="../img/sunwukong.jpg" ></li>
    			<li><img src="../img/luban.jpg" ></li>
    			<li><img src="../img/lanlinwang.jpg" ></li>
    			<li><img src="../img/kai.jpg" ></li>
    			<li><img src="../img/donghuang.jpg" ></li>
    		</ul>
    	</body>
    </html>
    

    CSS:

    * {
    	margin: 0;
    	padding: 0;
    }
    
    body {
    	background-color: #333;
    }
    
    ul {
    	width: 1020px;
    	height: 600px;
    	border: white solid 5px;
    	margin: 60px auto;
    	box-shadow: 0px 0px 10px #ccc;
    }
    
    li {
    	width: 320px;
    	height: 180px;
    	list-style: none;
    	float: left;
    	margin: 10px;
    	/* x y 扩散程度 阴影颜色*/
    	box-shadow: 0px 0px 10px white;
    }
    
    img {
    	width: 100%;
    	height: 100%;
    }
    
    img:hover {
    	width: 150%;
    	height: 150%;
    	position: relative;
    	top: -40px;
    	left: -40px;
    }
    
    

    版本2:
    HTML:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>PhotoWall2</title>
    		<link rel="stylesheet" type="text/css" href="../css/PhotoWall2.css" />
    	</head>
    	<body>
    		<div class="box">
    			<img src="../img/danji.jpg">
    			<img src="../img/dianwei.jpg">
    			<img src="../img/diaochan.jpg">
    			<img src="../img/sunshangxiang.jpg">
    			<img src="../img/sunwukong.jpg">
    			<img src="../img/luban.jpg">
    			<img src="../img/lanlinwang.jpg">
    			<img src="../img/kai.jpg">
    			<img src="../img/donghuang.jpg" >
    		</div>
    	</body>
    </html>
    

    CSS:

    * {
    	margin: 0;
    	padding: 0;
    }
    
    body {
    	background: url(../img/wbg.png);
    }
    .box{
    	width: 1000px;
    	margin: 0px auto;
    	margin-top: 100px;
    }
    .box img {
    	width: 320px;
    	height: 180px;
    	border: 5px solid azure;
    	box-shadow: -10px -10px 10px black;
    	transition: all 0.3s linear;
    }
    
    img:nth-child(odd) {
    	transform: rotate(20deg);
    }
    
    img:nth-child(even) {
    	transform: rotate(-20deg);
    }
    
    img:hover {
    	transform: scale(1.3);
    	position: relative;
    	z-index: 2;
    }
    

    百叶窗

    原理:当鼠标悬浮在ul标签上,所有li标签变小,悬浮的li标签变大,添加css变化动画
    HTML:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>WindowShades</title>
    		<link rel="stylesheet" type="text/css" href="../css/WindowShades.css"/>
    	</head>
    	<body>
    		<div class="box">
    			<ul>
    				<li><img src="../img/danji.jpg" ></li>
    				<li><img src="../img/dianwei.jpg" ></li>
    				<li><img src="../img/diaochan.jpg" ></li>
    				<li><img src="../img/kai.jpg" ></li>
    				<li><img src="../img/lanlinwang.jpg" ></li>
    			</ul>
    		</div>
    	</body>
    </html>
    

    CSS:

    *{
    	margin: 0;
    	padding: 0;
    }
    body{
    	background: url(../img/wbg.png);
    }
    .box{
    	width: 800px;
    	height: 360px;
    	margin: 200px auto;
    	/*溢出部分隐藏*/
    	overflow: hidden;
    }
    .box img{
    	width: 640px;
    	height: 360px;
    }
    li{
    	list-style: none;
    	width: 155px;
    	height: 360px;
    	float: left;
    	border-left: 5px solid white;
    	box-shadow: -5px 0px 10px black;
    	transition: all 0.5s linear;
    }
    /*鼠标悬浮在ul上,让ul变小*/
    .box ul:hover li{
    	width: 35px;
    }
    /*鼠标悬浮到某个li上,让li变大*/
    .box ul li:hover{
    	width: 635px;
    }
    

    3d照片墙

    原理:将图片以绝对定位的方式放在父容器内(目的是使图片重叠在一起),将每张图片旋转对应的角度(360°均分),向z轴平移适合的距离。类似于一群人想要排成一个圆圈,则需要每个人平均转向不同的方向,然后向前走出一段距离。向父容器添加旋转动画,使所有照片旋转起来。
    HTML:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>3dPhoto</title>
    		<link rel="stylesheet" type="text/css" href="../css/3dPhoto.css"/>
    	</head>
    	<body>
    		<div class="show">
    			<div class="box">
    				<img src="../img/zhugeliang.jpg" >
    				<img src="../img/sunwukong.jpg" >
    				<img src="../img/diaochan.jpg" >
    				<img src="../img/libai.jpg" >
    				<img src="../img/zhaoyun.jpg" >
    				<img src="../img/donghuang.jpg" >
    				<img src="../img/dianwei.jpg" >
    				<img src="../img/kai.jpg" >
    				<img src="../img/lanlinwang.jpg" >
    				<img src="../img/sunshangxiang.jpg" >
    			</div>
    		</div>
    	</body>
    </html>
    

    CSS:

    * {
    	margin: 0;
    	padding: 0;
    }
    
    body {
    	background: url(../img/wbg.png);
    }
    
    
    .box {
    	width: 320px;
    	height: 200px;
    	position: absolute;
    	top: 0;
    	bottom: 0;
    	left: 0;
    	right: 0;
    	margin: auto;
    	transform-style: preserve-3d;
    	animation: im 20s linear infinite;
    }
    
    .box img {
    	width: 100%;
    	height: 100%;
    	position: absolute;
    }
    
    @keyframes im{
    	0% {
    		transform: rotateY(0deg) rotateX(10deg);
    	}
    
    	25% {
    		transform: rotateY(90deg) rotateX(-10deg);
    	}
    
    	50% {
    		transform: rotateY(180deg) rotateX(10deg);
    	}
    
    	75% {
    		transform: rotateY(270deg) rotateX(-10deg);
    	}
    
    	100% {
    		transform: rotateY(360deg) rotateX(10deg);
    	}
    
    }
    
    /*10张图片3d变换*/
    .box img:nth-child(1) {
    	transform: rotateY(0deg) translateZ(600px);
    	backface-visibility: visible;
    }
    
    .box img:nth-child(2) {
    	transform: rotateY(36deg) translateZ(600px);
    	backface-visibility: visible;
    }
    
    .box img:nth-child(3) {
    	transform: rotateY(72deg) translateZ(600px);
    	backface-visibility: visible;
    }
    
    .box img:nth-child(4) {
    	transform: rotateY(108deg) translateZ(600px);
    	backface-visibility: visible;
    }
    
    .box img:nth-child(5) {
    	transform: rotateY(144deg) translateZ(600px);
    	backface-visibility: visible;
    }
    
    .box img:nth-child(6) {
    	transform: rotateY(180deg) translateZ(600px);
    	backface-visibility: visible;
    }
    
    .box img:nth-child(7) {
    	transform: rotateY(216deg) translateZ(600px);
    	backface-visibility:visible;
    }
    
    .box img:nth-child(8) {
    	transform: rotateY(252deg) translateZ(600px);
    	backface-visibility: visible;
    }
    
    .box img:nth-child(9) {
    	transform: rotateY(288deg) translateZ(600px);
    	backface-visibility: visible;
    }
    
    .box img:nth-child(10) {
    	transform: rotateY(324deg) translateZ(600px);
    	backface-visibility: visible;
    }
    

    立方体相册

    原理:将ul下6个li标签进行绝对定位,6个li标签分别转向6个方向,向Z轴的两个方向扩展立方体边长的一半。
    HTML:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>cube</title>
    		<link rel="stylesheet" type="text/css" href="../css/cube.css"/>
    	</head>
    	<body>
    		<ul>
    			<li></li>
    			<li></li>
    			<li></li>
    			<li></li>
    			<li></li>
    			<li></li>
    		</ul>
    	</body>
    </html>
    

    CSS:

    * {
    	margin: 0;
    	padding: 0;
    }
    
    body {
    	background: #333;
    }
    
    ul {
    	width: 300px;
    	height: 300px;
    	position: absolute;
    	top: 0;
    	bottom: 0;
    	left: 0;
    	right: 0;
    	margin: auto;
    	/*3d空间*/
    	transform-style: preserve-3d;
    	animation: box 20s linear infinite;
    }
    
    @keyframes box {
    
    	/*3d旋转 x y z deg*/
    	from {
    		transform: rotate3d(0, 0, 0, 0deg);
    	}
    
    	to {
    		transform: rotate3d(1, 1, 1, 360deg);
    	}
    }
    
    li {
    	width: 300px;
    	height: 300px;
    	list-style: none;
    	border: 1px solid black;
    	position: absolute;
    	opacity: 0.8;
    	box-shadow: 0px 0px 10px white;
    }
    
    li:nth-child(1) {
    	background: url(../img/danji.jpg);
    	background-position: center;
    	background-size: cover;
    	transform: translateZ(150px);
    }
    
    /*后*/
    li:nth-child(2) {
    	background: url(../img/donghuang.jpg);
    	background-position: center;
    	background-size: cover;
    	transform: translateZ(-150px);
    }
    
    /*左*/
    li:nth-child(3) {
    	background: url(../img/luban.jpg);
    	background-position: center;
    	background-size: cover;
    	transform: rotateY(90deg) translateZ(-150px);
    }
    
    /*右*/
    li:nth-child(4) {
    	background: url(../img/libai.jpg);
    	background-position: center;
    	background-size: cover;
    	transform: rotateY(90deg) translateZ(150px);
    }
    
    /*上*/
    li:nth-child(5) {
    	background: url(../img/kai.jpg);
    	background-position: center;
    	background-size: cover;
    	transform: rotateX(90deg) translateZ(150px);
    }
    
    li:nth-child(6) {
    	background: url(../img/sunwukong.jpg);
    	background-position: center;
    	background-size: cover;
    	transform: rotateX(90deg) translateZ(-150px);
    }
    
    ul:hover {
    	animation-play-state: paused;
    }
    

    代码

    GitHub

    展开全文
  • 那么,你想不想用那些你还满意的照片,自己制作一个电子相册呢?   PocoMaker(魅客)是一款完全免费的电子杂志制作工具。他可以制作电子相册、电子杂志、电子读物等多种个性电子读物。运用他,花上5分钟,你可以将...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,300
精华内容 1,320
关键字:

动态电子相册