效果预览

代码

<!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. 反模式 DI anti-patterns

    反模式 DI anti-patterns 反模式DI anti-patterns <Dependency Injecttion Prinsciples,Practices, and Patter ...

  2. Maven配置阿里云镜像和本地仓库路径

    配置阿里云镜像仓库 在settings > mirrors标签下添加以下内容 <!-- Aliyun Mirror --> <mirror> <id>alim ...

  3. 如何在Spring Boot框架下实现高效的Excel服务端导入导出？

    前言 Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置 ...

  4. 详解Web应用安全系列(3)失效的身份认证

    大多数身份和访问管理系统的设计和实现,普遍存在身份认证失效的问题.会话管理是身份验证和访问控制的基础,并且存在于所有有状态的应用程序中.攻击者可以使用指南手册来检测失效的身份认证,但通常会关注密码转储 ...

  5. Latex 公式 如何转为Word 公式，免费线上网站

    在实际中,我们常常需要讲将atex公式在word中书写.不采用手敲word公式,如何直接从Latex公式转word公式: 非常好的网站:https://www.latexlive.com/ 可以直接复 ...

  6. 【论文阅读】TRO2022: A Two-Stage Optimization-Based Motion Planner for Safe Urban Driving

    TRO2022: A Two-Stage Optimization-Based Motion Planner for Safe Urban Driving Summary: 探讨planning过程中 ...

  7. 嵌入式必看！全志T113-i＋玄铁HiFi4核心板硬件说明资料分享

    目 录 1 硬件资源 2 引脚说明(篇幅问题,暂不提供详细内容) 3 电气特性 4 机械尺寸 5 底板设计注意事项 硬件资源 SOM-TLT113核心板板载CPU.ROM.RAM.晶振.电源.LED等 ...

  8. 尝试官方的第一个SpringNative 0.11程序（WSL2）

    Spring Native是Spring推出微服务体系Spring Cloud之后的又一大举动,从名字可以猜出,Spring Native是一门面向云原生的技术.如果你还对这个概念不太理解,可以多看一 ...

  9. Oracle自定义数据类型

    1 CREATE OR REPLACE FUNCTION split(p_str IN clob, 2 p_delimiter IN VARCHAR2 default (',') --分隔符,默认逗号 ...

  10. Oracle 触发器 before insert update

    场景,往A表插入数据时,A表和B表是同一类型的状态下,A表中累计的值,不能超过B表中的值(注:往数据库插入时,不能批量执行事务!),利用触发器before insert update,监控状态,若超过 ...