HTML+CSS3制作响应式红包雨背景效果
  • 分享到微信朋友圈
    X
立即下载 查看演示

本文介绍如何使用HTML+CSS3制作响应式红包雨背景效果

主要html代码

<div class="snowflakes">
        <div class="snowflake">🧧</div>
        <div class="snowflake">💰</div>
        <div class="snowflake">🎁</div>
        <div class="snowflake">🧧</div>
        <div class="snowflake">🎁</div>
        <div class="snowflake">💰</div>
        <div class="snowflake">🧧</div>
        <div class="snowflake">🎁</div>
        <div class="snowflake">💰</div>
        <div class="snowflake">🧧</div>
        <div class="snowflake">💰</div>
        <div class="snowflake">🎁</div>
    </div>

主要CSS3代码

<style>
.snowflake {
    color: #fff;
    font-size: 1em;
    font-family: Arial, sans-serif;
    text-shadow: 0 0 5px #000;
    position:fixed;
    top:-10%;
    z-index:9999;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    cursor:default;
    -webkit-animation-name:snowflakes-fall,snowflakes-shake;
    -webkit-animation-duration:10s,3s;
    -webkit-animation-timing-function:linear,ease-in-out;
    -webkit-animation-iteration-count:infinite,infinite;
    -webkit-animation-play-state:running,running;
    animation-name:snowflakes-fall,snowflakes-shake;
    animation-duration:10s,3s;
    animation-timing-function:linear,ease-in-out;
    animation-iteration-count:infinite,infinite;
    animation-play-state:running,running;
  }

</style>