效果预览

代码

<!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. python logging日志没有写入到指定文件,写到其他项目的日志文件

    背景: 项目A为主框架项目,使用到了项目B的方法 项目A.B均有封装好的日志方法,且均在封装好的日志文件里面,增加了logger = MyLogger().info,其他文件要使用日志时,引入logg ...

  2. 04-Python文件操作

    打开文件 f=open("我的文件.txt","r",encoding="utf8") #打开一个文件(读模式) f.close() #关闭 ...

  3. 我写CSS的常用套路(附demo的效果实现与源码）

    大赞: https://mp.weixin.qq.com/s/dYCWYeM629DwiSqmaaAs1w

  4. 解决 Xshell 无法使用 zsh 的 prompt style

    为了更好的阅读体验,请点击这里 先学习一下 zsh 的配置吧~ 参考资料 从 0 开始:教你如何配置 zsh powerlevel10k 如何给 Xshell 配置呢 当我安装完 oh-my-zsh. ...

  5. 使用iperf3调试网络

    介绍 Iperf是一款基于TCP/IP和UDP/IP的网络性能测试工具,它可以用来测量网络带宽和网络质量,还可以提供网络延迟抖动.数据包丢失率.最大传输单元等统计信息.网络管理员可以根据这些信息了解并 ...

  6. python基础-列表list [ ]

    列表的定义和操作 列表的特性: 元素数量 支持多个 元素类型 任意 下标索引 支持 重复元素 支持 可修改性 支持 数据有序 是 使用场景 可修改.可重复的 一批数据记录场景 # 定义一个列表list ...

  7. 详细讲解 Keil Pack Installer，以及通过 Keil 官网获取 Pack

    前言 大家好,我是梁国庆. 收到粉丝留言,说 Keil 安装 Pack 不太明白,可不可以详细演示一下? 当然可以有,直接视频+文章全部安排,我就是宠粉. PS:第一次录视频有些紧张,见谅哈. 微信视 ...

  8. P9376 题解

    首先考虑怎么暴力. 考虑把每个数进行 \(B\) 进制分解,然后我们惊奇的发现这两个操作就是把最低位去掉和往最低位后面插入一个数. 然后我们顺藤摸瓜,把每个数的分解扔到 Trie 树上,我们发现我们要 ...

  9. 如何支持同一台电脑上使用不同版本的Node.js版本

    在我们实际项目开发过程中,经常不同项目使用的node.js版本会也有所不同,为了方便维护不同版本的项目.可以使用nvm来解决. 1.下载nvm https://github.com/coreybutl ...

  10. TokenObtainPairSerialize和TokenObtainPairView

    TokenObtainPairSerializer和TokenObtainPairView是Django REST framework的SimpleJWT库提供的两个相关的类. TokenObtain ...