效果预览

代码

<!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. 阿里云ECS主机自建SNAT，实现没有公网的主机通过有公网的主机访问外网

    目的: SNAT:实现没有公网IP的ECS实例借助有公网的ECS访问外网 实现前提: 有公网的主机与没有公网的主机必须处在同一个VPC安全组(确保两个主机互通才可以) 全程都在有公网的主机上操作 开启 ...

  2. Chrome插件：​Vue.js Devtools 高效地开发和调试

    ​ 在现代前端开发中,Vue.js因其灵活性和性能优势,受到越来越多开发者的青睐.然而,随着项目规模的扩大,调试和优化变得愈发复杂.幸运的是,Vue.js Devtools的出现,为开发者提供了一套强 ...

  3. Wireshark抓包分析理解DHCP协议及工作流程

    一.DHCP简介   DHCP(Dynamic Host Configuration Protocol)动态主机配置协议,前身是BOOTP协议.在大型局域网中,需要给很多主机配置地址信息,如果采用传统 ...

  4. 读懂反向传播算法（bp算法）

    原文链接:这里 介绍 反向传播算法可以说是神经网络最基础也是最重要的知识点.基本上所以的优化算法都是在反向传播算出梯度之后进行改进的.同时,也因为反向传播算法是一个递归的形式,一层一层的向后传播误差即 ...

  5. unity中Shader实现地形中根据实际高度绘制等高线，剖切功能，颜色渐变等功能

    问题背景 在做地形模块时,需要根据实际地形高度画出世界相应的等高线,以及根据高度做颜色渐变,以及剖切功能. 解决方法 通过像素点在世界坐标系下的真实高度值来判断计算绘制等高线,剖切功能以及颜色渐变均有 ...

  6. vue-router 路由模式有几种？

    实际上存在三种模式: Hash:      使用URL的hash值来作为路由.支持所有浏览器. History:   以来HTML5 History API 和服务器配置.参考官网中HTML5 His ...

  7. Mybatis ResultMap复杂对象一对一查询结果映射之association

    Mybatis复杂对象映射配置ResultMap的association association:映射到POJO的某个复杂类型属性,比如订单order对象里面包含user对象 表结构 项目结构 pom ...

  8. mac idea 配置Tomcat

    官网下载Tomcat 下载地址:点我直达 配置Idea 设置Application Servers 操作步骤:Intellij IDEA->Preferences->Application ...

  9. canvas绘制飞线效果

    在我们做的可视化大屏项目中,经常会遇到飞线的效果. 在我们的大屏编辑器中,可以通过拖拽+配置参数的方式很快就能够实现.下面是我们使用大屏编辑器实现的一个项目效果: 中间地图就有飞线的效果. 抛开编辑器 ...

  10. PHP str_replace() 函数详解

    PHP str_replace() 函数详解 1.前言: str_replace() 函数以其他字符替换字符串中的一些字符(区分大小写). 该函数区分大小写.请使用 str_ireplace() 函数 ...