jquery实现漂浮的气球鼠标悬浮爆炸效果代码
代码语言:html
所属分类:悬停
代码描述:jquery实现漂浮的气球鼠标悬浮爆炸效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,800); body { overflow: hidden; background: #000; color: #FFF; } .love-pop { font: bold 22px/0.3 Open Sans; text-shadow: 0 3px 15px #ccc; position: absolute; right: -96px; top: 73px; transform: rotate(45deg); background-color: #DF151A; background: linear-gradient(235deg, #DF151A, #FD8603, #F4F328, #00DA3C, #00CBE7, #4B0082, #EE82EE); line-height: 38px; padding: 0 71px; text-transform: capitalize; z-index: 1000; } .love-box { height: 120px; width: 65px; display: inline-block; position: relative; margin: 0 10px; } .love-container { position: absolute; top: 50%; left: 50%; white-space: nowrap; text-align: center; text-transform: uppercase; font: bold 50px/0.8 Open Sans, Impact; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .balloon { height: 120px; width: 75px; border-radius: 50%; position: relative; z-index: 100; } .balloon:before, .balloon:after { content: ""; position: absolute; } .balloon:before { height: 8px; width: 9px; left: 40%; top: 95%; background: inherit; z-index: 10; } .balloon:after { width: 1px; height: 67px; background: #ddd; top: 100%; left: 45%; z-index: 1; } .text { position: absolute; display: none; top: 25%; left: 35%; width: 55px; margin: 0 auto; z-index: 1; } .red { background: #DF151A; animation: float1 6s ease-in-out infinite; } .orange { background: #FD8603; animation: float2 4s ease-in-out infinite; } .yellow { background: #F4F328; animation: float3 5s ease-in-out infinite; } .green { background: #00DA3C; animation: float4 4s ease-in-out infinite; } .blue { background: #00CBE7; animation: float5 6s ease-in-out infinite; } .indigo { background: #4B0082; animation: float4 6s ease-in-out infinite; } .violet { background: #EE82EE; animation: float3 6s ease-in-out infinite; } @keyframes float1 { 0%, 100% { transform: translateY(-25%); tra.........完整代码请登录后点击上方下载按钮下载查看
网友评论0