html5怎么加中划线,HTML5带文本中划线切分动效的菜单模板

最新推荐文章于 2023-07-22 12:40:27 发布

weixin_39560245

最新推荐文章于 2023-07-22 12:40:27 发布

阅读量391

点赞数

文章标签： html5怎么加中划线

CSS

语言：

CSSSCSS

确定

html,

body {

padding: 0px;

margin: 0px;

background: -webkit-linear-gradient(#000, #222);

background: linear-gradient(#000, #222);

font-family: 'Enriqueta', serif;

color: #FFF;

height: 100%;

}

body {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

}

.container {

max-width: 300px;

width: 200px;

margin: auto;

}

.links {

font-size: 24px;

font-weight: bolder;

text-transform: uppercase;

text-align: center;

line-height: 1em;

white-space: nowrap;

width: 100%;

-webkit-transform: translate3D(0, 0, 0);

transform: translate3D(0, 0, 0);

}

.link {

position: relative;

height: 2em;

line-height: 0.9em;

width: 0%;

border-top: 0.05em solid transparent;

-webkit-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}

.link:hover,

.link.demo {

border-top: 0.05em solid GOLD;

cursor: pointer;

width: 100%;

}

.link:after,

.link:before {

content: attr(data-display);

position: absolute;

top: 0em;

left: 1em;

width: auto;

height: 1em;

-webkit-transform: translateY(-50%);

transform: translateY(-50%);

-webkit-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

overflow: hidden;

color: transparent;

}

.link:before {

text-shadow: 0px 0.5em #FFF;

top: -0.45em;

}

.link:after {

top: 0.5em;

text-shadow: 0px -0.5em #FFF;

}

.link:hover:before,

.link.demo:before {

text-shadow: 0px 0.5em GOLD;

left: 1.25em;

}

.link:hover:after,

.link.demo:after {

text-shadow: 0px -0.5em GOLD;

left: 0.75em;

}

@-webkit-keyframes test {

0% {

box-shadow: 43.82868vw 108.82031vh 0px white, 45.06196vw 231.54923vh 0px white, 50.41913vw 304.26608vh 0px white, 8.69421vw 281.32308vh 0px white, 63.28648vw 146.08823vh 0px white, 77.61116vw 118.36002vh 0px white, 43.51712vw 251.86911vh 0px white, 53.26765vw 106.17318vh 0px white, 81.31607vw 265.12029vh 0px white, 35.88089vw 222.54801vh 0px white, 21.83196vw 245.71736vh 0px white, 41.75126vw 223.80398vh 0px white, 97.6075vw 227.0748vh 0px white, 91.94146vw 369.03208vh 0px white, 34.62719vw 278.98053vh 0px white, 67.19895vw 297.77971vh 0px white, 25.83461vw 145.79038vh 0px white, 65.74543vw 271.63639vh 0px white, 35.33428vw 124.40486vh 0px white, 22.55159vw 231.10939vh 0px white;

}

10% {

}

20% {

box-shadow: 41.87389vw 50.19207vh 0px white, 44.78029vw 153.21058vh 0px white, 49.43855vw 226.40993vh 0px white, 8.75356vw 234.49466vh 0px white, 63.04031vw 92.82802vh 0px white, 76.05621vw 49.80344vh 0px white, 45.10076vw 201.73182vh 0px white, 54.12047vw 29.87182vh 0px white, 81.12044vw 190.28017vh 0px white, 37.80455vw 175.43335vh 0px white, 22.89161vw 180.4496vh 0px white, 43.00989vw 166.04273vh 0px white, 96.41207vw 155.82046vh 0px white, 90.93044vw 319.2347vh 0px white, 36.49691vw 229.84458vh 0px white, 65.81732vw 219.45153vh 0px white, 27.05037vw 81.70146vh 0px white, 65.76842vw 228.5449vh 0px white, 33.93215vw 49.28136vh 0px white, 23.97798vw 162.79493vh 0px white;

}

30% {

box-shadow: 39.91911vw -8.43617vh 0px white, 44.49863vw 74.87193vh 0px white, 50.41913vw 148.55378vh 0px white, 8.69421vw 187.66624vh 0px white, 62.79415vw 39.5678vh 0px white, 74.50125vw -18.75315vh 0px white, 46.68441vw 151.59452vh 0px white, 54.97329vw -46.42954vh 0px white, 80.92482vw 115.44004vh 0px white, 39.7282vw 128.31868vh 0px white, 21.83196vw 115.18184vh 0px white, 44.26851vw 108.28147vh 0px white, 95.21663vw 84.56612vh 0px white, 89.91941vw 269.43733vh 0px white, 34.62719vw 180.70862vh 0px white, 64.4357vw 141.12335vh 0px white, 28.26613vw 17.61254vh 0px white, 65.79142vw 185.45341vh 0px white, 32.53001vw -25.84214vh 0px white, 25.40437vw 94.48048vh 0px white;

}

40% {

box-shadow: 37.96432vw -67.06441vh 0px white, 44.21696vw -3.46673vh 0px white, 51.39971vw 70.69763vh 0px white, 8.63486vw 140.83782vh 0px white, 62.54798vw -13.69241vh 0px white, 72.94629vw -87.30973vh 0px white, 48.26805vw 101.45722vh 0px white, 55.82611vw -122.73089vh 0px white, 80.72919vw 40.59991vh 0px white, 41.65186vw 81.20402vh 0px white, 20.7723vw 49.91407vh 0px white, 45.52713vw 50.52022vh 0px white, 94.02119vw 13.31178vh 0px white, 88.90839vw 219.63996vh 0px white, 32.75748vw 131.57267vh 0px white, 63.05408vw 62.79517vh 0px white, 29.4819vw -46.47638vh 0px white, 65.81441vw 142.36192vh 0px white, 31.12788vw -100.96564vh 0px white, 26.83076vw 26.16602vh 0px white;

}

50% {

box-shadow: 36.00954vw -125.69266vh 0px white, 43.93529vw -81.80538vh 0px white, 52.38029vw -7.15852vh 0px white, 8.57551vw 94.0094vh 0px white, 62.30181vw -66.95262vh 0px white, 71.39133vw -155.86632vh 0px white, 49.85169vw 51.31993vh 0px white, 56.67893vw -199.03225vh 0px white, 80.53357vw -34.24022vh 0px white, 43.57551vw 34.08935vh 0px white, 19.71265vw -15.35369vh 0px white, 46.78575vw -7.24104vh 0px white, 92.82575vw -57.94257vh 0px white, 87.89737vw 169.84258vh 0px white, 30.88776vw 82.43672vh 0px white, 61.67246vw -15.53301vh 0px white, 30.69766vw -110.5653vh 0px white, 65.8374vw 99.27043vh 0px white, 29.72574vw -176.08914vh 0px white, 28.25715vw -42.14844vh 0px white;

}

60% {

box-shadow: 37.96432vw -184.3209vh 0px white, 43.65363vw -160.14404vh 0px white, 53.36087vw -85.01467vh 0px white, 8.51616vw 47.18098vh 0px white, 62.54798vw -120.21283vh 0px white, 69.83637vw -224.4229vh 0px white, 51.43534vw 1.18263vh 0px white, 57.53175vw -275.33361vh 0px white, 80.33794vw -109.08034vh 0px white, 45.49917vw -13.02531vh 0px white, 18.653vw -80.62145vh 0px white, 48.04437vw -65.00229vh 0px white, 94.02119vw -129.19691vh 0px white, 86.88635vw 120.04521vh 0px white, 29.01805vw 33.30077vh 0px white, 63.05408vw -93.86119vh 0px white, 31.91343vw -174.65422vh 0px white, 65.8604vw 56.17895vh 0px white, 28.32361vw -251.21264vh 0px white, 29.68354vw -110.46289vh 0px white;

}

70% {

box-shadow: 39.91911vw -242.94914vh 0px white, 43.37196vw -238.48269vh 0px white, 54.34145vw -162.87082vh 0px white, 8.45681vw 0.35257vh 0px white, 62.79415vw -173.47305vh 0px white, 68.28141vw -292.97949vh 0px white, 53.01898vw -48.95467vh 0px white, 58.38456vw -351.63497vh 0px white, 80.14232vw -183.92047vh 0px white, 47.42283vw -60.13998vh 0px white, 17.59335vw -145.88922vh 0px white, 49.30299vw -122.76355vh 0px white, 95.21663vw -200.45125vh 0px white, 85.87533vw 70.24783vh 0px white, 27.14834vw -15.83518vh 0px white, 64.4357vw -172.18937vh 0px white, 33.12919vw -238.74314vh 0px white, 65.88339vw 13.08746vh 0px white, 26.92147vw -326.33615vh 0px white, 31.10993vw -178.77735vh 0px white;

}

80% {

box-shadow: 41.87389vw -301.57738vh 0px white, 43.65363vw -316.82135vh 0px white, 55.32203vw -240.72697vh 0px white, 8.39746vw -46.47585vh 0px white, 63.04031vw -226.73326vh 0px white, 66.72645vw -361.53607vh 0px white, 54.60263vw -99.09196vh 0px white, 59.23738vw -427.93632vh 0px white, 79.94669vw -258.7606vh 0px white, 49.34648vw -107.25464vh 0px white, 16.5337vw -211.15698vh 0px white, 50.56161vw -180.5248vh 0px white, 96.41207vw -271.70559vh 0px white, 86.88635vw 20.45046vh 0px white, 25.27862vw -64.97113vh 0px white, 65.81732vw -250.51755vh 0px white, 34.34496vw -302.83206vh 0px white, 65.90639vw -30.00403vh 0px white, 25.51934vw -401.45965vh 0px white, 32.53632vw -247.0918vh 0px white;

}

90% {

box-shadow: 43.82868vw -360.20562vh 0px white, 43.93529vw -395.16vh 0px white, 56.30262vw -318.58312vh 0px white, 8.33811vw -93.30427vh 0px white, 63.28648vw -279.99347vh 0px white, 65.17149vw -430.09266vh 0px white, 56.18627vw -149.22926vh 0px white, 60.0902vw -504.23768vh 0px white, 79.75107vw -333.60073vh 0px white, 51.27014vw -154.36931vh 0px white, 17.59335vw -276.42474vh 0px white, 51.82023vw -238.28606vh 0px white, 97.6075vw -342.95994vh 0px white, 87.89737vw -29.34691vh 0px white, 23.40891vw -114.10708vh 0px white, 67.19895vw -328.84573vh 0px white, 35.56072vw -366.92098vh 0px white, 65.92938vw -73.09552vh 0px white, 24.1172vw -476.58315vh 0px white, 33.96271vw -315.40626vh 0px white;

}

100% {

box-shadow: 41.87389vw -418.83386vh 0px white, 44.21696vw -473.49866vh 0px white, 57.2832vw -396.43927vh 0px white, 8.27876vw -140.13269vh 0px white, 63.53265vw -333.25369vh 0px white, 66.72645vw -498.64924vh 0px white, 57.76992vw -199.36656vh 0px white, 60.94302vw -580.53904vh 0px white, 79.55545vw -408.44085vh 0px white, 53.19379vw -201.48397vh 0px white, 18.653vw -341.6925vh 0px white, 53.07886vw -296.04732vh 0px white, 98.80294vw -414.21428vh 0px white, 88.90839vw -79.14429vh 0px white, 21.5392vw -163.24303vh 0px white, 68.58057vw -407.17391vh 0px white, 36.77648vw -431.0099vh 0px white, 65.95238vw -116.18701vh 0px white, 22.71506vw -551.70665vh 0px white, 35.3891vw -383.72072vh 0px white;

}

@keyframes test {

0% {

}

10% {

}

20% {

}

30% {

}

40% {

}

50% {

}

60% {

}

70% {

}

80% {

}

90% {

}

100% {

}

@-webkit-keyframes test2 {

0% {

box-shadow: 69.35903vw 362.58117vh 0px white, 7.91454vw 162.80477vh 0px white, 46.64747vw 156.63745vh 0px white, 70.87765vw 161.37673vh 0px white, 44.68597vw 124.68771vh 0px white, 28.04083vw 381.48254vh 0px white, 51.96582vw 280.85626vh 0px white, 12.33319vw 366.71677vh 0px white, 9.00118vw 272.6787vh 0px white, 65.76811vw 372.51757vh 0px white, 94.36055vw 377.57963vh 0px white, 63.55592vw 239.60522vh 0px white, 61.4417vw 352.83325vh 0px white, 45.91981vw 192.97918vh 0px white, 32.05659vw 279.70147vh 0px white, 69.19081vw 117.23958vh 0px white, 47.44037vw 217.49735vh 0px white, 66.84415vw 349.96374vh 0px white, 47.88936vw 394.35557vh 0px white, 55.9477vw 308.26809vh 0px white;

}

10% {

}

20% {

box-shadow: 68.55912vw 312.0389vh 0px white, 7.1428vw 111.19688vh 0px white, 46.61222vw 80.55834vh 0px white, 72.32381vw 111.04608vh 0px white, 45.1097vw 59.89777vh 0px white, 26.81226vw 322.14478vh 0px white, 53.15376vw 230.40911vh 0px white, 11.52687vw 298.34874vh 0px white, 8.76649vw 205.52458vh 0px white, 65.87792vw 310.13044vh 0px white, 94.43162vw 299.50162vh 0px white, 63.29222vw 185.2984vh 0px white, 62.05924vw 295.95799vh 0px white, 46.2321vw 131.19939vh 0px white, 31.55871vw 217.62853vh 0px white, 70.71448vw 66.51759vh 0px white, 48.90298vw 173.83583vh 0px white, 67.8836vw 275.78605vh 0px white, 46.18832vw 315.16127vh 0px white, 57.51806vw 249.27692vh 0px white;

}

30% {

box-shadow: 69.35903vw 261.49664vh 0px white, 6.37106vw 59.58899vh 0px white, 46.57696vw 4.47924vh 0px white, 73.76997vw 60.71542vh 0px white, 45.53343vw -4.89216vh 0px white, 25.58368vw 262.80701vh 0px white, 54.34169vw 179.96195vh 0px white, 10.72055vw 229.9807vh 0px white, 8.5318vw 138.37047vh 0px white, 65.98773vw 247.74331vh 0px white, 94.50269vw 221.42361vh 0px white, 63.02852vw 130.99158vh 0px white, 62.67678vw 239.08273vh 0px white, 46.54439vw 69.41959vh 0px white, 31.06083vw 155.55558vh 0px white, 72.23815vw 15.79559vh 0px white, 47.44037vw 130.1743vh 0px white, 68.92305vw 201.60836vh 0px white, 44.48727vw 235.96697vh 0px white, 59.08842vw 190.28576vh 0px white;

}

40% {

box-shadow: 70.15895vw 210.95437vh 0px white, 5.59932vw 7.9811vh 0px white, 46.5417vw -71.59987vh 0px white, 75.21613vw 10.38477vh 0px white, 45.95716vw -69.68209vh 0px white, 24.3551vw 203.46924vh 0px white, 55.52962vw 129.5148vh 0px white, 9.91423vw 161.61267vh 0px white, 8.29711vw 71.21635vh 0px white, 66.09754vw 185.35618vh 0px white, 94.57376vw 143.34559vh 0px white, 62.76483vw 76.68476vh 0px white, 63.29432vw 182.20748vh 0px white, 46.85667vw 7.63979vh 0px white, 30.56295vw 93.48264vh 0px white, 73.76183vw -34.9264vh 0px white, 45.97776vw 86.51277vh 0px white, 69.9625vw 127.43066vh 0px white, 42.78622vw 156.77267vh 0px white, 60.65878vw 131.2946vh 0px white;

}

50% {

box-shadow: 70.95886vw 160.4121vh 0px white, 4.82758vw -43.62679vh 0px white, 46.50645vw -147.67897vh 0px white, 76.66229vw -39.94589vh 0px white, 46.38089vw -134.47203vh 0px white, 23.12652vw 144.13147vh 0px white, 56.71755vw 79.06764vh 0px white, 9.1079vw 93.24463vh 0px white, 8.5318vw 4.06224vh 0px white, 66.20735vw 122.96905vh 0px white, 94.64484vw 65.26758vh 0px white, 62.50113vw 22.37794vh 0px white, 63.91186vw 125.33222vh 0px white, 47.16896vw -54.14vh 0px white, 30.06507vw 31.40969vh 0px white, 75.2855vw -85.64839vh 0px white, 44.51516vw 42.85124vh 0px white, 71.00195vw 53.25297vh 0px white, 41.08518vw 77.57836vh 0px white, 62.22915vw 72.30343vh 0px white;

}

60% {

box-shadow: 71.75878vw 109.86983vh 0px white, 4.05584vw -95.23468vh 0px white, 46.47119vw -223.75808vh 0px white, 75.21613vw -90.27655vh 0px white, 46.80462vw -199.26196vh 0px white, 21.89794vw 84.79371vh 0px white, 57.90548vw 28.62048vh 0px white, 8.30158vw 24.87659vh 0px white, 8.29711vw -63.09188vh 0px white, 66.31716vw 60.58192vh 0px white, 94.71591vw -12.81043vh 0px white, 62.23744vw -31.92888vh 0px white, 64.5294vw 68.45696vh 0px white, 47.48125vw -115.9198vh 0px white, 29.56719vw -30.66326vh 0px white, 76.80917vw -136.37039vh 0px white, 43.05255vw -0.81029vh 0px white, 72.0414vw -20.92472vh 0px white, 39.38413vw -1.61594vh 0px white, 63.79951vw 13.31227vh 0px white;

}

70% {

box-shadow: 72.5587vw 59.32757vh 0px white, 3.2841vw -146.84256vh 0px white, 46.43593vw -299.83719vh 0px white, 73.76997vw -140.6072vh 0px white, 47.22835vw -264.0519vh 0px white, 20.66936vw 25.45594vh 0px white, 59.09342vw -21.82667vh 0px white, 7.49526vw -43.49144vh 0px white, 8.06242vw -130.24599vh 0px white, 66.42697vw -1.80521vh 0px white, 94.78698vw -90.88844vh 0px white, 61.97374vw -86.2357vh 0px white, 65.14694vw 11.58171vh 0px white, 47.79354vw -177.69959vh 0px white, 29.06931vw -92.7362vh 0px white, 78.33284vw -187.09238vh 0px white, 41.58994vw -44.47181vh 0px white, 73.08085vw -95.10241vh 0px white, 37.68309vw -80.81024vh 0px white, 62.22915vw -45.6789vh 0px white;

}

80% {

box-shadow: 73.35861vw 8.7853vh 0px white, 2.51236vw -198.45045vh 0px white, 46.40068vw -375.91629vh 0px white, 72.32381vw -190.93786vh 0px white, 47.65208vw -328.84183vh 0px white, 19.44078vw -33.88183vh 0px white, 60.28135vw -72.27383vh 0px white, 6.68894vw -111.85948vh 0px white, 7.82773vw -197.40011vh 0px white, 66.53678vw -64.19234vh 0px white, 94.85806vw -168.96645vh 0px white, 61.71004vw -140.54252vh 0px white, 65.76448vw -45.29355vh 0px white, 48.10582vw -239.47939vh 0px white, 28.57143vw -154.80915vh 0px white, 79.85651vw -237.81437vh 0px white, 40.12733vw -88.13334vh 0px white, 74.1203vw -169.2801vh 0px white, 35.98204vw -160.00455vh 0px white, 60.65878vw -104.67006vh 0px white;

}

90% {

box-shadow: 74.15853vw -41.75697vh 0px white, 1.74062vw -250.05834vh 0px white, 46.36542vw -451.9954vh 0px white, 70.87765vw -241.26851vh 0px white, 48.07581vw -393.63176vh 0px white, 18.2122vw -93.2196vh 0px white, 61.46928vw -122.72098vh 0px white, 5.88261vw -180.22752vh 0px white, 8.06242vw -264.55423vh 0px white, 66.64659vw -126.57947vh 0px white, 94.78698vw -247.04446vh 0px white, 61.44635vw -194.84934vh 0px white, 66.38202vw -102.16881vh 0px white, 48.41811vw -301.25918vh 0px white, 28.07355vw -216.8821vh 0px white, 78.33284vw -288.53637vh 0px white, 38.66473vw -131.79487vh 0px white, 75.15975vw -243.4578vh 0px white, 34.28099vw -239.19885vh 0px white, 59.08842vw -163.66123vh 0px white;

}

100% {

box-shadow: 74.95844vw -92.29924vh 0px white, 0.96888vw -301.66623vh 0px white, 46.33016vw -528.0745vh 0px white, 69.43149vw -291.59917vh 0px white, 48.49954vw -458.4217vh 0px white, 16.98362vw -152.55736vh 0px white, 62.65721vw -173.16814vh 0px white, 5.07629vw -248.59555vh 0px white, 7.82773vw -331.70834vh 0px white, 66.7564vw -188.9666vh 0px white, 94.71591vw -325.12248vh 0px white, 61.18265vw -249.15616vh 0px white, 66.99955vw -159.04407vh 0px white, 48.7304vw -363.03898vh 0px white, 27.57567vw -278.95504vh 0px white, 76.80917vw -339.25836vh 0px white, 37.20212vw -175.4564vh 0px white, 76.1992vw -317.63549vh 0px white, 32.57995vw -318.39315vh 0px white, 57.51806vw -222.65239vh 0px white;

}

@keyframes test2 {

0% {

}

10% {

}

20% {

}

30% {

}

40% {

}

50% {

}

60% {

}

70% {

}

80% {

}

90% {

}

100% {

}

.bubbles {

width: 20px;

height: 20px;

border-radius: 10px;

position: relative;

background: transparent;

}

.bubbles:before {

content: '';

position: absolute;

width: 100%;

height: 100%;

border-radius: 100%;

top: 0px;

left: 0px;

opacity: 0.25;

-webkit-animation: test 60s linear infinite;

animation: test 60s linear infinite;

}

.bubbles:after {

content: '';

position: absolute;

width: 200%;

height: 200%;

border-radius: 100%;

top: 0px;

left: 0px;

opacity: 0.25;

-webkit-animation: test2 60s linear infinite;

animation: test2 60s linear infinite;

}

weixin_39560245

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5怎么加中划线,HTML5带文本中划线切分动效的菜单模板

CSS语言：CSSSCSS确定html,body {padding: 0px;margin: 0px;background: -webkit-linear-gradient(#000, #222);background: linear-gradient(#000, #222);font-family: 'Enriqueta', serif;color: #FFF;height: 100%;}bod...
复制链接

扫一扫