css实现拨开云雾遮罩动画效果代码-html代码-BFW代码库

css实现拨开云雾遮罩动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现拨开云雾遮罩动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        body {
          font-weight: 700;
          font-family: Lato;
          letter-spacing: 0.08em;
          background-color: #F0F4C3;
        }
        .content-wrapper {
          display: flex;
          flex-direction: column;
          align-items: center;
        }
        .image-wrapper {
          width: 100%;
          max-width: 640px;
          margin-right: auto;
          margin-left: auto;
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/mask/mask_cloud_gzcgdf.png");
          mask-size: 100% 100%;
          mask-mode: alpha;
          mask-repeat: no-repeat;
          mask-position: center;
          -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/mask/mask_cloud_gzcgdf.png");
          -webkit-mask-size: 100% 100%;
          -webkit-mask-mode: alpha;
          -webkit-mask-repeat: no-repeat;
          -webkit-mask-position: center;
          animation-name: mask-animation;
          animation-duration: 4s;
          animation-iteration-count: infinite;
        }
        img {
          width: 100%;
          height: auto;
          display: block;
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/mask/mask_cloud_horizontal_n35us0.png");
          mask-size: 100% 100%;
          mask-mode: alpha;
          mask-repeat: no-repeat;
          mask-position: center;
          -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/mask/mask_cloud_.........完整代码请登录后点击上方下载按钮下载查看