效果预览

代码

<!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. .Net8 AddKeyedScoped键值key注册服务异常

    异常描述:This service descriptor is keyed. Your service provider may not support keyed services. 场景:.Net ...

  2. WPF/C#：BusinessLayerValidation

    BusinessLayerValidation介绍 BusinessLayerValidation,即业务层验证,是指在软件应用程序的业务逻辑层(Business Layer)中执行的验证过程.业务逻 ...

  3. Freertos学习：04-任务的调试函数

    --- title: rtos-freertos-04-任务的调试函数 EntryName: rtos-freertos-04-task-debug date: 2020-06-22 08:49:06 ...

  4. 从零开始学Spring Boot系列-集成Spring Security实现用户认证与授权

    在Web应用程序中,安全性是一个至关重要的方面.Spring Security是Spring框架的一个子项目,用于提供安全访问控制的功能.通过集成Spring Security,我们可以轻松实现用户认 ...

  5. 使用EF 连接 数据库 SQLserver、MySql 实现 CodeFirst

    1.新建项目,下载Nuget安装包 创建项目需要注意几点,如果是基于 .net framework 的项目 需要选择 相应版本的 EF, 如果是跨平台则选择EF Core版本. 我这里选择的是 .ne ...

  6. AT_abc215F 题解

    考虑二分答案. 假设当前二分的答案为 \(k\),那么对于每个点,距离大于等于 \(k\) 的点构成了平面上 \(4\) 个子平面. 那么只需查询子平面中是否存在点即可,类似于窗口的星星,把问题转换成 ...

  7. Java uuid生成随机32位

    import java.util.UUID; /** * @ClassName:UuidUtils * @Description:uuid工具类 * @Author:chenyb * @Date:20 ...

  8. .NET周刊【7月第1期 2024-07-07】

    国内文章 学习.NET 8 MiniApis入门 https://www.cnblogs.com/hejiale010426/p/18280441 MiniApis是ASP.NET Core中的轻量级 ...

  9. 文件系统(九)：一文看懂yaffs2文件系统原理

    liwen01 2024.07.07 前言 yaffs 是专为nand flash 设计的一款文件系统,与jffs 类似,都是属于日志结构文件系统.与jffs 不同的是,yaffs 文件系统利用了na ...

  10. FPGA CFGBVS 管脚接法

    说明 新设计了1个KU040 FPGA板子,回来之后接上JTAG FPGA不识别.做如下检查: 1.电源测试点均正常: 2.查看贴片是否有漏焊,检查无异常,设计上NC的才NC: 3.反复检查JTAG接 ...