AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

今日的CSS小案例

2023-06-05 119
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 今日的CSS小案例

今天需要做的是原神的手风琴，看其他挺好玩，我就做了一个



点击之后实现悬浮效果，看起来挺好看的，然后让咱们一起来设置


架构


这个布局相对于简单一点，有一个大盒子shell


里面放了一个版心card


然后把图片放盒子里面


下面的文字放另外一张盒子里面


 <div class="shell">
            <div class="card">
                <div class="box">
                    <img src="./img/1.png" />
                </div>
                <div class="character">
                    <img src="./img/1.png" />
                </div>
                <h4>凝光</h4>
            </div>
            <div class="card">
                <div class="box">
                    <img src="./img/3.png" />
                </div>
                <div class="character">
                    <img src="./img/3.png" />
                </div>
                <h4>多莉</h4>
            </div>
            <div class="card">
                <div class="box">
                    <img src="./img/4.png" />
                </div>
                <div class="character">
                    <img src="./img/4.png" />
                </div>
                <h4>刻晴</h4>
            </div>
            <div class="card">
                <div class="box">
                    <img src="./img/5.png" />
                </div>
                <div class="character">
                    <img src="./img/5.png" />
                </div>
                <h4>七七</h4>
            </div>
            <div class="card">
                <div class="box">
                    <img src="./img/6.png" />
                </div>
                <div class="character">
                    <img src="./img/6.png" />
                </div>
                <h4>纳西妲</h4>
            </div>
            <div class="card">
                <div class="box">
                    <img src="./img/8.png" />
                </div>
                <div class="character">
                    <img src="./img/8.png" />
                </div>
                <h4>雷电将军</h4>
            </div>
            <div class="card">
                <div class="box">
                    <img src="./img/7.png" />
                </div>
                <div class="character">
                    <img src="./img/7.png" />
                </div>
                <h4>可莉</h4>
            </div>
            <div class="card">
                <div class="box">
                    <img src="./img/10.png" />
                </div>
                <div class="character">
                    <img src="./img/10.png" />
                </div>
                <h4>芭芭拉</h4>
            </div>
        </div>


简单介绍一下架构之后，接下展示css代码，里面大量运用到了子集选择器，伪类选择器


介绍一下子集选择器><是指选择这个内容里面单独的内容


还是老规矩清除默认边距然后在加上css3盒子模型


给body设置弹性布局，然后缩放盒子大小，加上背景颜色，基本的样式就完成


然后其他的我相信大家都应该清除差不多了，不懂的再去查查资料这里就重点讲几个标签


今天的练习中遇到的两个新标签


object-fit 属性用于指定应如何调整 <img> 或 <video> 的大小以适合其容器。


这个属性告诉内容以不同的方式填充容器。比如“保留长宽比”或者“展开并占用尽可能多的空间


cube-bezier() 函数定义三次贝塞尔曲线（Cubic Bezier curve）。


三次贝塞尔曲线由 P0、P1、P2 和 P3 四个点进行定义。P0 和 P3 是曲线的起点和终点，在 CSS 中，这两个点是固定的，因为坐标是成比例。P0 为 (0, 0)，代表初始时间和初始状态，P3 为 (1, 1)，代表最终时间和最终状态。


伪类的话不用我多说了吧，详细情况还是查看W3C


这里是css代码


* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            min-height: 100vh;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            background-image: linear-gradient(120deg,#e0c3fc 0%,#8ec5fc 100%);
             background-size: cover;
        }
        .shell{
            width: 1700px;
            margin: 0 auto;
            margin-top: 5rem;
            height: 750px;
            display: flex;
        }
        .card{
            flex-basis: 13%;
            position: relative;
            overflow: hidden;
        }
        .card:not(:nth(1)){
            margin-left: 20px;
        }
        .card:hover{
            overflow: initial;
        }
        .box{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transition:  all .1s cubic-bezier(0.165,0.84,0.44,1);
            overflow: hidden;
            border-radius: 10px;
            background-image: linear-gradient(100deg,#a18cd1,#fcaa55c,#141414ce);
        }
        .box>img{
            object-fit: contain;
            width: 100%;
            height: 100%;
            transform: translate(-50%,10% ) scale(3);
            position: relative;
            z-index: -1;
        }
        .card:hover>.box img{
            opacity: 0;
        }
        .card:hover>.box{
            transform: scaleY(1.5);
            background-image: initial;
            background-color: #7d419f;
            z-index: 2;
            cursor: pointer;
        }
        .card>h4{
            position: absolute;
            display: block;
            width: 120px;
            text-align: center;
            color: rgba(255,255,255,0.2);
            bottom: 0;
            left: 50%;
            transform: translate(-50%, -35%);
            font-size: 28px;
            z-index: 100;
            transition: .2s;
        }
        .card:hover h4{
            color: #fff;
            transform: translate(-50%,250%);
        }
        .card:hover .character>img{
            opacity: 1;
        }
        .card>.character{
            position: absolute;
            top: -100px;
            left: -400px;
            width: 100%;
            height: 100%;
            z-index: 3;
            pointer-events: none;
        }
        .character>img{
            width: 820px;
            height: 820px;
            object-fit: contain;
            opacity: 0;
            transition: all .3s;
            position: relative;
            z-index: -10;
        }


这里提供源码，大家可以尝试一边理解一边来写哦，嘻嘻


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body {
        min-height: 100vh;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
      background-image: linear-gradient(120deg,#e0c3fc 0%,#8ec5fc 100%);
       background-size: cover;
    }
    .shell{
      width: 1700px;
      margin: 0 auto;
      margin-top: 5rem;
      height: 750px;
      display: flex;
    }
    .card{
      flex-basis: 13%;
      position: relative;
      overflow: hidden;
    }
    .card:not(:nth(1)){
      margin-left: 20px;
    }
    .card:hover{
      overflow: initial;
    }
    .box{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transition:  all .1s cubic-bezier(0.165,0.84,0.44,1);
      overflow: hidden;
      border-radius: 10px;
      background-image: linear-gradient(100deg,#a18cd1,#fcaa55c,#141414ce);
    }
    .box>img{
      object-fit: contain;
      width: 100%;
      height: 100%;
      transform: translate(-50%,10% ) scale(3);
      position: relative;
      z-index: -1;
    }
    .card:hover>.box img{
      opacity: 0;
    }
    .card:hover>.box{
      transform: scaleY(1.5);
      background-image: initial;
      background-color: #7d419f;
      z-index: 2;
      cursor: pointer;
    }
    .card>h4{
      position: absolute;
      display: block;
      width: 120px;
      text-align: center;
      color: rgba(255,255,255,0.2);
      bottom: 0;
      left: 50%;
      transform: translate(-50%, -35%);
      font-size: 28px;
      z-index: 100;
      transition: .2s;
    }
    .card:hover h4{
      color: #fff;
      transform: translate(-50%,250%);
    }
    .card:hover .character>img{
      opacity: 1;
    }
    .card>.character{
      position: absolute;
      top: -100px;
      left: -400px;
      width: 100%;
      height: 100%;
      z-index: 3;
      pointer-events: none;
    }
    .character>img{
      width: 820px;
      height: 820px;
      object-fit: contain;
      opacity: 0;
      transition: all .3s;
      position: relative;
      z-index: -10;
    }
    </style>
  </head>
  <body>
      <div class="shell">
          <div class="card">
              <div class="box">
                  <img src="./img/1.png" />
              </div>
              <div class="character">
                  <img src="./img/1.png" />
              </div>
              <h4>凝光</h4>
          </div>
          <div class="card">
              <div class="box">
                  <img src="./img/3.png" />
              </div>
              <div class="character">
                  <img src="./img/3.png" />
              </div>
              <h4>多莉</h4>
          </div>
          <div class="card">
              <div class="box">
                  <img src="./img/4.png" />
              </div>
              <div class="character">
                  <img src="./img/4.png" />
              </div>
              <h4>刻晴</h4>
          </div>
          <div class="card">
              <div class="box">
                  <img src="./img/5.png" />
              </div>
              <div class="character">
                  <img src="./img/5.png" />
              </div>
              <h4>七七</h4>
          </div>
          <div class="card">
              <div class="box">
                  <img src="./img/6.png" />
              </div>
              <div class="character">
                  <img src="./img/6.png" />
              </div>
              <h4>纳西妲</h4>
          </div>
          <div class="card">
              <div class="box">
                  <img src="./img/8.png" />
              </div>
              <div class="character">
                  <img src="./img/8.png" />
              </div>
              <h4>雷电将军</h4>
          </div>
          <div class="card">
              <div class="box">
                  <img src="./img/7.png" />
              </div>
              <div class="character">
                  <img src="./img/7.png" />
              </div>
              <h4>可莉</h4>
          </div>
          <div class="card">
              <div class="box">
                  <img src="./img/10.png" />
              </div>
              <div class="character">
                  <img src="./img/10.png" />
              </div>
              <h4>芭芭拉</h4>
          </div>
      </div>
  </body>
  </body>
</html>
文章标签：
Shell
前端开发
容器
关键词：
CSS案例
p4niqtkky5524
目录
相关文章
gudanhero2018
|
2月前
|
前端开发
CSS实现充电效果案例
CSS实现充电效果案例
gudanhero2018
72 1
bruce刘晓伟-18435
|
1月前
|
前端开发 JavaScript
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
bruce刘晓伟-18435
35 0
1941623231718325
|
4月前
|
编解码 前端开发 容器
CSS Flex布局实战案例：构建响应式卡片组件
【7月更文挑战第17天】通过上述步骤，我们成功地使用CSS Flex布局构建了一个响应式的卡片组件。Flexbox不仅简化了布局代码，还让我们能够轻松实现复杂的布局效果，如响应式设计。在实战中，掌握Flexbox将大大提高前端开发的效率和网页布局的质量。希望这个案例能够帮助你更好地理解和应用Flexbox布局。
1941623231718325
113 2
时雨h
|
6月前
|
前端开发 JavaScript 容器
CSS属性：定位属性+案例讲解：博雅互动 前端开发入门笔记（五）
CSS属性：定位属性+案例讲解：博雅互动 前端开发入门笔记（五）
时雨h
54 1
a15034260562-24955
|
6月前
|
前端开发
CSS3的几个变形案例……
CSS3的几个变形案例……
a15034260562-24955
32 0
a15034260562-24955
|
6月前
mvc.net分页查询案例——mvc-paper.css
mvc.net分页查询案例——mvc-paper.css
a15034260562-24955
31 0
卡尔特斯
CSS3【display: flex；】自适应布局案例
CSS3【display: flex；】自适应布局案例
卡尔特斯
103 0
Brucye
|
6月前
|
前端开发
CSS总结笔记+案例（下）
CSS总结笔记+案例
Brucye
59 1
Brucye
|
6月前
|
前端开发 Python
CSS总结笔记+案例（上）
CSS总结笔记+案例
Brucye
50 1
TechWJ
|
6月前
|
前端开发
css3 纯代码案例
css3 纯代码案例
TechWJ
63 0

热门文章

最新文章

  • 1
    CSS 居中方法总结
  • 2
    纯CSS3实现宽屏二级下拉菜单
  • 3
    CSS3实现多样的边框效果
  • 4
    CSS3-实现单选框radio的小动画
  • 5
    使用 CSS3 实现 3D 图片滑块效果【附源码下载】
  • 6
    CSS3实现时间轴效果
  • 7
    【HTML+CSS+JS】前端三剑客实现3D旋转照片墙
  • 8
    05.javascript访问CSS
  • 9
    CSS3中的选择器
  • 10
    Css:背景色透明，内容不透明之终极方法！兼容所有浏览器
  • 1
    使用CSS中的cursor属性值，常用的可设置参数，以及其他16中参数值的使用场景和示例代码
    72
  • 2
    技术心得：xpath、CSS定位方法
    46
  • 3
    【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
    165
  • 4
    CSS【详解】对齐 （含文本垂直对齐，文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐，图片和文本对齐等）
    76
  • 5
    CSS【详解】布局 display （ 含 flex 布局，grid 布局，table 布局，float 布局，响应式布局 等）
    142
  • 6
    CSS【详解】定位 position （静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky）
    51
  • 7
    CSS【详解】长度单位 （ px，%，em，rem，vw，vh，vmin，vmax，ex，ch ）
    75
  • 8
    CSS 【详解】样式选择器（含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器）
    159
  • 9
    使用HTML和CSS创建响应式表格
    167
  • 10
    常见的css优化方案都有那些
    51

    • 相关课程

    更多
  • CSS 快速掌握
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • HTML5 新特性教程
  • HTML 入门与实战

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • 《零基础HTML入门教程》
  • 23-Vue.js在前端...1506518547.pdf

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • CSS基础教程
    • 下一篇
    无影云桌面