效果预览

代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <meta name="author" content="https://www.cnblogs.com/beixuan">

        <meta name="version" content="1.0.0">

        <meta name="date" content="2021/12/05 14:07:50">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>CSS动画大全之移动盒子显示详情</title>

    </head>

    <style type="text/css">

      /* 设置 body 内、外边距为 0 */

      body {

        margin: 0;

        padding: 0;

        background: #27515c;

      }

      /* 页面容器 */

      .page-wrapper {

        width: 100vw;

        height: 100vh;

        display: grid;

        grid-template-columns: 100%;

        grid-template-rows: 100%;

        justify-items: center;

        align-items: center;

        position: relative;

      }

      .content {

        position: absolute;

        top: 50%;

        left: 50%;

        width: 18rem;

        height: 18rem;

        transform: translate(-50%, -50%);

        background-color: #FFF;

        border-radius: 50%;

        display: grid;

        justify-items: left;

        align-items: center;

        box-sizing: border-box;

        padding-left: 2rem;

        transition: all 0.8s ease;

      }

      .content:hover {

        width: 25rem;

        border-radius: 12px;

      }

      img {

        position: absolute;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

        transition: all 1s ease;

      }

      .content:hover img {

        left: 75%;

        transform: translateY(-60%) scale(1.9);

      }

      .text {

        width: 100%;

        overflow: hidden;

      }

      .text > p {

        font-size: 20px;

        letter-spacing: 3px;

        color: #00007f;

        font-weight: 600;

        width: 100%;

        transform: translateX(200%);

        transition: all 0.6s ease;

      }

      .text > span {

        font-size: 12px;

        display: inline-block;

        width: 100%;

        transform: translateX(200%);

        transition: all 0.4s ease;

      }

      .text > span:nth-child(2) {

        transition: all 0.8s ease;

      }

      .text > span:nth-child(3) {

        transition: all 0.9s ease;

      }

      .text > span:nth-child(4) {

        transition: all 1s ease;

      }

      .text > span:nth-child(5) {

        transition: all 1.1s ease;

      }

      .content:hover .text > span, .content:hover .text > p{

        transform: translateX(0%);

        opacity: 1;

      }

      @media screen and (max-width: 800px) {

        .content {

          position: absolute;

          top: 50%;

          left: 50%;

          width: 18rem;

          height: 18rem;

          transform: translate(-50%, -50%);

          background-color: #FFF;

          border-radius: 50%;

          display: grid;

          justify-items: center;

          align-items: start;

          box-sizing: border-box;

          padding-left: 2rem;

          transition: all 0.8s ease;

        }

        .content:hover {

          height: 26rem;

          border-radius: 12px;

        }

        .content:hover img {

          position: absolute;

          bottom: 0;

          left: 50%;

          transform: translate(-50%, 0%) scaleX(-1);

          transition: all 0.5s ease;

        }

      }

    </style>

    <body>

      <!-- 页面容器 -->

      <div class="page-wrapper">

        <div class="content">

          <div class="text">

            <p> 反恐精英Online </p>

            <span> 玩家最喜爱的FPS人气网游,火爆战场真实体验! </span>

            <span> [反恐精英OL]神器之下[神器]！12月7日紧急发布 </span>

            <span> [反恐精英OL]神器之中[神器]！12月6日紧急发布 </span>

            <span> [反恐精英OL]神器之上[神器]！12月5日紧急发布 </span>

          </div>

          <img src="./cs.png" height="190" />

        </div>

    </body>

</html>

图片资源

