效果预览

代码

<!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 _XMLParser.__init__()初始化失败，提示“takes 1 positional argument but 4 were given”

    问题: 在一个新的环境下,执行openpyxl相关的操作,初始化时,逐步执行,需要调到 ElementTree.py _XMLParser.__init__(self, html, target, e ...

  2. SpringMVC-01-回顾MVC架构

    1.什么是MVC MVC是模型(Model).视图(View).控制器(Controller)的简写,是一种软件架构模式. 它通过将业务逻辑.页面控制.显示视图分离的方法来组织代码. 主要作用是降低了 ...

  3. Linux设备模型：3、Uevent

    作者:wowo 发布于:2014-3-10 20:39 分类:统一设备模型 http://www.wowotech.net/device_model/uevent.html Uevent Uevent ...

  4. 设备树DTS 学习：学习总结（应用篇）

    设备树DTS 学习:学习总结(应用篇) 背景 经过前几章的学习,我们可以说是掌握了设备树的基础用法,现在作为总结回顾. 1.设备树DTS 学习:有关概念 介绍了什么是设备树,设备树的作用,如何编译设备 ...

  5. Linux系统基本介绍

    一.Linux系统基本介绍 [1].Linux操作系统特点 多任务的操作系统 多任务操作系统 严格区分大小写 Linux一切皆文件 所有文件的起点都是"/"根目录 对于Linux操 ...

  6. P1754

    球迷购票问题 题意描述 盛况空前的足球赛即将举行.球赛门票售票处排起了球迷购票长龙. 按售票处规定,每位购票者限购一张门票,且每张票售价为50元.在排成长龙的球迷中有N个人手持面值50元的钱币,另有N ...

  7. Python代码学习

    1.生成四位数字字母验证码,大小写字母随机 import random if __name__ =="__main__": #四位数字字母验证码的生成 checkcode=&quo ...

  8. BS架构和CS架构应用

    概述     B/S结构即浏览器和服务器结构.它是随着Internet技术的兴起,对C/S结构的一种变化或者改进的结构.在这种结构下,用户工作界面是通过WWW浏览器来实现,极少部分事务逻辑在前端(Br ...

  9. 重磅消息：微软发布多平台应用UI框架 MAUI，网友直呼：牛x

    本文内容来自微软开发博客:https://devblogs.microsoft.com/dotnet/introducing-net-multi-platform-app-ui/ 转载请注明来源,公众 ...

  10. 一文揭开JDK21虚拟线程的神秘面纱

    虚拟线程快速体验 环境:JDK21 + IDEA public static void main(String[] args) { try (var executor = Executors.newV ...