怎么制作相册??求HTML代码

html-css026

怎么制作相册??求HTML代码,第1张

完整的代码如下:

<html>

<head>

<title>简单网页制作练习</title>

</head>

<body>

<p>1.文字内容,直接输入文字即可。。。。。如果想设置其相关属性可以使用font标签

<font

size="18"

color="red"

>红色18号文字</font>

</p>

<p>

2.添加图片

<img

src="图片名称.属性"

id=“图片简介”>

<img

src="1.jpg"

id="

加入图片练习">

</p>

</body>

</html>

用“印记工坊”在线制作的音乐相册,制作简单,版本精美,只要选模版,上传照片, 添加音乐就能轻松制作好,制作好以后转为mp4格式就能分享到手机微信上观看了。十分钟就可以快速制作好一款音乐相册,制作简单便捷,功能简单齐全,效果精美别致。

旋转index文件代码:

3D旋转相册

*{

padding:0

margin:0

}

body,

html{

height:100%

}

/*背景图片在这里设置*/

body{

background-image:url("images/beijing.jpg")

background-size:100%100%

}

#box{

width:280px

height:400px

position:fixed

left:0

right:0

top:0

bottom:0

margin:auto

transform-style:preserve-3d

transform:rotateX(0deg)rotateY(0deg)

animation:go45slinearinfinite

}

#boximg{

width:280px

height:400px

position:absolute

left:0

top:0

}

#boximg:nth-child(1){

transform:rotateY(0deg)translateZ(650px)

}

#boximg:nth-child(2){

transform:rotateY(36deg)translateZ(650px)

}

#boximg:nth-child(3){

transform:rotateY(72deg)translateZ(650px)

}

#boximg:nth-child(4){

transform:rotateY(108deg)translateZ(650px)

}

#boximg:nth-child(5){

transform:rotateY(144deg)translateZ(650px)

}

#boximg:nth-child(6){

transform:rotateY(180deg)translateZ(650px)

}

#boximg:nth-child(7){

transform:rotateY(216deg)translateZ(650px)

}

#boximg:nth-child(8){

transform:rotateY(252deg)translateZ(650px)

}

#boximg:nth-child(9){

transform:rotateY(288deg)translateZ(650px)

}

#boximg:nth-child(10){

transform:rotateY(324deg)translateZ(650px)

}

@keyframesgo{

0%{

transform:rotateX(0deg)rotateY(0deg)

}

25%{

transform:rotateX(20deg)rotateY(180deg)

}

50%{

transform:rotateX(0deg)rotateY(360deg)

}

75%{

transform:rotateX(-20deg)rotateY(540deg)

}

100%{

transform:rotateX(0deg)rotateY(720deg)

}

}

images/1.jpg

images/2.jpg

images/3.jpg

images/4.jpg

images/5.jpg

images/6.jpg

images/7.jpg

images/8.jpg

images/9.jpg

images/10.jpg