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;
}
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0