css和js实现无数爱心气球升起表白动画效果代码
代码语言:html
所属分类:表白
代码描述:css和js实现无数爱心气球升起表白动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html,body{ height:100% } .bg_heart { position: relative; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden } .heart { position: absolute; top: -50%; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -m-transform: rotate(-45deg); transform: rotate(-45deg) } .heart:before { position: absolute; top: -50%; left: 0; display: block; content: ""; width: 100%; height: 100%; background: inherit; border-radius: 100%; } .heart:after { position: absolute; top: 0; right: -50%; display: block; content: ""; width: 100%; height: 100%; background: inherit; border-radius: 100%; } @-webkit-keyframes love { 0%{top:110%} } @-moz-keyframes love { 0%{top:110%} } @-ms-keyframes love { 0%{top:110%} } @keyframes love { 0%{top:110%} } </style> </head> <body> <div id="header-plugin"></div> <div class="bg_heart"></div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0