效果预览

代码

<!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. spring使用jdk17运行出现编码问题

    遇到一个比较奇怪的问题. 这个问题别人也遇到过. https://blog.csdn.net/gao_chuan_g/article/details/115117712 一.情况简介 使用jdk17+ ...

  2. 初学者必读：如何使用 Nuxt 中间件简化网站开发

    title: 初学者必读:如何使用 Nuxt 中间件简化网站开发 date: 2024/6/24 updated: 2024/6/24 author: cmdragon excerpt: 本文概述了N ...

  3. 微服务上云Dockerfile编写，如何上云时将生产环境和开发环境分离并正确书写自定义启动命令

    点击查看代码 FROM openjdk:8-jdk LABEL maintainer=yao #docker run -e PARAMS="--server.port 9090" ...

  4. .NET App 与Windows系统媒体控制(SMTC)交互

    当你使用Edge等浏览器或系统软件播放媒体时,Windows控制中心就会出现相应的媒体信息以及控制播放的功能,如图. SMTC (SystemMediaTransportControls) 是一个Wi ...

  5. FM20S用户手册-Linux开发环境搭建

  6. python后端model模板

    from django.contrib.contenttypes.fields import GenericForeignKey, GenericRelation from django.contri ...

  7. Java-Session服务器端会话技术

    Session 概念:服务器端会话技术,在一次对话的多次请求间共享数据,将数据保存在服务器端的对象中.HttpSession 快速入门: 获取Session对象 * HttpSession sessi ...

  8. C++使用gnuplot-cpp库绘制图像

    最近想要对一些时变的变量进行可视化,搜索来搜索去选择了使用gnuplot这个工具. sudo apt-get install gnuplot sudo apt-get install gnuplot- ...

  9. [oeasy]python0045_转化为10进制数_int_integrate_integer_entire_整数

    转化为10进制 回忆上次内容 上这次总结了四种进制 函数名 对应单词 进制类型 数字事例 前缀 bin() binary 2 0b1100001 0b oct() octal 8 0o141 0o h ...

  10. 题解：P10733 [NOISG2019 Prelim] Lost Array

    题解:P10733 [NOISG2019 Prelim] Lost Array 思路 对于任意 \(\min(X_{A_{i}},X_{B_{i}})=C_{i}\). 只要让 \(X_{A_{i}} ...