【全】CSS动画大全之其他【移动盒子显示详情】的更多相关文章

  1. css如何简单设置文字溢出盒子显示省略号

    1.单行文本溢出显示省略号单行文本溢出显示省略号,必须满足三个条件:(1)先强制一行内显示文本white-space:nowrap;(默认 normal自动换行)(2)超出的部分隐藏overflow: ...

  2. 如何给PDF设置全屏动画

    PPT文件可以播放全屏,并且可以实现飞入.分割.闪烁等动画模式播放.那么PDF文件可以吗?我们想要给PDF文件加入动画效果应该怎么做呢,也有很多的小伙伴不知道该怎么把PDF文件切换为全屏动画模式想要知 ...

  3. 【2016年特别福利】史上最全CSS学习资料大全

    css学习篇 [2016年特别福利]史上最全CSS学习资料大全

  4. 盒子端 CSS 动画性能提升研究

    不同于传统的 PC Web 或者是移动 WEB,在腾讯视频客厅盒子端,接大屏显示器(电视)下,许多能流畅运行于 PC 端.移动端的 Web 动画,受限于硬件水平,在盒子端的表现的往往不尽如人意. 基于 ...

  5. Css 动画的回调

    在做项目中经常会遇到使用动画的情况.以前的情况是用js写动画,利用setTimeout函数或者window.requestAnimationFrame()实现目标元素的动画效果.虽然后者解决了刷新频率 ...

  6. Css动画形式弹出遮罩层，内容区上下左右居中于不定宽高的容器中

    <!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...

  7. [转]CSS hack大全&详解

    转自:CSS hack大全&详解 1.什么是CSS hack? CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的, ...

  8. CSS动画与GPU

    写在前面 满世界的动画性能优化技巧,例如: 只允许改变transform.opacity,其它属性不要动,避免重新计算布局(reflow) 对动画元素应用transform: translate3d( ...

  9. 全新jquery多点滑动幻灯片——全屏动画animateSlide

    首页banner的酷炫效果多来自全屏大图的幻灯片动画,下面提供一种完美兼容的jquery动画特效:全新jquery多点滑动幻灯片——全屏动画animateSlide(代码完全原创). 直接上代码,把h ...

  10. 谈谈一些有趣的CSS题目（十四）-- 纯 CSS 方式实现 CSS 动画的暂停与播放！

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

随机推荐

  1. 简单的解释下什么是CNAME

    今天在用阿里云的安全防护给接口域名做web应用防火墙,需要配置cname,原来有用到过但是一直没去了解过,只知道怎么用今天搜了一下看看下面是原文,白话文好理解分享一下. 什么是CNAME?先简单的说下 ...

  2. HMS Core 6.2.0版本发布公告

    新增动作捕捉能力.通过简单拍摄即可获得人体3D骨骼关键点数据,广泛应用于虚拟形象.体育运动和医学分析等场景: 3D物体建模能力iOS版本上线. 查看详情>> 新增道路吸附能力.可根据坐标点 ...

  3. Nuxt3 的生命周期和钩子函数（五）

    title: Nuxt3 的生命周期和钩子函数(五) date: 2024/6/29 updated: 2024/6/29 author: cmdragon excerpt: 摘要:本文详细介绍了Nu ...

  4. T3/A40i升级，推荐全志T507-H的5个理由！

    作为能源电力.工业自动化领域的国产中坚力量,全志T3/A40i处理器国产平台一直深受广大客户的喜爱,甚有"国产工业鼻祖处理器"之称.自创龙科技推出T3/A40i全国产工业核心板(S ...

  5. PLSQL 编码设置

    1.先查询plsql编码格式 select userenv('language')from dual 2.新建用户变量,变量名=NLS_LANG,变量值,刚才sql查询的结果 保存后,重启plsql即 ...

  6. 全网最适合入门的面向对象编程教程：11 类和对象的Python实现-子类调用父类方法-模拟串口传感器和主机

    全网最适合入门的面向对象编程教程:11 类和对象的 Python 实现-子类调用父类方法-模拟串口传感器和主机 摘要: 本节课,我们主要讲解了在 Python 类的继承中子类如何进行初始化.调用父类的 ...

  7. LAMP与LNMP架构的区别

    我们就来说说ApacheApache是世界上用排名第一的Web服务器软件,其几乎可以在所有广泛使用的计算机平台上运行,由于其跨平台和安全性被广泛使用,是最流行的Web服务端软件之一.相比于nginx, ...

  8. MViT：性能杠杠的多尺度ViT | ICCV 2021

    论文提出了多尺度视觉Transformer模型MViT,将多尺度层级特征的基本概念与Transformer模型联系起来,在逐层扩展特征复杂度同时降低特征的分辨率.在视频识别和图像分类的任务中,MViT ...

  9. Modbus转Profinet网关模块连PLC与流量计通讯案例

    一.案例背景 在饮品加工厂中,会涉及到流量计的使用,然而达到对流量计的精准控制和数据采集需要用到PLC,由于PLC和流量计可能使用不同的通信协议(如Profinet和Modbus),造成两者不能自接进 ...

  10. oeasy教您玩转vim - 48 - # ed由来

    ​ 范围控制 回忆上节课内容 我们这次研究了mark的定义和使用 mb定义 'b跳转 可以对marks,查询删除 三种marks 小写 本文件内 大写 跨文件 数字 配置文件中 甚至可以在行编辑中,使 ...