效果预览

代码

<!DOCTYPE html>

<html>

  <head>

    <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 17:05:50">

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

      <title>CSS动画大全之火影忍者动态背景</title>

    </head>

  </head>

  <style>

    body {

      padding: 0;

      margin: 0;

      box-sizing: border-box;

    }

    .page-wrapper {

      width: 100%;

      height: 100vh;

      display: flex;

      justify-content: space-around;

      align-items: center;

      justify-items: center;

      flex-direction: row;

      flex-wrap: wrap;

      box-sizing: border-box;

      padding: 3rem;

    }

    .page-wrapper > div {

      width: 20rem;

      height: 15rem;

      background-color: #55557f;

      position: relative;

      border-radius: 12px;

      display: grid;

      grid-template-columns: 100%;

      grid-template-rows: 100%;

      justify-content: center;

      justify-items: center;

      align-items: center;

      cursor: pointer;

    }

    .circle {

      width: 15rem !important;

      height: 15rem !important;;

      border-radius: 50% !important;;

    }

    img {

      z-index: 10;

      transition: all 0.8s ease;

      filter: sepia(1);

    }

    .right img {

      transform: scaleX(-1);

    }

    .bg {

      position: absolute;

      top: 0;

      left: 0;

      width: 100%;

      height: 100%;

      border-radius: 12px;

      overflow: hidden;

    }

    .first > .bg,

    .second > .bg  {

      border-radius: 50%;

    }

    .bg > span {

      position: absolute;

      top: 0;

      left: 0;

      width: 1.8rem;

      height: 100%;

      background-color: #acacac;

      transform: skewX(20deg);

      transition: all 0.5s ease;

    }

    .right > .bg > span {

      transform: skewX(-20deg);

    }

    .bg > span::before {

      content: '';

      position: absolute;

      left: 3rem;

      top: 0;

      width: 100%;

      height: 100%;

      background-color: #acacac;

      transition: all 0.5s ease;

    }

    .bg > span::after {

      content: '';

      position: absolute;

      left: -3rem;

      top: 0;

      width: 100%;

      height: 100%;

      background-color: #acacac;

      transition: all 0.5s ease;

    }

    .bg > span:nth-child(1) {

      left: -3rem;

    }

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

      left: 6rem;

    }

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

      left: 15rem;

    }

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

      left: 24rem;

    }

    .left:hover img {

      filter: drop-shadow(2px 4px 6px black);

      transform: scale(1.5) translateY(-30px);

    }

    .right:hover img {

      filter: drop-shadow(2px 4px 6px black);

      transform: scaleX(-1) scale(1.5) translateY(-30px);

    }

    .left:hover .bg > span {

      animation: animeSpanLeft 0.5s infinite linear;

    }

    .right:hover .bg > span {

      animation: animeSpanRight 0.5s infinite linear;

    }

    .page-wrapper > div:hover span,

    .page-wrapper > div:hover span::before,

    .page-wrapper > div:hover span::after {

      background-color: #ffff7f;

    }

    @keyframes animeSpanLeft {

      from{

        transform: translateX(0) skew(20deg);

      }

      to{

        transform: translateX(6.25rem) skew(20deg);

      }

    }

    @keyframes animeSpanRight {

      from{

        transform: translateX(0) skew(-20deg);

      }

      to{

        transform: translateX(6.25rem) skew(-20deg);

      }

    }

  </style>

  <body>

    <div class="page-wrapper">

      <div class="first circle left">

        <img src="./鸣人.png" height="280" />

        <div class="bg">

          <span></span>

          <span></span>

          <span></span>

          <span></span>

        </div>

      </div>

      <div class="second circle right">

        <img src="./鸣人.png" height="280" />

        <div class="bg">

          <span></span>

          <span></span>

          <span></span>

          <span></span>

        </div>

      </div>

      <div class="third left">

        <img src="./鸣人.png" height="280" />

        <div class="bg">

          <span></span>

          <span></span>

          <span></span>

          <span></span>

        </div>

      </div>

      <div class="fourth right">

        <img src="./鸣人.png" height="280" />

        <div class="bg">

          <span></span>

          <span></span>

          <span></span>

          <span></span>

        </div>

      </div>

    </div>

  </body>

</html>

图片资源

