css实现爱心照亮表白文字交互效果代码
代码语言:html
所属分类:表白
代码描述:css实现爱心照亮表白文字交互效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .light { position: absolute; margin: -1vmin 0 0 -1vmin; height: 2vmin; width: 2vmin; border-radius: 100%; mix-blend-mode: color-dodge; transition: box-shadow 2s; } .light:before, .light:after { position: absolute; bottom: 0; height: 150%; width: 100%; content: ""; background: #ff1f60; border-radius: 2em 2em 0 0; } .light:before { left: 50%; transform: rotate(-45deg); transform-origin: left bottom; } .light:after { right: 50%; transform: rotate(45deg); transform-origin: right bottom; } h1:hover + .light { box-shadow: 0 0 0 12vmin rgba(255, 133, 51, 0.125), 0 0 0 10vmin rgba(88, 51, 255, 0.125), 0 0 0 66vmin rgba(65, 255, 51, 0.125), 0 0 0 29vmin rgba(255, 170, 51, 0.125), 0 0 0 82vmin rgba(255, 85, 51, 0.125), 0 0 0 121vmin rgba(51, 255, 173, 0.125), 0 0 0 140vmin rgba(78, 255, 51, 0.125), 0 0 0 43vmin rgba(51, 255, 139, 0.125), 0 0 0 22vmin rgba(51, 228, 255, 0.125), 0 0 0 42vmin rgba(255, 85, 51, 0.125), 0 0 0 96vmin rgba(51, 255, 201, 0.125), 0 0 0 92vmin rgba(51, 160, 255, 0.125), 0 0 0 108vmin rgba(99, 255, 51, 0.125), 0 0 0 130vmin rgba(51, 255, 119, 0.125), 0 0 0 9vmin rgba(255, 170, 51, 0.125), 0 0 0 40vmin rgba(75, 255, 51, 0.125), 0 0 0 87vmin rgba(255, 241, 51, 0.125), 0 0 0 37vmin rgba(255, 139, 51, 0.125), 0 0 0 54vmin rgba(51, 71, 255, 0.125), 0 0 0 113vmin rgba(51, 109, 255, 0.125); } h1 { position: absolute; top: 50%; left: 50%; z-index: 200; max-width: 10em; width: 100%; margin: 0; font-size: 7vmin; font-weight: normal; background: linear-gradient(45deg, #09447B 0, #8f0044 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; transform: translate(-50%, -50%); } h1::-moz-selection { background: #ff5284; } h1::selection { background: #ff5284; } h1:hover { background: none; -webkit-background-clip: initial; -webkit-text-fill-color: initial; mix-blend-mode: color-dodge; } h1 span { transition: color 0.3s; } h1:hover span:nth-child(1) { color: #e84630; -webkit-animation: love-1 4s 0.05s infinite; animation: love-1 4s 0.05s infinite; } h1:hover span:nth-child(2) { color: #43e830; -webkit-animation: love-2 4s 0.1s infinite; animation: love-2 4s 0.1s infinite; } h1:hover span:nth-child(3) { color: #30e864; -webkit-animation: love-3 4s 0.15s infinite; animation: love-3 4s 0.15s infinite; } h1:hover span:nth-child(4) { color: #e8a530; -webkit-animation: love-4 4s 0.2s infinite; animation: love-4 4s 0.2s infinite; } h1:hover span:nth-child(5) { color: #e89f30; -webkit-animation: love-5 4s 0.25s infinite; animation: love-5 4s 0.25s infinite; } h1:hover span:nth-child(6) { color: #4330e8; -webkit-animation: love-6 4s 0.3s infinite; animation: love-6 4s 0.3s infinite; } h1:hover span:nth-child(7) { color: #30e8c0; -webkit-animation: love-7 4s 0.35s infinite; animation: love-7 4s 0.35s infinite; } h1:hover span:nth-child(8) { color: #9fe830; -webkit-animation: love-8 4s 0.4s infinite; animation: love-8 4s 0.4s infinite; } h1:hover span:nth-child(9) { color: #c9e830; -webkit-animation: love-9 4s 0.45s infinite; animation: love-9 4s 0.45s infinite; } h1:hover span:nth-child(10) { color: #5b30e8; -webkit-animation: love-10 4s 0.5s infinite; animation: love-10 4s 0.5s infinite; } h1:hover span:nth-child(11) { color: #5230e8; -webkit-animation: love-11 4s 0.55s infinite; animation: love-11 4s 0.55s infinite; } h1:hover span:nth-child(12) { color: #e8bd30; -webkit-animation: love-12 4s 0.6s infinite; animation: love-12 4s 0.6s infinite; } h1:hover span:nth-child(13) { color: #30e840; -webkit-animation: love-13 4s 0.65s infinite; animation: love-13 4s 0.65s infinite; } h1:hover span:nth-child(14) { color: #30c3e8; -webkit-animation: love-14 4s 0.7s infinite; animation: love-14 4s 0.7s infinite; } h1:hover span:nth-child(15) { color: #30e2e8; -webkit-animation: love-15 4s 0.75s infinite; animation: love-15 4s 0.75s infinite; } h1:hover span:nth-child(16) { color: #30d9e8; -webkit-animation: love-16 4s 0.8s infinite; animation: love-16 4s 0.8s infinite; } h1:hover span:nth-child(17) { color: #30e8bd; -webkit-animation: love-17 4s 0.85s infinite; animation: love-17 4s 0.85s infinite; } h1:hover span:nth-child(18) { color: #30e8e5; -webkit-animation: love-18 4s 0.9s infinite; animation: love-18 4s 0.9s infinite; } h1:hover span:nth-child(19) { color: #e87130; -webkit-animation: love-19 4s 0.95s infinite; animation: love-19 4s 0.95s infinite; } h1:hover span:nth-child(20) { color: #e85230; -webkit-animation: love-20 4s 1s infinite; animation: love-20 4s 1s infinite; } h1:hover span:nth-child(21) { color: #dce830; -webkit-animation: love-21 4s 1.05s infinite; animation: love-21 4s 1.05s infinite; } h1:hover span:nth-child(22) { color: #e8c330; -webkit-animation: love-22 4s 1.1s infinite; animation: love-22 4s 1.1s infinite; } h1:hover span:nth-child(23) { color: #3077e8; -webkit-animation: love-23 4s 1.15s infinite; animation: love-23 4s 1.15s infinite; } h1:hover span:nth-child(24) { color: #309fe8; -webkit-animation: love-24 4s 1.2s infinite; animation: love-24 4s 1.2s infinite; } h1:hover span:nth-child(25) { color: #4330e8; -webkit-animation: love-25 4s 1.25s infinite; animation: love-25 4s 1.25s infinite; } h1:hover span:nth-child(26) { color: #30e834; -webkit-animation: love-26 4s 1.3s infinite; animation: love-26 4s 1.3s infinite; } h1:hover span:nth-child(27) { color: #e88930; -webkit-animation: love-27 4s 1.35s infinite; animation: love-27 4s 1.35s infinite; } h1:hover span:nth-child(28) { color: #e8b430; -webkit-animation: love-28 4s 1.4s infinite; animation: love-28 4s 1.4s infinite; } h1:hover span:nth-child(29) { color: #e8bd30; -webkit-animation: love-29 4s 1.45s infinite; animation: love-29 4s 1.45s infinite; } h1:hover span:nth-child(30) { color: #30e8a8; -webkit-animation: love-30 4s 1.5s infinite; animation: love-30 4s 1.5s infinite; } h1:hover span:nth-child(31) { color: #30e861; -webkit-animation: love-31 4s 1.55s infinite; animation: love-31 4s 1.55s infinite; } h1:hover span:nth-child(32) { color: #e84630; -webkit-animation: love-32 4s 1.6s infinite; animation: love-32 4s 1.6s infinite; } h1:hover span:nth-child(33) { color: #30e8c0; -webkit-animation: love-33 4s 1.65s infinite; animation: love-33 4s 1.65s infinite; } h1:hover span:nth-child(34) { color: #e8d930; -webkit-animation: love-34 4s 1.7s infinite; animation: love-34 4s 1.7s infinite; } h1:hover span:nth-child(35) { color: #30e8c3; -webkit-animation: love-35 4s 1.75s infinite; animation: love-35 4s 1.75s infinite; } h1:hover span:nth-child(36) { color: #55e830; -webkit-animation: love-36 4s 1.8s infinite; animation: love-36 4s 1.8s infinite; } h1:hover span:nth-child(37) { color: #30e5e8; -webkit-animation: love-37 4s 1.85s infinite; animation: love-37 4s 1.85s infinite; } h1:hover span:nth-child(38) { color: #30e889; -webkit-animation: love-38 4s 1.9s infinite; animation: love-38 4s 1.9s infinite; } h1 span::-moz-selection { background: #ff5284; color: #fff; -webkit-text-fill-color: #fff; } h1 span::selection { background: #ff5284; color: #fff; -webkit-text-fill-color: #fff; } @-webkit-keyframes love-1 { 10% { color: #3034e8; } 20% { color: #304fe8; } 30% { color: #6ee830; } 40% { color: #3086e8; } 50% { color: #3de830; } 60% { color: #b1e830; } 70% { color: #30e8e5; } 80% { color: #305ee8; } 90% { color: #8ce830; } } @keyframes love-1 { 10% { color: #3034e8; } 20% { color: #304fe8; } 30% { color: #6ee830; } 40% { color: #3086e8; } 50% { color: #3de830; } 60% { color: #b1e830; } 70% { color: #30e8e5; } 80% { color: #305ee8; } 90% { color: #8ce830; } } @-webkit-keyframes love-2 { 10% { color: #e88c30; } 20% { color: #30c0e8; } 30% { color: #3095e8; } 40% { color: #5230e8; } 50% { color: #30d9e8; } 60% { color: #e8ab30; } 70% { color: #e8b130; } 80% { color: #30c0e8; } 90% { color: #30e8b7; } } @keyframes love-2 { 10% { color: #e88c30; } 20% { color: #30c0e8; } 30% { color: #3095e8; } 40% { color: #5230e8; } 50% { color: #30d9e8; } 60% { color: #e8ab30; } 70% { color: #e8b130; } 80% { color: #30c0e8; } 90% { color: #30e8b7; } } @-webkit-keyframes love-3 { 10% { color: #30b1e8; } 20% { color: #d3e830; } 30% { color: #e84c30; } 40% { color: #3049e8; } 50% { color: #a5e830; } 60% { color: #e86b30; } 70% { color: #a8e830; } 80% { color: #30aee8; } 90% { color: #e8b430; } } @keyframes love-3 { 10% { color: #30b1e8; } 20% { color: #d3e830; } 30% { color: #e84c30; } 40% { color: #3049e8; } 50% { color: #a5e830; } 60% { color: #e86b30; } 70% { color: #a8e830; } 80% { color: #30aee8; } 90% { color: #e8b430; } } @-webkit-keyframes love-4 { 10% { color: #30e834; } 20% { color: #e83430; } 30% { color: #9ce830; } 40% { color: #30e8d3; } 50% { color: #5be830; } 60% { color: #b7e830; } 70% { color: #b7e830; } 80% { color: #303de8; } 90% { color: #306ee8; } } @keyframes love-4 { 10% { color: #30e834; } 20% { color: #e83430; } 30% { color: #9ce830; } 40% { color: #30e8d3; } 50% { color: #5be830; } 60% { color: #b7e830; } 70% { color: #b7e830; } 80% { color: #303de8; } 90% { color: #306ee8; } } @-webkit-keyframes love-5 { 10% { color: #305ee8; } 20% { color: #3092e8; } 30% { color: #30e8dc; } 40% { color: #e8ae30; } 50% { color: #30e8df; } 60% { color: #30e8a5; } 70% { color: #e8d930; } 80% { color: #307ae8; } 90% { color: #d0e830; } } @keyframes love-5 { 10% { color: #305ee8; } 20% { color: #3092e8; } 30% { color: #30e8dc; } 40% { color: #e8ae30; } 50% { color: #30e8df; } 60% { color: #30e8a5; } 70% { color: #e8d930; } 80% { color: #307ae8; } 90% { color: #d0e830; } } @-webkit-keyframes love-6 { 10% { color: #30d6e8; } 20% { color: #d6e830; } 30% { color: #30e855; } 40% { color: #30e83a; } 50% { color: #30e83d; } 60% { color: #30d0e8; } 70% { color: #40e830; } 80% { color: #30e843; } 90% { color: #e8c030; } } @keyframes love-6 { 10% { color: #30d6e8; } 20% { color: #d6e830; } 30% { color: #30e855; } 40% { color: #30e83a; } 50% { color: #30e83d; } 60% { color: #30d0e8; } 70% { color: #40e830; } 80% { color: #30e843; } 90% { color: #e8c030; } } @-webkit-keyframes love-7 { 10% { color: #c0e830; } 20% { color: #30e8cd; } 30% { color: #dfe830; } 40% { color: #30e8bd; } 50% { color: #e89830; } 60% { color: #30bde8; } 70% { color: #bae830; } 80% { color: #d3e830; } 90% { color: #77e830; } } @keyframes love-7 { 10% { color: #c0e830; } 20% { color: #30e8cd; } 30% { color: #dfe830; } 40% { color: #30e8bd; } 50% { color: #e89830; } 60% { color: #30bde8; } 70% { color: #bae830; } 80% { color: #d3e830; } 90% { color: #77e830; } } @-webkit-keyframes love-8 { 10% { color: #30e8d3; } 20% { color: #30e8c9; } 30% { color: #d9e830; } 40% { color: #98e830; } 50% { color: #92e830; } 60% { color: #3092e8; } 70% { color: #a8e830; } 80% { color: #30e83d; } 90% { color: #e87a30; } } @keyframes love-8 { 10% { color: #30e8d3; } 20% { color: #30e8c9; } 30% { color: #d9e830; } 40% { color: #98e830; } 50% { color: #92e830; } 60% { color: #3092e8; } 70% { color: #a8e830; } 80% { color: #30e83d; } 90% { color: #e87a30; } } @-webkit-keyframes love-9 { 10% { color: #49e830; } 20% { color: #7de830; } 30% { color: #e85b30; } 40% { color: #30e2e8; } 50% { color: #30bde8; } 60% { color: #30dce8; } 70% { color: #30e89f; } 80% { color: #b7e830; } 90% { color: #306ee8; } } @keyframes love-9 { 10% { color: #49e830; } 20% { color: #7de830; } 30% { color: #e85b30; } 40% { color: #30e2e8; } 50% { color: #30bde8; } 60% { color: #30dce8; } 70% { color: #30e89f; } 80% { color: #b7e830; } 90% { color: #306ee8; } } @-webkit-keyframes love-10 { 10% { color: #30e886; } 20% { color: #30e868; } 30% { color: #e8d330; } 40% { color: #d9e830; } 50% { color: #30e84f; } 60% { color: #40e830; } 70% { color: #30b7e8; } 80% { color: #30dce8; } 90% { color: #30bde8; } } @keyframes love-10 { 10% { color: #30e886; } 20% { color: #30e868; } 30% { color: #e8d330; } 40% { color: #d9e830; } 50% { color: #30e84f; } 60% { color: #40e830; } 70% { color: #30b7e8; } 80% { color: #30dce8; } 90% { color: #30bde8; } } @-webkit-keyframes love-11 { 10% { color: #30e8b7; } 20% { color: #e8c630; } 30% { color: #e87730; } 40% { color: #30cde8; } 50% { color: #e88030; } 60% { color: #30e8d0; } 70% { color: #46e830; } 80% { color: #30a2e8; } 90% { color: #309ce8; } } @keyframes love-11 { 10% { color: #30e8b7; } 20% { color: #e8c630; } 30% { color: #e87730; } 40% { color: #30cde8; } 50% { color: #e88030; } 60% { color: #30e8d0; } 70% { color: #46e830; } 80% { color: #30a2e8; } 90% { color: #309ce8; } } @-webkit-keyframes love-12 { 10% { color: #30e868; } 20% { color: #30b7e8; } 30% { color: #3068e8; } 40% { color: #3030e8; } 50% { color: #30b4e8; } 60% { color: #e83730; } 70% { color: #30e858; } 80% { color: #30e871; } 90% { color: #8fe830; } } @keyframes love-12 { 10% { color: #30e868; } 20% { color: #30b7e8; } 30% { color: #3068e8; } 40% { color: #3030e8; } 50% { color: #30b4e8; } 60% { color: #e83730; } 70% { color: #30e858; } 80% { color: #30e871; } 90% { color: #8fe830; } } @-webkit-keyframes love-13 { 10% { color: #30d6e8; } 20% { color: #30e837; } 30% { color: #3ae830; } 40% { color: #8fe830; } 50% { color: #30e883; } 60% { color: #e85e30; } 70% { color: #e8b430; } 80% { color: #e89230; } 90% { color: #30e880; } } @keyframes love-13 { 10% { color: #30d6e8; } 20% { color: #30e837; } 30% { color: #3ae830; } 40% { color: #8fe830; } 50% { color: #30e883; } 60% { color: #e85e30; } 70% { color: #e8b430; } 80% { color: #e89230; } 90% { color: #30e880; } } @-webkit-keyframes love-14 { 10% { color: #30e8a5; } 20% { color: #30e868; } 30% { color: #3092e8; } 40% { color: #e83730; } 50% { color: #30e8ba; } 60% { color: #7de830; } 70% { color: #305be8; } 80% { color: #95e830; } 90% { color: #d6e830; } } @keyframes love-14 { 10% { color: #30e8a5; } 20% { color: #30e868; } 30% { color: #3092e8; } 40% { color: #e83730; } 50% { color: #30e8ba; } 60% { color: #7de830; } 70% { color: #305be8; } 80% { color: #95e830; } 90% { color: #d6e830; } } @-webkit-keyframes love-15 { 10% { color: #e85830; } 20% { color: #5e30e8; } 30% { color: #30e8d6; } 40% { color: #e8cd30; } 50% { color: #3046e8; } 60% { color: #30c9e8; } 70% { color: #e87130; } 80% { color: #e83d30; } 90% { color: #30e846; } } @keyframes love-15 { 10% { color: #e85830; } 20% { color: #5e30e8; } 30% { color: #30e8d6; } 40% { color: #e8cd30; } 50% { color: #3046e8; } 60% { color: #30c9e8; } 70% { color: #e87130; } 80% { color: #e83d30; } 90% { color: #30e846; } } @-webkit-keyframes love-16 { 10% { color: #46e830; } 20% { color: #3730e8; } 30% { color: #304fe8; } 40% { color: #e8e830; } 50% { color: #30a5e8; } 60% { color: #30bde8; } 70% { color: #30e8c3; } 80% { color: #30e883; } 90% { color: #30e846; } } @keyframes love-16 { 10% { color: #46e830; } 20% { color: #3730e8; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0