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

腰痛也要站着说话

已于 2023-06-18 11:04:54 修改

阅读量1.6k

点赞数 5

文章标签：前端 html css Powered by 金山文档

于 2023-01-15 20:32:19 首次发布

本文链接：https://blog.csdn.net/Karid/article/details/128697266

版权

#前端开发

##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>

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

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