<template>
<div>
  <div class="a"></div>
<div class="b"></div>
</div>
</template>
<style lang="scss">
$img2: 'http://up.enterdesk.com/edpic_source/21/00/00/210000f8e772d7fc0758e67ae4b48807.jpg';
$img1: 'https://images.unsplash.com/photo-1440688807730-73e4e2169fb8?dpr=1&auto=format&fit=crop&w=1500&h=1001&q=80&cs=tinysrgb&crop=';
$count: 360;
div {
    position: absolute;
    top:0;
    left: 0;
    width: 100vw;
    height: 100vh;
   
}
.a {
    background: url($img1);
    background-size: 100% auto;
}
.b {
    background: url($img2);
    background-size: 100% auto;
    mask-image: linear-gradient(0, rgba(0, 0, 0, 1) 40%, transparent 60%);
    mask-image-position: 50% 50%;
    animation: move 10s infinite;
}
@keyframes move {
   
    @for $i from 0 through $count {
        #{$i / $count * 100}% {
            mask-image: linear-gradient($i / $count * 360deg, rgba(0, 0, 0, 1) 40%, transparent 60%);
        }        
    }
}
</style>
 
 
转自: https://csscoco.com/inspiration/#/./background/bg-mask-image.md

图片叠加科幻切换 -- css的更多相关文章

  1. CSS 奇思妙想 | 使用 resize 实现强大的图片拖拽切换预览功能

    本文将介绍一个非常有意思的功能,使用纯 CSS 利用 resize 实现强大的图片切换预览功能.类似于这样: 思路 首先,要实现这样一个效果如果不要求可以拖拽,其实有非常多的办法. 将两张图片叠加在一 ...

  2. css图片叠加和底部定位

    css图片叠加和底部定位 css图片叠加 两张图片需要叠在一起显示,如何定位 容器先对定位 第一张图片正常摆放 第二张图片绝对定位,top:0px 这样便实现了两张图片叠加在一起了,设置z-index ...

  3. jquery.roundabout.js实现3D图片层叠旋转木马切换

    最近项目中需要实现3D图片层叠旋转木马切换的效果,于是用到了jquery.roundabout.js. 兼容性如图: html结构代码: <div id="featured-area& ...

  4. jQuery - 广告图片轮播切换

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  5. Js实现图片点击切换与轮播

    Js实现图片点击切换与轮播 图片点击切换 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  6. JS框架_(JQuery.js)图片相册掀开切换效果

    百度云盘 传送门 密码:y0dk 图片掀开切换效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...

  7. BackgroundCheck – 根据图片亮度智能切换元素样式

    BackgroundCheck 是一个轻量的 JavaScript 库,能够根据元素后面的图片的亮度自动切换元素样式.例如在图片幻灯片功能中,根据图片亮度调整导航箭头的颜色,这样让图片和导航的颜色形成 ...

  8. 一款基于css3的3D图片翻页切换特效

    今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id= ...

  9. Jquery图片轮播和CSS图片轮播

    学习Jquery以后,很多时候觉得比写源生代码要简单一点.我们用JQuery做了一个图片轮播的动画,感觉比写CSS要简单一些.下面我来具体讲一下是怎么用JQuery来写. <body> & ...

随机推荐

  1. Source Code Reading for Vue 3: How does `hasChanged` work?

    Hey, guys! The next generation of Vue has released already. There are not only the brand new composi ...

  2. ASP.NET Core 6框架揭秘实例演示[26]:跟踪应用接收的每一次请求

    很多人可能对ASP.NET Core框架自身记录的诊断日志并不关心,其实这些日志对纠错排错和性能监控提供了很有用的信息.如果需要创建一个APM(Application Performance Mana ...

  3. 所有整数型包装类对象值的比较,使用equals方法进行比较

    一.整数型包装类对象值的比较,使用equals方法进行比较 题眼:整型包装类.值的比较 注:== :对于基本类型,比较的是值:对于引用类型,比较的是地址值. // 组一Integer i1=new I ...

  4. 【SEED Labs】TCP Attacks Lab

    Lab Overview 实验环境下载:https://seedsecuritylabs.org/Labs_16.04/Networking/TCP_Attacks/ 本实验涵盖以下课题: • TCP ...

  5. corn计划周期任务

                                                                             corn计划任务 1.计划任务有四种方式   cron ...

  6. Kubernetes:存储管理

    Blog:博客园 个人 参考:Volumes | Kubernetes.Persistent Volumes | Kubernetes.Kubernetes 基础入门实战 简单来说,存储卷是定义在Po ...

  7. Skye无人机刷Betaflight详细图文教程

    ​前言 首先十分感谢B站TASKBL up主的视频教程以及他的耐心指导,视频链接Skye 原机主板刷BetaFlight 参考教程_哔哩哔哩_bilibili.整个改造过程耗时三天,现把改造过程以及遇 ...

  8. 一文看懂 C 语言 I/O

    再会吧,这宝贵的片刻和短暂的时机限制了我在情义上的真挚表示,也不能容我们畅叙衷曲,这本来是亲友重逢所应有的机缘:愿上帝赐给我们美好的未来,好让我们开怀畅谈!再一次告别:勇敢作战吧,祝你胜利!--威廉• ...

  9. 什么是springcloud?springcloud断路器的作用是什么?springcloud的核心组件有什么?

    一.什么是springcloud 1.springcloud概述 Spring Cloud是一个微服务框架,相比Dubbo等RPC框架, Spring Cloud提供的全套的分布式系统解决方案. Sp ...

  10. AOP 有哪些实现方式?

    实现 AOP 的技术,主要分为两大类: 静态代理 指使用 AOP 框架提供的命令进行编译,从而在编译阶段就可生成 AOP 代理类, 因此也称为编译时增强: 编译时编织(特殊编译器实现) 类加载时编织( ...