使用mpvue实现动态图片波浪图效果

有时候制作小程序需要一点动态的效果。 话不多说直接上图看效果。

话说实现方式很简单。

首先准备一张背景图。

然后准备一张波浪图:

下载:点我下载

vue的代码如下:

<template>
  <div>
    <section class="sec-nav">
      <navigationBar :title="videoTitle" :titleColor="‘black‘"></navigationBar>
    </section>
    <div class="content">
      <div class="about-bg">
      <image src="https://image.weilanwl.com/gif/wave.gif" mode="scaleToFill" class="about-img"></image>
      </div>
    </div>
  </div>
</template>
<script>

接着CSS代码如下:

<style lang="scss">
.content {
 background-color:#f8f8f9;
      width: 100vw;
      height: 200vh;
      box-sizing: border-box;
      display: flex;
      padding-top: 0rpx;
      flex-direction: column;
      justify-content: flex-start;
 .about-bg{
      background-image: url(http://www.jingsoftware.com:3316/chen_xcy/img/context/aboutus.jpg);
      width:100vw;
      height:300rpx;
      background-size: cover;
      display: flex;
      justify-content: center;
      padding-top: 40rpx;
      overflow: hidden;
      position: relative;
      flex-direction: column;
      align-items: center;
      color: #fff;
      font-weight: 300;
      text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
.about-img {
      position: absolute;
      width: 100%;
      bottom: 0px;
      left: 0;
      z-index: 99;
      mix-blend-mode: screen;
      height: 100rpx;
      }
    }
 }
</style>

  这里的关键就是这段话:

mix-blend-mode: screen; 这种技巧可以套用任意一张背景图用来做波浪图。

原文地址:https://www.cnblogs.com/xochin001/p/11267159.html

时间: 2024-10-08 23:05:57

使用mpvue实现动态图片波浪图效果的相关文章

iOS动态元素引导图效果实现

原文链接: iOS动态元素引导图效果实现 简书主页:http://www.jianshu.com/users/37f2920f684 Github主页:https://github.com/MajorLMJ iOS开发者公会-技术1群 QQ群号:87440292 iOS开发者公会-技术2群 QQ群号:232702419 iOS开发者公会-议事区   QQ群号:413102158

JavaScript实现移动端轮播图效果

功能描述: 自动无缝轮播图片,底部小圆点跟图片保持一致:手指左右移动轮播图,移动距离大于50px播放下一张(或上一张),小于50px则回弹 具体功能实现: 1.定时器 自动轮播图片 先声明一个index=0用来存图片索引: 添加一个定时器,每隔两秒调用一次,每调用一次定时器(图片播放一次)index就加一: 通过transform(变形)属性和transition(过渡)属性实现图片的轮播. 1 var index = 0; 2 var timer = setInterval(function(

超酷动态图片展示墙JS特效制作方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type='text/javascript'

开发路程(14):背景图片移动插件MyFloatingBg(浮动背景图效果,可让背景随着页面的滚动而滚动)

MyFloatingBg这插件可以帮助你在网页上加入可移动背景Background.你可以用于整个文件的背景,或是某几个banner的背景. 它可支持简单的animation效果,你不用去做一个flash文件或动态gif图片.单靠jquery和图片,你便可以做出不同的效果.由于我们把动画效果跟内容分开,我们也可以随时更改文字等内容,而不影响其运作.这个效果很是大气,我想可以使用在高级餐厅,珠宝展会等中做展示用. 1 <!doctype html> 2 <html lang="e

图片热区比切图效果好

切片和图像热区是啥?图像切片是将很大的页面图像,切成相似拼图的那种方式,以后运用 HTML 代码,再完满的拼接起来的一种加快页面图像显现的方法,图像切片以后你还能够在不一样的切片上参加连接等等,然后到达点击不一样图像区域跳转到不一样页面的作用.图像热区是在一章图像上,制作任意多边形或许圆形的区域,并参加连接的一种方式,图像热区的优点在于,图像不必被切割,就算被点击的区域是不规则的形状,图像热区也能够很轻松的敷衍,而切片要敷衍多边形的区域,能够就需求屡次切片了,那么切片和图像热区到底有啥详细差异和

ASP动态网页设计与Ajax技术----制作图片轮显效果

<!doctype html><html><head><meta charset="utf-8"><title>制作图片轮显效果</title></head><style type="text/css"> img{border: 0px;} .imgsBox{overflow: hidden; width: 282px; height: 176px;} .imgs a{d

atitit.GUI图片非规则按钮跟动态图片切换的实现模式总结java .net c# c++ web html js

atitit.GUI图片非规则按钮跟动态图片切换的实现模式总结java .net c# c++ web html js 1. 图片按钮的效果总结 1 1.1. 按钮图片自动缩放的. 1 1.2. 不要边框,如果用自定义图片做按钮背景可以设为 false. 2 1.3. 异形按钮 2 1.4. 不绘制焦点 2 1.5. 鼠标经过时的图标 2 1.6. 选中时的图标 2 1.7. 禁用时显示的图标 2 1.8. 可能需要按钮半透明效果 2 2. 图片按钮的实现 2 2.1. 优先模式:button控

图片轮显效果大全

综合各种效果的图片轮显 <SCRIPT language="VBScript">Dim FileList,FileListArr,TxtList,TxtListArrFileList = "http://et.21cn.com/portray/images/if/01.jpg,http://et.21cn.com/portray/images/if/02.jpg,http://et.21cn.com/portray/images/if/03.jpg"Tx

Android 显示Gif 动态图片

项目(showgif)已推到GitHub,查看文末的链接即可下载. 显示如下一张Gif动态图片: 看一下在demo中的效果: 按钮用来暂停和继续.看一下代码逻辑实现: package com.zms.showgif; import android.support.v7.app.ActionBarActivity; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; import and