这是程序猿使用前端代码制作的小浪漫,可用于公司海报宣传,单位文明宣传等,也可以用于向别人展示自己的获奖证书实习经历等,也可以用来显示自己的浪漫!
需要注意的点:
- 1.首先是image的整理,以个人实际开发经验来看,方方正正的照片做出来的效果比较好,我们可以挑选出来十几张照片,除了实际应用的照片外,留一些备用照片以防自己希望随时更换照片.
- 2.其次是在html中的盒子的大小和尺寸的构建,以实际情况看自己需要放几张照片来调整盒子的大小(一个大的盒子里放几个小的盒子),一般需要先固定一个大盒子,给大盒子一个尺寸,然后根据大盒子的尺寸去均分想要插入的盒子的数量,设置盒子的浮动方式即可.
- 3.将每个盒子的内外边距调整合适,这个是调整盒子和盒子之间的距离,为了美观需要不断的进行尝试.
建议:
如果我们是自己做相册来玩的话,我们可以使用内嵌的CSS,因为我们需要做的东西并不复杂,但是如果是用来为公司宣传之类的,建议使用外来引入的CSS文件,便于大家修改以及HTML页面整齐.对于相同CSS起源来说，不同位置的样式其优先级也是不同的。一般来说，行内样式会优先于内嵌样式表，内部样式表会优先于外部样式表。而被附加了！important关键字的声明会拥有最高的优先级。
CSS三种样式的介绍:
- 外部样式：外部样式与HTML代码分离，单独存放在.css文件中。使用时通过link标签将此文件引入到页面中，引入的格式为：<link type="text/css" rel="stylesheet" href=".css文件的地址"/>
- 内部样式：内部样式使用<style>标签将CSS代码包裹起来，并放入<head>标签中(一般存放在head中，也可存放于别处，如body中)，格式为：<style> </style>
- 内联样式： 内联样式定义在dom元素的style属性中，格式为：<div style=""> </div>
以上三种样式类型的优先级为：
内联样式 > 内部样式 > 外部样式
下面解释一些具体的语句含义:
<meta charset="UTF-8" /> ：这句话的含义是，设置网页编码为utf-8，确保中文可以正常显示。
<body> </body> ： 在body区域里面添加dom元素，也就是一个网页的主题框架。比如div，p，a标签等，就是放在这个部分的。
<title>相信光的奥特王小懒的3D旋转相册</title>: 这是网页顶部展示的网页的名称
background-image: 背景图片的设置,通过url从本地或者网页上输入图片的地址
我们画一个id为box的div作为相框来装载所有的图片
<divid="box">
我们需要使用css语句来给div进行修饰。
#box{width: 200px; 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; }
针对如何实现3D效果呐,我们需要加上如下语句:
transform-style: preserve-3d;
以下是总的实现代码:
<!DOCTYPEhtml> <html> <headlang="en"> <metacharset="UTF-8"/> <title>相信光的奥特王小懒的3D旋转相册</title> <styletype="text/css"> *{padding: 0; margin: 0;} body,html{height:100%;} body{background-image: url("images/beijing.jpg");background-size: 100%100%;} #box{width: 200px; 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: 250px; height: 250px; position: absolute; left: 0; top: 0; } #boximg:nth-child(1){ transform: rotateY(0deg) translateZ(500px);} #boximg:nth-child(2){ transform: rotateY(36deg) translateZ(500px);} #boximg:nth-child(3){ transform: rotateY(72deg) translateZ(500px);} #boximg:nth-child(4){ transform: rotateY(108deg) translateZ(500px);} #boximg:nth-child(5){ transform: rotateY(144deg) translateZ(500px);} #boximg:nth-child(6){ transform: rotateY(180deg) translateZ(500px);} #boximg:nth-child(7){ transform: rotateY(216deg) translateZ(500px);} #boximg:nth-child(8){ transform: rotateY(252deg) translateZ(500px);} #boximg:nth-child(9){ transform: rotateY(288deg) translateZ(500px);} #boximg:nth-child(10){ transform: rotateY(324deg) translateZ(500px);} @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);} } </style> </head> <body> <divid="box"> <imgsrc="images/1.jpg"> <imgsrc="images/2.jpg"> <imgsrc="images/3.jpg"> <imgsrc="images/4.jpg"> <imgsrc="images/5.jpg"> <imgsrc="images/6.jpg"> <imgsrc="images/7.jpg"> <imgsrc="images/8.jpg"> <imgsrc="images/9.jpg"> <imgsrc="images/10.jpg"> </div> </body> </html>
注意:这是经过马赛克后的照片,只是为了让大家看清轮廓
