<template>
<div>
</div>
</template>
<style lang="scss">
html, body {
    width: 100%;
    height: 100%;
    display: flex;
}
div {
    margin: auto;
    position: relative;
    width: 30vw;
    height: 70vh;
    background: url(https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2128480768,3645204276&fm=26&gp=0.jpg) no-repeat;
    background-size: cover;
   
    &::before {
        position: absolute;
        content: "";
        top: 0;left: 0; right: 0;bottom: 0;
        background: url(https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1877625006,2341162086&fm=26&gp=0.jpg) no-repeat;
        background-size: cover;
        z-index: 1;
        animation: maskRotate 4s ease-in-out infinite;
    }
}
@keyframes maskRotate {
    @for $i from 0 through 50 {
        #{$i}% {
            mask: linear-gradient(45deg, #000 #{$i * 2 + '%'}, transparent #{$i * 2.5 + '%'}, transparent #{$i * 2.5 + '%'});
        }
    }
    100% {
        mask: linear-gradient(45deg, #000, #000 100%);
    }
}
</style>

转自:https://csscoco.com/inspiration/#/./background/bg-mask-transition.md

css 实现图片专场的更多相关文章

  1. Django调用JS、CSS、图片等静态文件

    zz 在下面的例子中,我们将media作为静态(CSS\JS\图片文件)文件的目录 方法一. 1.首先在settings.py文件中自定义参数 STATIC_PATH=’./media’ .(意为当前 ...

  2. Bootstrap css背景图片的设置

    一. 网页中添加图片的方式有两种 一种是:通过<img>标签直接插入到html中 另一种是:通过css背景属性添加 居中方法:水平居中的text-align:center 和 margin ...

  3. 使用CSS将图片转换成黑白(灰色、置灰)z转

    小tip: 使用CSS将图片转换成黑白(灰色.置灰) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.c ...

  4. Spring MVC程序中得到静态资源文件css,js,图片

    转载自:http://www.blogjava.net/fiele/archive/2014/08/24/417283.html 用 Spring MVC 开发应用程序,对于初学者有一个很头疼的问题, ...

  5. css背景图片拉伸 以及100% 满屏显示

    如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在 ...

  6. 网站性能优化之CSS无图片技术:三角形

    1.使用CSS无图片技术,可以总结得到以下三个优点: 减少请求资源的大小: 减少http的请求个数: 提高可维护性. 一.CSS无图片技术,微博中有哪些实际应用呢? 通过上面的展示,我们可以看到,无图 ...

  7. mvc伪静态<四> 伪静态后静态页面或者引用的css和图片失效

    引用的css和图片失效的解决办法 把样式引用文件的相对路径改成绝对路径就可以了 比如原先的引用路径为:<link href="~/Content/css/style.css" ...

  8. CSS实现图片快速等比例缩放,效果佳

    初学者在实现图片等比例缩放,通常会使用js编写逻辑来控制高或宽,达到自动缩放的效果. 这里提供一种纯CSS的图片缩放功能,请看代码: <style type="text/css&quo ...

  9. 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果

    去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟 ...

随机推荐

  1. PCI协议 总结

    1.引脚 必要的引脚在左边,任选的引脚在右边 2.CLK in:时钟输入,为所有PCI上的接口传送提供时序.其频率也称为PCI的工作频率. 大部分信号都在CLK的上升沿有效 3.AD0~AD31 t/ ...

  2. 进制转换 Java day6

    今天周末学习的不多,只学习了一些二进制转十进制,八进制.十六进制,以及数据单位 二进制转十进制 我们都知道十进制转二进制就是除以2取余的方法.那二进制转到十进制又如何处理呢,今天我来学习以下 我们看看 ...

  3. 如何处理异形屏iphone X?

    safe area: 默认放置在安全区域以避免遮挡, 但会压缩 在meta中添加viewport-fit=cover: 告诉浏览器要讲整个页面渲染到浏览器中,不管设备是圆角与否,这个时候会造成页面的元 ...

  4. Dubbo 的整体架构设计有哪些分层?

    接口服务层(Service):该层与业务逻辑相关,根据 provider 和 consumer 的 业务设计对应的接口和实现 配置层(Config):对外配置接口,以 ServiceConfig 和  ...

  5. 面试问题之计算机网络:简述TCP和UDP的区别以及优缺点

    转载于:https://blog.csdn.net/liulin1207/article/details/80960964 一.TCP: TCP是面向连接的通讯协议,通过三次握手建立连接,通讯完成时四 ...

  6. elasticsearch 5.6.7在线安装ik分词,亲测有效

    官网的在线安装命令 ./bin/elasticsearch-plugin install https://github.com/medcl/elasticsearch-analysis-ik/rele ...

  7. Thoughtworks Technology Radar #26 技术雷达26期

    Thoughtworks Technology Radar #26 Techniques Adopt Four key metrics Google Cloud's DevOps Research a ...

  8. css流程图、步骤图,流程线与环节分别实现,支持单环节、多环节情况。scss生成CSS

    适用于分步骤操作的页面导航图 实现结果如下 上图对应下述代码,稍作修改可以生成下图.css代码如下: @charset "UTF-8"; /**单列宽度 单行高度 列数 行数*/ ...

  9. 小程序完整对接 pingpp支付

    小程序完整对接 pingpp支付 有几个先要条件: 小程序需要企业认证且开通支付功能,个人认证是无法使用支付功能的(小程序微信支付官网) pingpp 本身接入的企业服务器(即商户服务器)并不强制要求 ...

  10. 在linux环境下安装VMtools(成功)

    想在主机和虚拟机之间互相复制文件吗? 想更加方便的联系主机和虚拟机吗?  就安装VMtools吧 其实,在linux下安装VMtools 是非常的简单,只要简单地几步就行了! 第一步:打开虚拟机,在左 ...