情人节爱心聚散动画效果代码
代码语言:html
所属分类:动画
代码描述:情人节爱心聚散动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> /** * get random number. * @param {number} min - min number. * @param {number} max - max number. */ *{margin:0;padding:0;list-style-type:none;} body { font-family: sans-serif; background: #000; font-size: 67.5%; color: #ff1493; } canvas { z-index: 0; display: block; position: fixed; top: 0; left: 0; height: 100%; width: 100%; } h1 { z-index: 2; position: fixed; font-size: 2.4rem; top: 5%; left: 5%; line-height: 3.2rem; } h2 { position: fixed; bottom: 5%; right: 5%; text-align: right; font-size: 1rem; opacity: 0; } span { position: absolute; opacity: 0; } .delay:nth-of-type(1) { -webkit-animation: span-animation-1 1s linear 2s 1 normal forwards; animation: span-animation-1 1s linear 2s 1 normal forwards; } .delay:nth-of-type(2) { -webkit-animation: span-animation-2 1s linear 2.4s 1 normal forwards; animation: span-animation-2 1s linear 2.4s 1 normal forwards; } .delay:nth-of-type(3) { -webkit-animation: span-animation-3 1s linear 2.8s 1 normal forwards; animation: span-animation-3 1s linear 2.8s 1 normal forwards; } .delay:nth-of-type(4) { -webkit-animation: span-animation-4 1s linear 3.2s 1 normal forwards; animation: span-animation-4 1s linear 3.2s 1 normal forwards; } @-webkit-keyframes span-animation-1 { 0% { transform: translateY(20px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes span-animation-1 { 0% { transform: translateY(20px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @-webkit-keyframes span-animation-2 { 0% { transform: translateY(20px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes span-animation-2 { 0% { transform: translateY(20px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @-webkit-keyframes span-animation-3 { 0% { transform: translateY(20px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes span-animation-3 { 0% { transform: translateY(20px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @-webkit-keyframes span-animation-4 { 0% { transform: translateY(20px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes span-animation-4 { 0% { transform: translateY(20px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @media (min-width: 500px) { h1 { font-size: 4rem; line-height: 4.8rem; } } </style> </head> <body> <canvas id="c"></canvas> <h1><span>Happy</span><br/><span>Valentine's</span><br/><span>Day</span></h1> <h2>Give me a chocolate :)</h2> <script > (() => { 'use strict'; window.addEventListener('DOMContentLoaded', () => { const CANVAS = document.getElementById('c'), C = CANVAS.getContext('2d'), spans = document.getElementsByTagName('span'), h2 = document.getElementsByTagName('h2')[0]; /** * operate dom. add class. */ for (let i = 0; i < .........完整代码请登录后点击上方下载按钮下载查看
网友评论0