位置: IT常识 - 正文

今日的CSS小案例(css案例教程)

编辑:rootadmin
今日的CSS小案例

推荐整理分享今日的CSS小案例(css案例教程),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:csshtml经典案例,css 案例,css案例源代码,今日的css小案例分享,css经典案例,css经典案例,css 案例,今日的css小案例分享,内容如对您有帮助,希望把文章链接给更多的朋友!

个人名片:  😊作者简介:一名大一在校生,web前端开发专业  🤡 个人主页:几何小超  🐼座右铭:懒惰受到的惩罚不仅仅是自己的失败,还有别人的成功。  🎅**学习目标: 坚持每一次的学习打卡,学好前端

今天需要做的是原神的手风琴,看其他挺好玩,我就做了一个,现在还是把展示图放出来吧哈哈,因为本人也是个二次元LSP

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

架构

这个布局相对于简单一点,有一个大盒子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小案例(css案例教程)

简单介绍一下架构之后,接下展示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>
本文链接地址:https://www.jiuchutong.com/zhishi/296199.html 转载请保留说明!

上一篇:基于Vue+Python的应用搭建——前端[1](pycharm vue)

下一篇:Ubuntu系统 不使用snap安装firefox,使用firefox官网下载的安装包安装firefox(ubuntu busier)

  • 如何恰到好处地进行软文推广,软文推广的影响力(如何恰到好处地装病)

    如何恰到好处地进行软文推广,软文推广的影响力(如何恰到好处地装病)

  • 快手怎么开通快手小店(快手怎么开通快手小黄车)

    快手怎么开通快手小店(快手怎么开通快手小黄车)

  • 楚税通密码格式怎么设置

    楚税通密码格式怎么设置

  • windows10右下角天气怎么关(windows10右下角有天气)

    windows10右下角天气怎么关(windows10右下角有天气)

  • 苹果可以长截图吗(苹果手机如何截长图截屏)

    苹果可以长截图吗(苹果手机如何截长图截屏)

  • vivo手机如何打开镜像(vivo手机如何打开OTG)

    vivo手机如何打开镜像(vivo手机如何打开OTG)

  • 手机数据恢复精灵真的可以恢复吗(手机数据恢复精灵官方)

    手机数据恢复精灵真的可以恢复吗(手机数据恢复精灵官方)

  • 华为扰码和串号在哪里(华为扰码和手机串号怎么看)

    华为扰码和串号在哪里(华为扰码和手机串号怎么看)

  • 毒鉴定二维码扫不出来(毒的鉴定二维码,一直是下载页面)

    毒鉴定二维码扫不出来(毒的鉴定二维码,一直是下载页面)

  • 微信延期到账对方收了(微信延期到账对方领了能撤回吗)

    微信延期到账对方收了(微信延期到账对方领了能撤回吗)

  • 苹果11拍照什么水平(苹果拍照什么软件最好看)

    苹果11拍照什么水平(苹果拍照什么软件最好看)

  • 为什么路由器恢复出厂设置后不可以上网了(为什么路由器恢复出厂设置连wifi都没了)

    为什么路由器恢复出厂设置后不可以上网了(为什么路由器恢复出厂设置连wifi都没了)

  • 微信内存不足无法打开(微信内存不足无法使用微信图片)

    微信内存不足无法打开(微信内存不足无法使用微信图片)

  • 抖音钻卡到底有没有(抖音钻卡有什么用)

    抖音钻卡到底有没有(抖音钻卡有什么用)

  • 全民k歌找回删除的私信(全民K歌找回删除的作品)

    全民k歌找回删除的私信(全民K歌找回删除的作品)

  • 摄像机离线了怎么处理(摄像机离线了怎么连接)

    摄像机离线了怎么处理(摄像机离线了怎么连接)

  • flash缓存怎么清理(adobe flash缓存)

    flash缓存怎么清理(adobe flash缓存)

  • 为什么注销不了qq号了(支付宝为什么注销不了)

    为什么注销不了qq号了(支付宝为什么注销不了)

  • 微信可以群删好友吗(微信可以群删好友是从什么时候开始的)

    微信可以群删好友吗(微信可以群删好友是从什么时候开始的)

  • iphone11用的是什么基带(iphone11用的是什么sim卡)

    iphone11用的是什么基带(iphone11用的是什么sim卡)

  • x27屏幕尺寸(vivix27屏幕尺寸)

    x27屏幕尺寸(vivix27屏幕尺寸)

  • 钉钉录指纹在哪里(钉钉录入指纹在哪)

    钉钉录指纹在哪里(钉钉录入指纹在哪)

  • 华为mate20指纹在哪里(华为mate20指纹没反应)

    华为mate20指纹在哪里(华为mate20指纹没反应)

  • PHPCMS 如何注册管理员?(php注册系统)

    PHPCMS 如何注册管理员?(php注册系统)

  • 缴纳的工会经费收据怎么取得
  • 固定模板的东西叫什么
  • 租赁厂房电费
  • 税收滞纳金计入营业外支出的哪一项
  • 13%税开成了3%怎么报税
  • 软件开发成本核算模板
  • 小规模纳税人销售收入会计分录
  • 增值税税控系统专用设备
  • 增值税零税率与免税有何不同
  • 小规模纳税人购置税控设备
  • 建筑企业如何申请高新技术企业
  • 购买理财产品会损失本金吗
  • 利润表净利润等于科目余额表
  • 研发支出的台账由谁做
  • 水利建设基金多交可以退么
  • 出售原材料属于营业收入吗
  • 签发支票怎么做账务处理
  • 增值税专用发票税号错误
  • 如何正确安装锯条
  • 企业注销时往来账目挂账怎么处理
  • 签证费入什么科目
  • 报销培训费怎么做账
  • 冲回坏账
  • 销售免税商品可以抵扣进项税吗
  • 被收购企业会提出什么条件
  • 承包合同包含的内容
  • 非经营业务
  • 偷税漏税的会计要负什么责任
  • 多源传感器融合
  • 养老金领取怎么算他的领取金额
  • 发行债券的会计分录摊销
  • php aes
  • 资金支出预算的项目
  • list集合过滤
  • 异常处理流程为哪几个部分
  • php对象是值传递还是引用传递
  • vget命令
  • 以股权换股权税务问题
  • 开具增值税专用发票的规定
  • mongodb连接数
  • 抵扣联和发票联算一张发票吗
  • 机票改签费可以报销吗
  • spring security例子
  • 企业生产经营发展
  • 利润表是当月
  • 个体户定额征收后还要报税吗
  • 以前年度多交的所得税怎么退
  • 出口不退税进项税是否可以抵扣
  • 暂时进境货物如何申报
  • 高新技术企业的申报条件
  • 销售货款未收到会计分录
  • 留抵会计分录
  • 月末忘记结转怎么办
  • 水利建设基金一直没缴纳
  • 开票金额大于付款金额 多余部分为返点
  • 购入旧的固定资产还能一次性抵扣吗
  • mysql缩进快捷键
  • XP系统无法安装软件
  • win10怎么用xp经典主题
  • 怎么查看win7系统电脑访问了哪些应用程序
  • win10打开命令提示符窗口
  • windowsxp收藏夹在哪
  • centos设置终端快捷键
  • 苹果手机
  • win10系统无法运行exe文件
  • win8如何升级系统
  • win8设置无线网络
  • win8没有开始菜单 点键盘开始菜单黑屏
  • perl脚本use strict
  • js动态生成页面
  • linux shell脚本中sudo后输入密码
  • linux脚本自启
  • 安卓handler使用
  • android网络开发技术答案形考任务五
  • python批量ping
  • 中国体育体制改革的特点
  • 污水处理厂房产税优惠政策
  • 进项发票的税收分类编码怎么查询
  • 12333热线时间
  • 怎么查询地税信息表
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设