前端18、19天--景深、背面不可见、正方体、浮动布局、列表布局、双飞翼布局、固比固、圣杯、flex布局项目

最新推荐文章于 2021-12-03 08:29:51 发布
最新推荐文章于 2021-12-03 08:29:51 发布
阅读量231 收藏 1
点赞数
分类专栏： CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a444477/article/details/116167299
版权

前端18、19天–景深、背面不可见、正方体、浮动布局、列表布局、双飞翼布局、固比固、圣杯、flex布局项目

景深

在这里插入图片描述

在这里插入图片描述

<style>
        .container {
            /* transform-style: preserve-3d; */
            perspective: 1000px;
            /* transform: rotateY(30deg); */
            width: 300px;
            height: 120px;
            border: 5px solid black;
        }
        /* 垂直屏幕方向，向用户移动300px */
        img {
            width: 300px;
            height: 120px;
            /* transform: translateZ(300px); */
        }
        .img1 {
            /* transform: translateZ(100px); */
            transform: rotateY(50deg);
            
        }

        .img2 {
            /* transform: translateZ(-100px); */
            transition: all 1s;
        }
        .img2:hover {
            transform:rotateX(180deg);
        }
    </style>
</head>
<body>
    <div class="container">
        <img class="img1" src="../../pic/3.png" alt="">
        <img class="img2" src="../../pic/4.png" alt="">
    </div>
</body>

背面不可见

在这里插入图片描述

图片翻转，背面不可见

.img2:hover {
            transform: rotateX(180deg);
        }
        .img1 {
            transform: rotateX(180deg);
            transition: all 1s;
        }