【全】CSS动画大全之其他【火影忍者动态背景】的更多相关文章

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

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

  2. Jquery 动态交换两个div位置并添加Css动画效果

    前端网页开发中我们经常会遇到需要动态置换两个DIV元素的位置,常见的思路大多是不考虑原始位置,直接采用append或者appendTo方式将两元素进行添加,该法未考虑原始位置,仅会添加为元素的最后一子 ...

  3. CSS动画-transition/animation

    HTML系列: 人人都懂的HTML基础知识-HTML教程(1) HTML元素大全(1) HTML元素大全(2)-表单 CSS系列: CSS基础知识筑基 常用CSS样式属性 CSS选择器大全48式 CS ...

  4. Css 动画的回调

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

  5. 【译】css动画里的steps()用法详解

    原文地址:http://designmodo.com/steps-c... 原文作者:Joni Trythall 我想你在css 动画里使用steps()会和我一样有很多困惑.一开始我不清楚怎样使用它 ...

  6. css动画属性性能

    性能主要表现:流量.功耗与流畅度 在现有的前端动画体系中,通常有两种模式:JS动画与CSS3动画. JS动画是通过JS动态改写样式实现动画能力的一种方案,在PC端兼容低端浏览器中不失为一种推荐方案. ...

  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动画属性会触发整个页面的重排relayout.重绘repaint.重组recomposite Paint通常是其中最花费性能的,尽可能避免使用触发paint的CSS动画属性,这也是为什么我们推荐 ...

随机推荐

  1. Springboot中自定义监听器

    一.监听器模式图 二.监听器三要素 广播器:用来发布事件 事件:需要被传播的消息 监听器:一个对象对一个事件的发生做出反应,这个对象就是事件监听器 三.监听器的实现方式 1.实现自定义事件 自定义事件 ...

  2. 【论文阅读】IROS2021: PILOT: Efficient Planning by Imitation Learning and Optimisation for Safe Autonomous Driving

    参考与前言 完整题目:PILOT: Efficient Planning by Imitation Learning and Optimisation for Safe Autonomous Driv ...

  3. Linux 特权 SUID/SGID 的详解

    导航 0 前言 1 权限匹配流程 2 五种身份变化 3 有效用户/组 4 特权对 Shell 脚本无效 5 Sudo 与 SUID/SGID 的优先级 6 SUID.SGID.Sticky 各自的功能 ...

  4. 详解Web应用安全系列(5)敏感数据泄露漏洞

    在最近几年,这是最常见的,最具影响力的攻击.这个领域最常见的漏洞是不对敏感数据进行加密.在数据加密过程中,常见的问题是不安全的密钥生成和管理以及使用弱密码算法,弱协议和弱密码.特别是使用弱的哈希算法来 ...

  5. 面试官：JVM调优，主要针对是哪一个区域？JVM内存结构是怎样的？

    作为一个Java程序员,在日常的开发中,不必像C/C++程序员那样,为每一个内存的分配而操心,JVM会替我们进行自动的内存分配和回收,方便我们开发.但是一旦发生内存泄漏或者内存溢出,如果对Java内存 ...

  6. MinIO使用记录

    探索MinIO:高性能.分布式对象存储解决方案 注:本文除代码外多数为AI生成 最近因为有项目需要换成Amazon S3的云存储,所以把之前做过的minio部分做一个记录,后面也会把基于这版改造的S3 ...

  7. SQL：聚集索引和非聚集索引

    聚集(clustered)索引,也叫聚簇索引 定义:数据行的物理顺序与列值(一般是主键的那一列)的逻辑顺序相同,一个表中只能拥有一个聚集索引. 注:第一列的地址表示该行数据在磁盘中的物理地址,后面三列 ...

  8. TIER 1: Appointment

    TIER 1: Appointment SQL Structured Query Language 是一种用于管理关系型数据库的编程语言.它是一种标准化的语言,用于定义.操作和管理数据库中的数据. 经 ...

  9. JavaScript 常用 Web APIs

    Web APIs Web APIs DOM 页面文档对象模型 DOM 树 获取元素 事件 监听事件 事件解绑 操作元素 样式属性操作 结点操作 结点关系 创建节点 DOM 事件流 事件对象 常用鼠标事 ...

  10. 题解：P10781 【MX-J1-T1】『FLA - III』Spectral

    本题的主要思路就是数学. 首先,让我们先来打一个表. \(i\) \(1\) \(2\) \(3\) \(4\) \(\dots\) \(T_{i}\) \(k\) \(1.5k\) \(1.5k\) ...