<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. kubernetes如何强制删除namespace

    K8S如何强制删除namespace 先运行kubectl get namespace ingress-nginx -o json > nginx.json,拿到当前namespace描述,然后 ...

  2. 寻路算法之A*算法详解

    前言 在实际开发中我们会经常用到寻路算法,例如MMOARPG游戏魔兽中,里面的人物行走为了模仿真实人物行走的体验,会选择最近路线达到目的地,期间会避开高山或者湖水,绕过箱子或者树林,直到走到你所选定的 ...

  3. 17调试经验之串口读写flash协议

    一是设计功能 我的理解协议就是一个命令包,通过给出不同的控制命令,来调动不同的功能模块,实现不同的功能,如读数据,写数据,擦除等. 二设计过程 先看了尤老师的视频,主要讲了大致设计原理和总体框架,当然 ...

  4. bzoj4241/AT1219 历史研究(回滚莫队)

    bzoj4241/AT1219 历史研究(回滚莫队) bzoj它爆炸了. luogu 题解时间 我怎么又在做水题. 就是区间带乘数权众数. 经典回滚莫队,一般对于延长区间简单而缩短区间难的莫队题可以考 ...

  5. bzoj2084/luoguP3501 [Poi2010]Antisymmetry(回文自动机+dp)

    bzoj2084/luoguP3501 [Poi2010]Antisymmetry(回文自动机+dp) bzoj Luogu 对于一个01字符串,如果将这个字符串0和1取反后,再将整个串反过来和原串一 ...

  6. Java思考——HashSet集合如何保证元素的唯一性也就是不包含重复元素?

    首先将源码逐级找出来1.HashSet<String> hs=new HashSet<String>();         hs.add("hello"); ...

  7. Spring Cloud与Spring Boot版本匹之间的关系

    由于学习的起步较晚,创建项目的时候一直采用的都是较新的springboot,用的2.0.2.RELEASE版本.参照网上的示例进行实验的时候,有时候会才坑,特记录一二以备忘 首先就是SpringBoo ...

  8. SpringDataRedis持续更新部分值使用方式

    官方文档:https://docs.spring.io/spring-data/redis/docs/2.3.4.RELEASE/reference/html/#redis.repositories. ...

  9. can总线第二讲

    一 CAN总线拓扑结构CAN是一种分布式的控制总线,总线上的每一个节点一般来说都比较简单,使用MCU控制器处理CAN总线数据,完成特定的功能:通过CAN总线将各节点连接只需较少的线缆(两根线:CAN_ ...

  10. 串联型PID,并联型PID与标准型PID简要说明

    PID广泛应用于工业生产各个环节,然而对于不同PID结构会有一些差异,导致在调参时若按照常规的经验调试,结果将会有非常大的不同. 串联型PID(Serial PID) 串联型PID的三个环节由比例,积 ...