首页 > 编程札记 > 编程

HTML页面设计——动态照片环

阅读：评论：0

HTML页面设计——动态照片环

#前端开发

##html 超文本标记语言结构学习他的标签

##css 美化页面

其实一部分的网站首页应用了照片环的原理，使得页面看起来更加美观，这里为大家分享一个简单的照片环编写。

一、准备好以下素材：

二、新建一个HTML文件，这里就取名“01-照片环”好了。

三、现在开始编写具体内容，照片环说白了就是几个照片构成的所以body只要写<img>就可以了，编写的时候注意图片的格式是.jpg、.png还是.gif(动态图)。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><!-- 设置页面标题 --><title>照片环</title></head><body><!-- 页面所有内容 --><!-- 容器盒子 剧场 使用class属性取个名字--><div class="jc"><!-- 舞台 --><div class="stage"><!-- 演员 图片 img 单标签--><!-- 路径：相对路径 --><img class="img1" src="imgs/1.jpg" /><img class="img2" src="imgs/2.jpg" /><img class="img3" src="imgs/3.gif" /><img class="img4" src="imgs/4.jpg" /><img class="img5" src="imgs/5.jpg" /><img class="img6" src="imgs/6.jpg" /><img class="img7" src="imgs/7.jpg" /><img class="img8" src="imgs/8.jpg" /><img class="img9" src="imgs/9.jpg" /></div></div></body>
</html>

接下来我们编写CSS样式，这里就直接在<head>头标签里面加一个<style>样式标签就好。

<!-- 使用 style 标签 用来写CSS样式的 --><style>/* 这里面写样式 *//* 标签选择元素，设置样式 */body{/* 设置当前元素标签 背景颜色 */background-color: black;}/* 选择到剧场 class名字选择：在名字前面加一个 . 号*/.jc{/* 设置宽 */width:140px;/* 设置高 */height: 200px;/* 设置背景颜色 *//* background-color: pink; */border: 1px solid red;/* 设置到页面中间 *//* 两个值：第一个控制 上下，第二个值 控制的左右 */margin: 200px auto;    /* 设置景深 */perspective: 1000px;}/* 设置舞台 */.stage{/* 设置宽 */width:140px;/* 设置高 */height: 200px;/* background-color: orange; *//* 定位参照 */position: relative;/* 设置三维效果 */transform-style: preserve-3d;/* transform: rotateY(0deg); *//* 如果后续有相同属性值发生变化，要有动画效果的话，加过渡属性  单位s*/transition: 30s;}/* 使用标签选择器 */img{/* 设置宽 */width:140px;/* 设置高 */height: 200px;/* 定位把图片叠加一起 */position: absolute;left: 0px;top: 0px;/* 设置圆角 */border-radius: 10px;/* 设置边框 */border: 1px solid yellow;/* 设置阴影 */box-shadow: 0px 0px 10px yellow;/* 设置倒影 */-webkit-box-reflect: below 20px linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.3));}/* 设置不同的图片 */.img1{/* 先设置旋转 角度单位 deg  再移动 */transform: rotateY(40deg) translateZ(500px);}.img2{/* 先设置旋转 角度单位 deg  再移动 */transform: rotateY(80deg) translateZ(500px);}.img3{/* 先设置旋转 角度单位 deg  再移动 */transform: rotateY(120deg) translateZ(500px);}.img4{/* 先设置旋转 角度单位 deg  再移动 */transform: rotateY(160deg) translateZ(500px);}.img5{/* 先设置旋转 角度单位 deg  再移动 */transform: rotateY(200deg) translateZ(500px);}.img6{/* 先设置旋转 角度单位 deg  再移动 */transform: rotateY(240deg) translateZ(500px);}.img7{/* 先设置旋转 角度单位 deg  再移动 */transform: rotateY(280deg) translateZ(500px);}.img8{/* 先设置旋转 角度单位 deg  再移动 */transform: rotateY(320deg) translateZ(500px);}.img9{/* 先设置旋转 角度单位 deg  再移动 */transform: rotateY(0deg) translateZ(500px);}/* 鼠标移入  移入对象:hover   到舞台，进行旋转 */.stage:hover{/* 进行旋转 */transform: rotateY(360deg);}</style>

其实大家也都看得出来，图片的格式都是一个一个单独设置的，因为难点就在这里，旋转角度就要随着不断旋转、改变。

最后成图是这样的，鼠标左右滑动即可自动滑动图片。

好了，今天的分享就到这里，觉得喜欢的记得收藏点赞哦。

本文发布于:2024-01-29 08:44:40，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/170648908014082.html

上一篇：无印良品的中国式败退：背后的原因到底是什么？

下一篇：ai动态图片如何制作？教你动态照片怎么弄