效果预览

代码

<!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. DHorse v1.5.1 发布，基于 k8s 的发布平台

    版本说明 新增特性 支持k8s的v1.30.x版本: 优化特性 优化回滚功能: 修复注册来源的回滚问题: 新增和修改应用时校验应用名: 升级kubernetes-client至v6.13.0: 调整部 ...

  2. 交通规划四阶段法：基于 Python 的交通分布预测算法复现 - 附完整代码链接

    目录 交通规划四阶段法:基于 Python 的交通分布预测算法复现 - 附完整代码链接 我只是想使用这些代码 下载代码文件 代码的使用方法 合作 部分代码内容的展示 交通规划四阶段法:基于 Pytho ...

  3. java+SpringCloud开发的性能和环保问题

    对于大部分商业应用开发程序员而言,使用java+spring是一件幸福的事情. 一般情况下,我们使用cloud开发不是那么重要.精密的应用,这些应用包括例如大型的商业交易,社区等等. 因为这些应用天然 ...

  4. 含税168元起！四核A53+NPU+PCIe+USB3.0，瑞芯微RK3562性价比真高！

     

  5. Openstack制作Rhel9，使用IOS镜像制作

    转自作者自己的CSDN  拷贝 ==================== 需要已有环境: 1.Openstack 2.qume-img,kvm,virsh.... (yum install qemu- ...

  6. Spring DI(依赖注入)自动装配 @Autowired、@Resource注解

    @Autowired:一部分功能是查找实例,从Spring容器中根据类型(Java类)获取对应的实例:另一部分功能就是赋值,将找到的实例,装配给另一个实例的属性值.(注:一个Java类型在同一个Spr ...

  7. CF717E

    这道题属于是那种看上去很有思路,然后无从下手,写了个dfs感觉实在是不行. 后面仔细看了一下,这个题是用的构造dfs,基本是树上dfs,时间复杂度是O(V+E) 新构造的一个参数作为根,整个dfs表示 ...

  8. 《探索Python Requests中的代理应用与实践》

    requests加代理 高匿API代理 此处使用的小象代理:1元100个,便宜,可以购买尝试加下代理 存活期1到2分钟 import time import requests from lxml im ...

  9. Task异步多线程

    不废话,直接贴上要实现的效果和代码... [1]直接使用Lambda表达式是实现多线程: using System; using System.Collections.Generic; using S ...

  10. Go微服务开发指南

    在这篇深入探讨Go语言在微服务架构中的应用的文章中,我们介绍了选择Go构建微服务的优势.详细分析了主要的Go微服务框架,并探讨了服务发现与注册和API网关的实现及应用. 关注TechLead,复旦博士 ...