正方体

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            position: relative;
            margin: 200px auto;
            transform-style: preserve-3d;
            /* perspective: 1000px; */
            /* 给容器一个角度，就可以看到正放心各个面的位置 */
            transform: rotate3d(1,1,0,-40deg);
        }
        .box {
            width: 300px;
            height: 300px;
            font-size: 50px;
            color: white;
            margin: 0 auto;
            position: absolute;
            left: calc(50% - 300px/2);
            border: 2px solid black;
        }
        .box1 {
            background-color: pink;
            transform:translateZ(150px);
        }
        .box2 {
            background-color: red;
            transform: translateX(-150px) rotate3d(0,1,0,-90deg);
            /* 后面的transform会将前面的覆盖掉，所以旋转和位移要写在同一行 */
            /* transform: rotate3d(0,1,0,90deg); */
        }
        .box3 {
            background-color: skyblue;
            transform: translateY(150px) rotate3d(1,0,0,-90deg);
        }
        .box4 {
            background-color: black;
            transform: translateX(150px) rotate3d(0,1,0,90deg);
        }
        .box5 {
            background-color: burlywood;
            transform: translateY(-150px) rotate3d(1,0,0,90deg);
        }
        .box6 {
            background-color: chocolate;
            transform:translateZ(-150px) rotate3d(1,0,0,180deg)
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
        <div class="box box4">4</div>
        <div class="box box5">5</div>
        <div class="box box6">6</div>
    </div>
</body>

浮动布局

在这里插入图片描述

<style>
        .top {
            height: 50px;
            background-color: red;
        }

        /* .content {
            height: 600px;
            background-color: yellow;
        } */

        .container {
            width: 70%;
            height: 700px;
            margin: 0 auto;
            background-color: yellow;
            overflow: hidden;
        }

        .info {
            height: 100%;
            width: 40%;
            background-color: skyblue;
            float: left;
        }
        .slider {
            height: 100%;
            width: 60%;
            background-color: gold;
            float: left;
        }
        .fl {
            height: 70%;
            width: 95%;
            background-color: green;
            float: right;
        }
        .footer {
            height: 50px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="top"></div>

    <div class="content">
        <div class="container">
            <div class="info"></div>
            <div class="slider">
                <div class="fl"></div>
            </div>
        </div>
    </div>

    <div class="footer"></div>
</body>

列表布局

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        .u{
            /* 想要li前面没有缩进，就要清除padding的默认值 */
            width: 800px;
            height: 1000px;
            overflow: hidden;
            background-color: pink;
            border: 1px solid black;
        }
        .l {
            width: 150px;
            height: 150px;
            background-color: green;
            font-size: 50px;
            color: white;
            text-align: center;
            line-height: 150px;
            float: left;
            margin: 10px 10px 10px 0px;
        }
    </style>
</head>
<body>
    <div class="container">
        <ul class="u">
            <li class="l l1">1</li>
            <li class="l l2">2</li>
            <li class="l l3">3</li>
            <li class="l l4">4</li>
            <li class="l l5">5</li>
            <li class="l l6">6</li>
            <li class="l l7">7</li>
            <li class="l l8">8</li>
            <li class="l l9">9</li>
            <li class="l l10">10</li>
            <li class="l l11">11</li>
            <li class="l l12">12</li>
            <li class="l l13">13</li>
            <li class="l l14">14</li>
            <li class="l l15">15</li>
            <li class="l l16">16</li>
            <li class="l l17">17</li>
            <li class="l l18">18</li>
            <li class="l l19">19</li>
            <li class="l l20">20</li>
        </ul>
    </div>
</body>

双飞翼布局

双飞翼center有个父元素是浮动的
固比固比较快
在这里插入图片描述

<style>
        .container {
            width: 60%;
            height: 500px;
            float: left;
            margin-left: 20%;
        }
        .center {
            height: 500px;
            margin: 0px 200px;
            background-color: skyblue;
        }

        .left {
            float: left;
            width: 200px;
            height: 500px;
            margin-left: -60%;
            background-color: pink;
        }
        .right {
            float: left;
            width: 200px;
            height: 500px;
            margin-left: -200px;
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="center"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</body>

固比固

在这里插入图片描述

<style>
        .left {
            width: 200px;
            height: 500px;
            background-color: skyblue;
            float: left;
        }
        .right {
            width: 300px;
            height: 500px;
            background-color: slateblue;
            float: right;
        }
        .center {
            height: 500px;
            margin: 0px 310px 0px 210px;
            background-color: tan;
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</body>

圣杯布局

在这里插入图片描述

<style>
        .main {
            width: 80%;
            margin:0 auto;
            background-color: skyblue;
            overflow: hidden;
        }
        .box {
            padding-bottom: 300px;
            margin-bottom: -300px;
        }
        .left {
            float: left;
            width: 200px;
            height: 500px;
            background-color: yellow;
        }
        .right {
            float: right;
            width: 300px;
            height: 600px;
            background-color: yellowgreen;
        }
        .center {
            height: 800px;
            margin-left: 210px;
            margin-right: 310px;
            background-color: pink;
        }

    </style>
</head>
<body>
    <div class="main">
        <div class="box left"></div>
        <div class="box right"></div>
        <div class="box center"></div>
    </div>
</body>

圣杯布局

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

flex布局

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

flex布局项目

示意图
在这里插入图片描述

<style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .status {
            height: 30px;
            background-image: -webkit-linear-gradient(top,blue,skyblue);
        }
        .container1 {
            width: 80%;
            margin: 0 auto;
            display: flex;
            justify-content: flex-end;
            font-size: 18px;
            color: white;
        }
        .demo1 {
            margin-right: 20px;
        }
        .demo11 {
            margin-right: 70px;
        }
        .space {
            white-space: pre;
        }
        .paint {
            width: 20px;
            height: 20px;
            position: relative;
        }
        .paint::before {
            content: "";
            width: 10px;
            height: 10px;
            border: 1px solid white;
            border-radius: 5px;
            position: absolute;
            top: 3px;
            left: 3px;
        }
        
        .paint::after {
            content: "";
            width: 14px;
            height: 7px;
            /* background-color: pink; */
            border: 1px solid white;
            border-radius: 7px 7px 0 0;
            position: absolute;
            top: 15px;
            left: 1px;
        }
        
        /* 导航栏 */
        .nav {
            width: 100%;
            background-color: white;
            box-shadow: 0px 2px 20px grey;
        }
        .container2 {
            width: 70%;
            margin: 0 auto;
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }
        .nav1 {
            width: 50px;
            margin-right: 200px;
            font-size: 30px;
        }
        .nav2 {
            display: flex;
            justify-content: flex-start;
            flex: 1;
        }
        .nav2 span {
            margin-right: 50px;
        }
        .nav3 input {
            height: 20px;
            outline: none;
        }
        .nav3 {
            position: relative;

        }
        .nav3 .search {
            position: absolute;
            /* margin:0px 20px; */
            left: 50px;
            top: 5px;
            font-size: 8px;
        }
        .nav3 .search span {
            background-color: #DDDDDD;
            border-radius: 2px;
        }
        .nav3::before {
            content: "";
            width: 12px;
            height: 12px;
            border: 2px solid black;
            border-radius: 7px;
            position: absolute;
            right: 10px;
            top: 3px;
        }
        .nav3::after {
            content: "";
            border-top: 2px solid black;
            font-size: 10px;
            width: 8px;
            height: 2px;
            position: absolute;
            transform: rotate(45deg);
            right: 5px;
            top: 18px;
        }
        .container3 {
            position: relative;
            width: 70%;
            height:550px ;
            margin: 0 auto;
            background: url(../../pic/banner.jpg) center no-repeat;
        }
        .arrows {
            font-size: 60px;
            color: white;
            margin-top: -30px;
            position: absolute;
            top: 50%;
            width: 100px;
            height: 100px;
            background: rgba(102,51,51, 0.3);
            /* left能覆盖right，所以要先设置right */
            right: 30px;
        }
        .arrow1 {
            left: 30px;
        }
        .gradient {
            width: 70%;
            margin: 0 auto;
            height: 25px;
            position: relative;
            overflow: hidden;
        }
        .gradient::after {
            content: "";
            border: 25px solid transparent;
            border-left-width: 0px;
            border-right:1332px solid skyblue;
            /* 伪元素消除默认字体大小 */
            font-size: 0px;
            position: absolute;
            top: 0px;
        }

        .container4 {
            width: 70%;
            margin: 0 auto;
            text-align: center;
        }
        .container4 select {
            width: 160px;
            height: 25px;
            margin: 5px 20px;
        }
        .range {
            height: 100px;
            width: 70%;
            margin: 0 auto;
        }
        .range input {
            margin: 20px 25%;
            width: 600px;
        }
        .info {
            display: flex;
            justify-content: center;
        }
        .image {
            width: 40%;
        }
        .image img {
            width: 100%;
            height: 100%;
        }
        
        .xinghao {
            width: 40%;
        }
    </style>
</head>
<body>
    <!--状态栏 -->
    <div class="status">
        <div class="container1">
            <span class="demo1">华为商城</span>
            <span class="demo1">花粉俱乐部</span>
            <span class="demo1 demo11">EMUI</span>
            <span class="paint"></span>
            <span>登录</span>
            <span class="space"> | </span>
            <span>注册</span>
        </div>
    </div>
    <!-- 导航 -->
    <div class="nav">
        <div class="container2">
            <div class="nav1">HONOR</div>
            <div class="nav2">
                <span>产品</span>
                <span>关于荣耀</span>
                <span>新闻评测</span>
                <span>视频</span>
                <span>活动</span>
                <span>服务支持</span>
            </div>
            <div class="nav3">
                <input type="text">
                <div class="search">
                    <span>荣耀20S</span>
                    <span>荣耀9X</span>
                </div>

            </div>
        </div>
    </div>
    <!-- banner 部分 -->
    <div class="banner">
        <div class="container3">
            <div class="arrows arrow1"><span><</span></div>
            <div class="arrows arrow2"><span>></span></div>
        </div>
    </div>
    <br>
    <!-- 手机模块介绍部分 -->
    <div class="gradient">

    </div>
    <div class="range">
        <input type="range">
    </div>
    <div class="intro">
        <div class="container4">
            <h2>找到适合你的手机</h2>
            <select name="" id="">
                <!-- 给select添加placeholder -->
                <option value="" style="display: none;">产品类型</option>
                <option value="">helloworld</option>
            </select>
            <select name="" id="">
                <option value="" style="display: none;">屏幕尺寸</option>
                <option value="">helloworld</option>
            </select>
            <select name="" id="">
                <option value="" style="display: none;">网络格式</option>
                <option value="">helloworld</option>
            </select>
            <select name="" id="">
                <option value="" style="display: none;">发布时间</option>
                <option value="">helloworld</option>
            </select>
            <div class="info">
                <div class="image">
                    <img src="../../pic/xinghao.jpg" alt="">
                </div>
                <div class="xinghao">
                    <h2></h2>
                    <p>1</p>
                    <p>1</p>
                    <p>1</p>
                    <p>1</p>
                </div>
            </div>
        </div>
    </div>
</body>
张登辉的奇妙旅程
关注
专栏目录
web前端：3D动画cubic立方体箱子，采用景深perspective，transform-style构建preserve-3d元素样式
cevent的博客
01-14 294
1.less * { margin: 0; padding: 0; #wrap { position: absolute; width: 600px; height: 600px; background: navajowhite; border: 1px solid #000000; box-shadow: 2px 2px 5px #000000; border-radiu
景深(Depth of Field)
weixin_34186128的博客
07-13 669
http://www.cnblogs.com/cxrs/archive/2013/03/22/DepthOfFeild.html 景深(Depth of Field) 什么是景深？ 所谓景深，就是当焦距对准某一点时，焦平面前后图像仍然清晰的范围。景深是摄影技术中的术语。它能决定是把背景模糊化来突出拍摄对象，还是拍出清晰的背景。我们经常能够看到拍摄花、昆虫等...
初识html+css 第五天
weixin_46087833的博客
08-29 229
初识html+css 5 1. 相对定位 <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1{ width: 200px;
前端学习Day18
wry1213的博客
04-08 179
一、3D的旋转 增加了rotateZ(); 和 rotate3d(x,y,z,度数) 注：x、y、z 它们是一个矢量值，0是不旋转，1是旋转 eg:rotate3d(1,1,0,45deg) 等价于：rotateX(45deg) rotateY(45deg) 二、3D的缩放 增加了 scaleZ() 和 scale3d(x,y,z) 注：交互时需要把旋转的x,...
固比固模型-弹性盒
王延朕的博客
05-14 171
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>固比固模型-弹性盒</title> <style type="text/css"> *{ padding: 0; margin: 0; } .box{
行业文档-设计装置-教学用正方体演示教具.zip
09-04
"教学用正方体演示教具"是一个专门针对教育场景设计的工具，旨在帮助教师更直观、生动地进行教学，提高学生的学习兴趣和理解能力。这个压缩包包含了一份名为“教学用正方体演示教具.pdf”的文件，它很可能是一份详细...
行业文档-设计装置-多功能正方体防护产品.zip
08-26
《多功能正方体防护产品》是一款综合性的设计装置，它以正方体的形态为基础，融合了多种功能，旨在提供全面的防护解决方案。这款产品在设计上充分考虑了实际应用场景，将实用性、安全性与美学结合，是现代科技与创新...
行业文档-设计装置-一种正方体解题演示教具.zip
08-18
行业文档-设计装置-一种正方体解题演示教具.zip
zhengfangti.rar_fangs-tibig_java体_java旋转立方体_java正方体_正方体
09-21
在Java编程语言中，创建一个可以旋转的正方体是一个典型的图形学问题，涉及到计算机图形学的基本概念，如三维坐标系、向量运算以及矩阵变换。这个“zhengfangti.rar”压缩包文件包含了实现这一功能的源代码，具体是...
行业文档-设计装置-具有正方体柱头的保温砖制砖模具.zip
08-27
在本压缩包“行业文档-设计装置-具有正方体柱头的保温砖制砖模具.zip”中，主要包含了一份名为“具有正方体柱头的保温砖制砖模具.pdf”的文档，该文档详细介绍了如何设计和制造一种专门用于生产具有正方体柱头的保温...
固比固布局 css3
u014658956的博客
09-25 1165
最近写了一个小页面，里面用到了一种布局，就是有三栏，两侧的是固定的宽度，中间的那栏是根据浏览器屏幕的缩放而自动缩放。这个效果之前有写过，但是这次写出现了一个问题，就写下来。 这个效果最重要的元素是display：flex HTML的代码：<nav class="topbar"> <div class="topbar_lt"> <a class="logo" href
景深效果&3D&动画属性使用
qq_63608418的博客
12-03 499
学web前端第14天所学
几个slr的基本概念
weixin_30319097的博客
09-21 709
1、焦点(focus) 与光轴平行的光线射入凸透镜时，理想的镜头应该是所有的光线聚集在一点后，再以锥状的扩散开来，这个聚集所有光线的一点，就叫做焦点。 2、弥散圆(circle of confusion) 在焦点前后，光线开始聚集和扩散，点的影象变成模糊的，形成一个扩大的圆，这个圆就叫做弥散圆。 在现实当中，观赏拍摄的影象是以某种方式(比如投影、放大成照片等等)来观察的，人的肉眼所感受...
CSS3景深、三维变换属性及旋转三维立方体的实现
热门推荐
尐轩web前端网络日志
11-23 1万+
上周简单写了一下2D变换 今天来写写3D变换 三维立体效果我觉得是CSS3中最有意思的地方 不得不佩服那些开发者大神们 让我们能够通过几行CSS代码就能得到酷炫的视觉体验浏览器坐标系在讲正式语法之前，首先需要了解浏览器坐标系 这需要我们把浏览器界面想象成一个立体的场景这是网上流传很广的浏览器坐标系图片 从左到右的方向是浏览器x轴的正方向 从上到下的方向是浏览器y轴的正方向 而z轴正方
CSS3实现景深3D视觉效果
一只路过的小码农
08-29 4305
效果图： 添加效果前： 添加效果后： CSS: .box { width: 310px; height: 260px; margin: 20px auto; /* 景深：离视线的距离 */ perspective: 800px; background-color: red; display: flex; justify-content: center; al...
景深详解
qq_28090573的博客
07-25 917
https://wenku.baidu.com/view/d011826448d7c1c708a14572.html
CSS3景深-perspective
weixin_33897722的博客
08-18 402
3D视图正方体： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS3景深-perspective</title> 6 &l...
前端实现背景虚化但内容清晰且自适应
weixin_38167855的博客
08-01 1245
讲干货，不啰嗦，有时候前端会遇到背景虚化但要求内容清晰的需求，先看效果： 以下为具体实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景虚化</title> </head&g...
对景深通俗易懂的理解
IT_job的博客
01-23 4419
首先看两幅图片 近景深   远景深 我们先看看焦点是什么意思：比如你拍一朵花时，你必须给这朵花对好焦，那么这朵花就是焦点。 我们再看看景深是什么意思：景深就是焦点前后清晰的范围（你把焦点当成一个点，然后一条线段穿过焦点，这条线段长度就是景深大小），景深小可以虚化背景进而突出主体（拍人、花等），景深大可以把从近到远的景物都拍清晰。   三个原因影响景深:镜头焦距、相机和主体的距
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值