html源码
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < title> </ title> < style>
:root {
--primary : #80e36b;
--secondary : #50bc37;
--bubble : #dc7f94;
--blush : #ee9a96;
--sizeMultiplicator : 2;
}
@media ( max-width : 1400px) , ( max-height : 1000px) {
:root {
--sizeMultiplicator : 1;
}
}
@media ( max-width : 700px) , ( max-height : 500px) {
:root {
--sizeMultiplicator : 0.5;
}
}
@media ( max-width : 350px) , ( max-height : 250px) {
:root {
--sizeMultiplicator : 0.3;
}
}
* {
box-sizing : border-box;
}
body {
overflow : hidden;
}
#main {
scale : var ( --sizeMultiplicator) ;
transform-origin : 91% 91%;
bottom : 0;
right : 0;
position : absolute;
padding : 65px 65px 0 0;
margin : 0 -50px -50px 0;
}
#head {
width : 500px;
aspect-ratio : 1;
background-color : var ( --primary) ;
border-radius : 100%;
border : 10px solid black;
}
#eyes {
position : absolute;
top : 300px;
left : 50px;
width : 300px;
height : 50px;
display : flex;
justify-content : space-between;
z-index : 1;
align-items : center;
}
#eyes .eye, #eyes .blush {
width : 50px;
height : 50px;
border-radius : 100%;
}
#eyes .eye {
background-color : black;
animation : blink 10s linear infinite;
}
#eyes .blush {
position : absolute;
background-color : var ( --blush) ;
z-index : -1;
top : 24px;
}
#eyes #blush-0 {
left : -26px;
}
#eyes #blush-1 {
right : -26px;
}
@keyframes blink{
50% {
height : 50px;
}
50.1% {
height : 10px;
}
50.7% {
height : 50px;
}
70% {
height : 50px;
}
71% {
height : 10px;
}
72% {
height : 50px;
}
73% {
height : 50px;
}
74% {
height : 10px;
}
75% {
height : 50px;
}
}
#mouth {
position : absolute;
top : 310px;
left : 190px;
}
#mouth .lip {
width : 25px;
aspect-ratio : 1;
border : 5px solid black;
border-radius : 100%;
}
#lip-1 {
margin-top : -6px;
position : relative;
visibility : hidden;
animation : mouth-show 10s infinite linear;
}
#lip-1:after {
content : "" ;
position : absolute;
left : 5px;
top : -100%;
height : 25px;
width : 20px;
border-radius : 40%;
background-color : var ( --primary) ;
}
@keyframes mouth-show{
0% {
visibility : visible;
}
50% {
visibility : hidden;
}
}
.hair {
background-color : var ( --secondary) ;
position : absolute;
border : 10px solid black;
z-index : -1;
border-radius : 50%;
}
#hair-0 {
top : 0px;
left : 220px;
width : 110px;
height : 230px;
rotate : 10deg;
}
#hair-1 {
top : 70px;
left : 350px;
width : 110px;
height : 210px;
rotate : 40deg;
}
#hair-2 {
top : 200px;
left : 400px;
width : 100px;
height : 190px;
rotate : 80deg;
}
#hair-3 {
top : 320px;
left : 380px;
width : 90px;
height : 190px;
rotate : 110deg;
}
#bubble {
aspect-ratio : 1;
position : absolute;
top : 59%;
right : 65%;
border-radius : 100%;
transform : translateY ( -50%) ;
animation : bubbleSize 10s infinite ease-out;
visibility : hidden;
z-index : 2;
}
#bubble:before {
content : "" ;
position : absolute;
width : 100%;
height : 100%;
background-color : var ( --bubble) ;
border-radius : 100%;
animation : bubbleOpacity 10s infinite ease-out;
}
#bubble:after {
content : "" ;
position : absolute;
border : 5px solid var ( --bubble) ;
width : 100%;
height : 100%;
box-sizing : border-box;
border-radius : 100%;
}
#highlight {
aspect-ratio : 1;
position : absolute;
width : 100%;
animation : highlightOpacity 10s infinite ease-out;
}
#highlight:before, #highlight:after {
content : "" ;
background-color : white;
border-radius : 100%;
position : absolute;
}
#highlight:before {
width : 7%;
height : 12%;
top : 10%;
left : 26%;
rotate : 45deg;
}
#highlight:after {
width : 6%;
height : 8%;
top : 26%;
left : 14%;
rotate : 33deg;
}
@keyframes bubbleSize{
0% {
width : 10px;
visibility : visible;
}
50% {
visibility : hidden;
}
55% {
width : 350px;
}
}
@keyframes bubbleOpacity{
0% {
opacity : 0.9;
}
50% {
opacity : 0.5;
}
}
@keyframes highlightOpacity{
0% {
opacity : 0;
}
50% {
opacity : 0.9;
}
}
#popped {
background-color : var ( --bubble) ;
opacity : 0.6;
width : 200px;
height : 200px;
scale : 2.8;
transform-origin : 0 0;
left : -24px;
position : absolute;
top : 41px;
z-index : 2;
clip-path : path ( "M135.6,42.4C146.6,44.6,156.3,53.3,162.7,63.9C169,74.6,172.1,87.3,169.7,98.6C167.3,109.9,159.3,119.8,153.8,131.9C148.2,144,145.1,158.4,136.6,163.6C128,168.9,114,164.9,101.1,163C88.2,161,76.5,161.1,66.4,156.7C56.2,152.4,47.7,143.8,38.5,133.6C29.2,123.4,19.3,111.7,18.3,99.4C17.4,87.2,25.4,74.4,33.1,61.5C40.7,48.6,48.1,35.7,59.2,33.6C70.3,31.4,85.1,40,98.7,42.2C112.3,44.4,124.7,40.2,135.6,42.4Z" ) ;
visibility : hidden;
animation : popped 10s infinite;
}
@keyframes popped{
50% {
visibility : hidden;
}
100% {
visibility : visible;
}
}
#shock {
position : absolute;
width : 200px;
height : 200px;
background-color : yellow;
top : 160px;
left : -170px;
clip-path : polygon ( 50% 0%, 62% 29%, 98% 35%, 71% 41%, 89% 63%, 47% 52%, 31% 84%, 29% 42%, 9% 31%, 43% 22%) ;
visibility : hidden;
animation : shock 10s infinite;
}
@keyframes shock{
49.7% {
visibility : hidden;
}
50.3% {
visibility : visible;
}
50.4% {
visibility : hidden;
}
}
</ style> </ head> < body> < divid = " main" > < divid = " head" > < divid = " eyes" > < divclass = " eye" > < divclass = " blush" id = " blush-0" > </ div> </ div> < divclass = " eye" > < divclass = " blush" id = " blush-1" > </ div> </ div> </ div> < divid = " mouth" > < divclass = " lip" id = " lip-0" > </ div> < divclass = " lip" id = " lip-1" > </ div> </ div> < divid = " popped" > </ div> </ div> < divid = " hair" > < divclass = " hair" id = " hair-0" > </ div> < divclass = " hair" id = " hair-1" > </ div> < divclass = " hair" id = " hair-2" > </ div> < divclass = " hair" id = " hair-3" > </ div> </ div> < divid = " bubble" > < divid = " highlight" > </ div> </ div> < divid = " shock" > </ div> </ div> < script>
</ script> </ body> </ html>
html源码
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < title> </ title> < style>
* {
margin : 0;
padding : 0;
}
html {
overflow-x : hidden;
}
body {
background : #434343;
width : 100%;
height : 100svh;
display : flex;
justify-content : center;
align-items : center;
font-family : "Bungee Spice" , sans-serif;
overflow-x : hidden;
min-height : 480px;
}
.container {
position : relative;
min-height : 250px;
}
.bubble-wrap {
width : 350px;
height : 350px;
border-radius : 50%;
position : relative;
display : flex;
justify-content : center;
align-items : center;
overflow : hidden;
}
.bubbles-bg {
position : relative;
height : 100%;
display : flex;
gap : 22px;
justify-content : center;
width : 100%;
}
.bubbles-bg span {
display : inline-block;
position : relative;
width : 8px;
height : 8px;
border-radius : 50%;
animation : animate 5s linear infinite;
animation-duration : calc ( 150s / var ( --i) ) ;
}
@keyframes animate{
0% {
transform : translateY ( 350px) scale ( 0) ;
background-color : #df6208;
box-shadow : 0px 0px 4px 4px #e67d31, 0 0 30px #e67d31, 0 0 70px #e67d31;
}
50% {
background : #d3df08;
box-shadow : 0px 0px 4px 4px #e4ec53, 0 0 30px #e4ec53, 0 0 70px #e4ec53;
}
70% {
background : #df0808;
box-shadow : 0px 0px 4px 4px #ec4242, 0 0 30px #ec4242, 0 0 70px #ec4242;
}
100% {
transform : translateY ( -10px) scale ( 1) ;
background-color : #df6208;
box-shadow : 0px 0px 4px 4px #e67d31, 0 0 30px #e67d31, 0 0 70px #e67d31;
}
}
.clock {
width : 350px;
height : 350px;
border-radius : 50%;
position : relative;
-webkit-box-shadow : inset inset 0px 0px 12px 12px rgba ( 0, 0, 0, 1) ,
0px 0px 65px 5px rgba ( 0, 0, 0, 0.5) ;
-moz-box-shadow : inset inset 0px 0px 12px 12px rgba ( 0, 0, 0, 1) ,
0px 0px 65px 5px rgba ( 0, 0, 0, 0.5) ;
box-shadow : inset 0px 0px 12px 12px rgba ( 0, 0, 0, 1) ,
0px 0px 65px 5px rgba ( 0, 0, 0, 0.5) ;
background : #1a1c1a;
display : flex;
justify-content : center;
align-items : center;
margin-bottom : 110px;
}
.clock::before {
content : "" ;
width : 10px;
height : 10px;
border-radius : 50%;
border : 2px solid #df6208;
background-color : #2f362f;
position : absolute;
top : 50%;
left : 50%;
transform : translate ( -50%, -50%) ;
z-index : 1;
}
.inner-circle {
width : 200px;
height : 350px;
border-radius : 50%;
position : absolute;
display : flex;
justify-content : center;
align-items : start;
}
.inner-circle-2 {
width : 150px;
height : 250px;
}
.inner-circle-3 {
width : 100px;
height : 155px;
}
.border-circle {
border-radius : 50%;
position : absolute;
background : transparent;
border : 2px solid rgba ( 223, 98, 8, 0.2) ;
left : 50%;
top : 50%;
width : 180px;
height : 180px;
transform : translate ( -50%, -50%) ;
}
.border-circle:nth-child(2) {
width : 130px;
height : 130px;
}
.border-circle:nth-child(3) {
width : 80px;
height : 80px;
}
.inner-circle div {
position : relative;
height : 50%;
width : 7px;
z-index : 1;
border-radius : 5px;
display : inline-block;
transform-origin : bottom;
transform : scale ( 0.5) ;
z-index : 0;
background : rgb ( 223, 98, 8) ;
background : linear-gradient (
180deg,
rgba ( 223, 98, 8, 0.9108018207282913) 50%,
rgba ( 255, 0, 0, 0.9304096638655462) 100%
) ;
}
.inner-circle-2 div {
width : 4px;
}
.inner-circle-3 div {
width : 3px;
}
span {
position : absolute;
text-align : center;
transform : rotate ( calc ( var ( --i) * 29.7deg) ) ;
inset : 25px;
}
span b {
font-size : 18px;
position : absolute;
text-align : center;
transform : rotateZ ( calc ( var ( --i) * -30deg) ) ;
display : inline-block;
opacity : 0.9;
}
.digital-time-wrap {
width : 10px;
height : 80%;
background-color : #1a1c1a;
position : absolute;
left : 48.5%;
top : 50%;
transform : translate ( -50%, -50%) ;
z-index : -1;
animation-name : rotate;
animation-duration : 2s;
animation-iteration-count : infinite;
transform-origin : 50% 0%;
animation-timing-function : linear;
}
@keyframes rotate{
0% {
transform : rotate ( -6deg) ;
animation-timing-function : ease-in;
}
25% {
transform : rotate ( 0deg) ;
animation-timing-function : ease-out;
}
50% {
transform : rotate ( 6deg) ;
animation-timing-function : ease-in;
}
75% {
transform : rotate ( 0deg) ;
animation-timing-function : ease-out;
}
100% {
transform : rotate ( -6deg) ;
}
}
#digital-time {
width : fit-content;
display : flex;
padding : 10px;
border : 2px solid rgba ( 0, 0, 0, 0.5) ;
border-radius : 20px;
-webkit-box-shadow : 0px 0px 65px 5px rgba ( 0, 0, 0, 0.5) ;
-moz-box-shadow : 0px 0px 65px 5px rgba ( 0, 0, 0, 0.5) ;
box-shadow : 0px 0px 65px 5px rgba ( 0, 0, 0, 0.5) ;
background : #242824;
position : absolute;
left : 50%;
transform : translateX ( -50%) ;
bottom : 0;
}
#digital-time div {
font-size : 20px;
width : 50px;
text-align : center;
position : relative;
}
#digital-time div:nth-child(1)::after,
#digital-time div:nth-child(2)::after {
content : ":" ;
position : absolute;
right : -4px;
opacity : 0.7;
}
#digital-time div:nth-child(4) {
font-size : 18px;
display : flex;
justify-content : center;
align-items : center;
}
</ style> </ head> < body> < body> < divclass = " container" > < divclass = " clock" > < divclass = " bubble-wrap" > < divclass = " bubbles-bg" > < spanstyle = " --i : 15; " > </ span> < spanstyle = " --i : 12; " > </ span> < spanstyle = " --i : 18; " > </ span> < spanstyle = " --i : 22; " > </ span> < spanstyle = " --i : 20; " > </ span> < spanstyle = " --i : 23; " > </ span> < spanstyle = " --i : 13; " > </ span> < spanstyle = " --i : 18; " > </ span> < spanstyle = " --i : 28; " > </ span> < spanstyle = " --i : 24; " > </ span> < spanstyle = " --i : 15; " > </ span> < spanstyle = " --i : 21; " > </ span> </ div> </ div> < divclass = " border-circle" > </ div> < divclass = " border-circle" > </ div> < divclass = " border-circle" > </ div> < divclass = " inner-circle inner-circle-1" id = " sec" > < div> </ div> </ div> < divclass = " inner-circle inner-circle-2" id = " min" > < div> </ div> </ div> < divclass = " inner-circle inner-circle-3" id = " hrs" > < div> </ div> </ div> < spanstyle = " --i : 1; " > < b> </ b> </ span> < spanstyle = " --i : 2; " > < b> </ b> </ span> < spanstyle = " --i : 3; " > < b> </ b> </ span> < spanstyle = " --i : 4; " > < b> </ b> </ span> < spanstyle = " --i : 5; " > < b> </ b> </ span> < spanstyle = " --i : 6; " > < b> </ b> </ span> < spanstyle = " --i : 7; " > < b> </ b> </ span> < spanstyle = " --i : 8; " > < b> </ b> </ span> < spanstyle = " --i : 9; " > < b> </ b> </ span> < spanstyle = " --i : 10; " > < b> </ b> </ span> < spanstyle = " --i : 11; " > < b> </ b> </ span> < spanstyle = " --i : 12; " > < b> </ b> </ span> < divclass = " digital-time-wrap" > < divid = " digital-time" > < divid = " hours" > </ div> < divid = " minuts" > </ div> < divid = " seconds" > </ div> < divid = " ampm" > </ div> </ div> </ div> </ div> </ div> </ body> </ body> < script>
let hrs = document. querySelector ( "#hrs" ) ;
let sec = document. querySelector ( "#sec" ) ;
let min = document. querySelector ( "#min" ) ;
setInterval ( ( ) => {
let day = new Date ( ) ;
let hh = day. getHours ( ) * 30 ;
let mm = day. getMinutes ( ) * 6 ;
let ss = day. getSeconds ( ) * 6 ;
hrs. style. transform = ` rotateZ( ${ hh + mm / 12 } deg) ` ;
min. style. transform = ` rotateZ( ${ mm} deg) ` ;
sec. style. transform = ` rotateZ( ${ ss} deg) ` ;
} ) ;
function updateClock ( ) {
const now = new Date ( ) ;
const hours = now. getHours ( ) ;
const minutes = now. getMinutes ( ) ;
const seconds = now. getSeconds ( ) ;
const ampm = hours >= 12 ? "PM" : "AM" ;
document. getElementById ( "hours" ) . textContent = formatTime ( hours % 12 || 12 ) ;
document. getElementById ( "minuts" ) . textContent = formatTime ( minutes) ;
document. getElementById ( "seconds" ) . textContent = formatTime ( seconds) ;
document. getElementById ( "ampm" ) . textContent = ampm;
}
function formatTime ( time ) {
return time < 10 ? "0" + time : time;
}
setInterval ( updateClock, 1000 ) ;
updateClock ( ) ;
</ script> </ html>
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < title> </ title> < style>
*, *::before, *::after {
margin : 0;
padding : 0;
box-sizing : border-box;
}
:root {
--main-width : 45em;
--main-height : 27em;
}
body {
display : flex;
justify-content : center;
align-items : center;
padding-top : 5em;
height : 100dvh;
overflow : hidden;
color : canvasText;
background-color : var ( --body) ;
font-size : clamp ( 0.6rem, calc ( 1vw + 0.1rem) , 1.5rem) ;
cursor : pointer;
}
body *:not(a, a *) {
position : absolute;
}
body *:not(a, a *)::before, body *:not(a, a *)::after {
position : absolute;
}
[data-theme=light], html {
color-scheme : light only;
--glass : #53C9E9;
--reflect : rgba ( 255, 255, 255, 0.4) ;
--roof-100 : #F1624A;
--roof-200 : #EC4042;
--roof-300 : #DC1F2E;
--roof-400 : #C31B28;
--wall-50 : #FFD16F;
--wall-100 : #FDBE3D;
--wall-200 : #FBAD2F;
--wall-300 : #F99C29;
--wall-400 : #F57C35;
--door-100 : #A14F3C;
--door-200 : #7E3A2C;
--grass-100 : #D4E16D;
--grass-200 : #A4CE3B;
--grass-300 : #6FBE46;
--body : #DFF8F8;
--satellite-front : #FFDF1E;
--satellite-back : #FEF3A5;
--satellite-bg : radial-gradient ( circle 2.8em at 50% 50%, var ( --satellite-front) 99.99%, transparent 0) , var ( --satellite-back) ;
--smoke : #D0DAE3;
}
[data-theme=dark] {
color-scheme : dark only;
--glass : #F0B455;
--reflect : rgba ( 255, 255, 255, 0.2) ;
--roof-100 : #C8405D;
--roof-200 : #A03045;
--roof-300 : #7C2334;
--roof-400 : #871B26;
--wall-50 : #D8A254;
--wall-100 : #C89B57;
--wall-200 : #B0842B;
--wall-300 : #B57850;
--wall-400 : #865F22;
--door-100 : #713D2B;
--door-200 : #5F3323;
--grass-100 : #9AB24E;
--grass-200 : #729B31;
--grass-300 : #517B32;
--body : #19152E;
--satellite-front : #FEFEFE;
--satellite-back : #D2D8DE;
--satellite-bg : radial-gradient ( circle 3.5em at 58% 45%, var ( --satellite-front) 99.99%, transparent 0) , #D0D9DC;
--smoke : #584D67;
}
:root {
--black : #000000;
--white : #FFFFFF;
--glass-reflect : linear-gradient ( 315deg, var ( --reflect) 35%, var ( --reflect) 40%, transparent 40%, transparent 50%, var ( --reflect) 50%, var ( --reflect) 65%, transparent 65%) ;
--glass-reflect-size : 2.6em 2.6em;
--glass-reflect-positions : 22.95em 18.575em, 28.45em 18.575em;
--image : linear-gradient ( var ( --body) , transparent) , var ( --glass-reflect) , var ( --glass-reflect) , ;
--size : 100% 3rem, var ( --glass-reflect-size) , var ( --glass-reflect-size) , ;
--position : 0 0, var ( --glass-reflect-positions) , ;
}
@keyframes clip-in{
from {
clip-path : xywh ( 0 0 0% 100%) ;
}
to {
clip-path : xywh ( 0 0 100% 100%) ;
}
}
::view-transition-old(root) {
animation : none;
}
::view-transition-new(root) {
animation : clip-in 350ms ease-in-out both;
}
.house {
width : var ( --main-width) ;
height : var ( --main-height) ;
overflow : hidden;
background-image : var ( --image) ;
background-size : var ( --size) ;
background-position : var ( --position) ;
background-repeat : no-repeat;
}
body::before {
width : 8em;
height : 8em;
content : '' ;
position : absolute;
border-radius : 100%;
left : 3em;
top : 3em;
background : var ( --satellite-bg) ;
}
p {
bottom : 1rem;
left : 50%;
translate : -50%;
font-size : 0.75rem;
font-family : sans-serif;
opacity : 0.7;
}
p a {
font-weight : 600;
white-space : nowrap;
}
</ style> </ head> < body> < body> < divclass = " house" > </ div> </ body> </ body> < script>
const isDark = document. documentElement. dataset. theme === 'dark' || matchMedia ( '(prefers-color-scheme: dark)' ) . matches
document. documentElement. dataset. theme = isDark ? 'dark' : 'light'
const updateTheme = ( ) => {
const isCurrentDark = document. documentElement. dataset. theme === 'dark'
document. documentElement. dataset. theme = isCurrentDark ? 'light' : 'dark'
}
const handleChangeThemes = ( ) => {
if ( ! document. startViewTransition) return updateTheme ( )
document. startViewTransition ( updateTheme)
}
addEventListener ( 'click' , handleChangeThemes)
</ script> </ html>
html源码
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < title> </ title> < style>
:root {
--tr : all 0.5s ease 0s;
--ch1 : #05478a;
--ch2 : #0070e0;
--cs1 : #005e38;
--cs2 : #03a65a;
--cw1 : #c24914;
--cw2 : #fc8621;
--ce1 : #851d41;
--ce2 : #db3056;
}
body {
margin : 0;
padding : 0;
width : 100vw;
height : 100vh;
overflow : hidden;
display : flex;
align-items : center;
justify-content : flex-end;
flex-direction : column;
background : radial-gradient ( circle at 50% 100%, #1d2232, #262434) ;
font-family : "Varela Round" , sans-serif;
}
.toast-panel {
display : flex;
flex-direction : column;
align-items : center;
justify-content : center;
transition : var ( --tr) ;
position : absolute;
padding : 0 1rem;
height : 100%;
min-height : 20rem;
min-width : 375px;
}
.toast-item {
overflow : hidden;
max-height : 25rem;
transition : var ( --tr) ;
animation : show-toast 4s ease 3s 1;
}
@keyframes show-toast{
0%, 50%, 100% { max-height : 0; opacity : 0; }
10%, 25% { max-height : 15rem; opacity : 1; }
}
.toast {
background-color : #232b2b;
background : var ( --bg) ;
color : #f5f5f5;
padding : 1rem 2rem 1rem 6rem;
text-align : center;
border-radius : 2rem;
position : relative;
font-weight : 300;
margin : 1.75rem 0 1rem;
text-align : left;
max-width : 15rem;
transition : var ( --tr) ;
opacity : 1;
}
.toast:before {
content : "" ;
position : absolute;
width : 5.5rem;
height : 6rem;
--drop :
radial-gradient ( circle at 64% 51%, var ( --clr) 0.45rem, #fff0 calc ( 0.45rem + 1px) ) ,
radial-gradient ( circle at 100% 100%, #fff0 0.9rem, var ( --clr) calc ( 0.9rem + 1px) 1.25rem, #fff0 calc ( 1.25rem + 1px) 100%) ,
radial-gradient ( circle at 0% 0%, #fff0 0.9rem, var ( --clr) calc ( 0.9rem + 1px) 1.25rem, #fff0 calc ( 1.25rem + 1px) 100%) ,
radial-gradient ( circle at 0% 120%, var ( --clr) 4rem, #fff0 calc ( 4rem + 1px) ) ;
background :
radial-gradient ( circle at 22% 3.8rem, var ( --clr) 0.75rem, #fff0 calc ( 0.75rem + 1px) ) ,
radial-gradient ( circle at 95% 1.9rem, var ( --clr) 0.07rem, #fff0 calc ( 0.07rem + 1px) ) ,
radial-gradient ( circle at 80% 2.25rem, var ( --clr) 0.18rem, #fff0 calc ( 0.18rem + 1px) ) ,
radial-gradient ( circle at 80% 75%, var ( --clr) 0.35rem, #fff0 calc ( 0.35rem + 1px) ) ,
radial-gradient ( circle at 43% 2.3rem, var ( --clr) 0.07rem, #fff0 calc ( 0.07rem + 1px) ) ,
radial-gradient ( circle at 40% 1rem, var ( --clr) 0.12rem, #fff0 calc ( 0.12rem + 1px) ) ,
radial-gradient ( circle at 20% 1.5rem, var ( --clr) 0.25rem, #fff0 calc ( 0.25rem + 1px) ) ,
var ( --drop) ,
#f000;
background-repeat : no-repeat;
background-size : 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 1.625rem 1.625rem, 1.625rem 1.625rem, 100% 100%, 100% 100%;
background-position : 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, calc ( 100% - 1.75rem) 2.85rem, calc ( 100% - 1.75rem) 2.95rem, 0 0, 0 0;
bottom : 0rem;
left : 0rem;
z-index : 0;
border-radius : 0 0 0 2rem;
}
.toast:after {
content : "" ;
position : absolute;
width : 3.5rem;
height : 3.5rem;
background : var ( --clr) ;
top : -1.75rem;
left : 2rem;
border-radius : 3rem;
padding-top : 0.2rem;
display : flex;
align-items : center;
justify-content : center;
font-size : 2.25rem;
box-sizing : border-box;
}
.toast h3 {
font-size : 1.35rem;
margin : 0;
line-height : 1.35rem;
font-weight : 300;
position : relative;
}
.toast h3:before,
.toast-icon:before {
border : 0.5rem solid #fff0;
width : 0;
height : 0;
position : absolute;
content : "" ;
left : -3.45rem;
border-top : 1rem solid var ( --clr) ;
border-left : 1rem solid var ( --clr) ;
top : -0.4em;
transform : rotate ( -96deg) skewX ( 30deg) ;
border-radius : 0.5rem;
}
.toast p {
position : relative;
font-size : 0.95rem;
z-index : 1;
margin : 0.25rem 0 0;
}
.close {
position : absolute;
width : 1.35rem;
height : 1.35rem;
text-align : center;
right : 1rem;
cursor : pointer;
border-radius : 100%;
}
.close:after {
position : absolute;
font-family : 'Varela Round' , san-serif;
width : 100%;
height : 100%;
left : 0;
font-size : 1.8rem;
content : "+" ;
transform : rotate ( 45deg) ;
border-radius : 100%;
display : flex;
align-items : center;
justify-content : center;
}
.close:hover {
background : #f5f5f5;
color : var ( --clr) ;
}
.toast-item.success {
animation-delay : 2s;
}
.toast-item.warning {
animation-delay : 1s;
}
.toast-item.error {
animation-delay : 0s;
}
.toast.help {
--clr : var ( --ch1) ;
--bg : var ( --ch2) ;
}
.toast.help:after,
.icon-help:after {
content : "?" ;
}
.toast.success {
--clr : var ( --cs1) ;
--bg : var ( --cs2) ;
}
.toast.success:after,
.icon-success:after {
content : "L" ;
font-size : 1.7rem;
font-weight : bold;
padding-bottom : 0.5rem;
transform : rotateY ( 180deg) rotate ( -38deg) ;
text-indent : 0.15rem;
}
.toast.warning {
--clr : var ( --cw1) ;
--bg : var ( --cw2) ;
}
.toast.warning:after,
.icon-warning:after {
content : "!" ;
font-weight : bold;
}
.toast.error {
--clr : var ( --ce1) ;
--bg : var ( --ce2) ;
}
.toast.error:after,
.icon-error:after {
content : "+" ;
font-size : 3rem;
line-height : 1.2rem;
transform : rotate ( 45deg) ;
}
.toast.success:before {
--drop : radial-gradient ( circle at 65% 63%, var ( --clr) 0.425rem, #fff0 calc ( 0.425rem + 1px) ) , radial-gradient ( circle at 70% 125%, #fff0 1rem, var ( --clr) calc ( 1rem + 1px) 1.25rem, #fff0 calc ( 1.25rem + 1px) 100%) , radial-gradient ( circle at 30% -25%, #fff0 1rem, var ( --clr) calc ( 1rem + 1px) 1.25rem, #fff0 calc ( 1.25rem + 1px) 100%) , radial-gradient ( circle at 20% 120%, var ( --clr) 3.5rem, #fff0 calc ( 3.5rem + 1px) ) ;
background-position : 0 0.4rem, -0.2rem 3.3rem, 0 0.4rem, -2rem -1.5rem, -0.8rem 0rem, -1rem 0.4rem, 0rem 1.5rem, 1.2rem 0.4rem, calc ( 100% - 0.75rem) 3.5rem, calc ( 100% - 0.75rem) 3.75rem, 0 0rem, 0 0rem;
}
.toast.warning:before {
--drop : radial-gradient ( circle at 65% 63%, var ( --clr) 0.425rem, #fff0 calc ( 0.425rem + 1px) ) , radial-gradient ( circle at 129% 36%, #fff0 1rem, var ( --clr) calc ( 1rem + 1px) 1.25rem, #fff0 calc ( 1.25rem + 1px) 100%) , radial-gradient ( circle at -27% 25%, #fff0 1rem, var ( --clr) calc ( 1rem + 1px) 1.25rem, #fff0 calc ( 1.25rem + 1px) 100%) , radial-gradient ( circle at 20% 120%, var ( --clr) 3.5rem, #fff0 calc ( 3.5rem + 1px) ) ;
background-position : 1.82rem 0.65rem, -1.2rem 1.2rem, -2rem 0.75rem, -3.5rem -1.95rem, -0.5rem -0.55rem, 3rem 4.25rem, 0rem -0.5rem, 1.2rem 0.4rem, calc ( 100% - 3.9rem) 2.75rem, calc ( 100% - 3.75rem) 2.75rem, 0 0rem, 0 0rem;
}
.toast.error:before {
--drop : radial-gradient ( circle at 65% 63%, var ( --clr) 0.425rem, #fff0 calc ( 0.425rem + 1px) ) , radial-gradient ( circle at 129% 36%, #fff0 1rem, var ( --clr) calc ( 1rem + 1px) 1.25rem, #fff0 calc ( 1.25rem + 1px) 100%) , radial-gradient ( circle at -27% 25%, #fff0 1rem, var ( --clr) calc ( 1rem + 1px) 1.25rem, #fff0 calc ( 1.25rem + 1px) 100%) , radial-gradient ( circle at 20% 120%, var ( --clr) 3.5rem, #fff0 calc ( 3.5rem + 1px) ) ;
background-position : 1.75rem 0.75rem, -0.75rem 1.2rem, -1.3rem 0.5rem, -3.5rem -2.5rem, -0.4rem 0rem, 2rem 1.25rem, 0.82rem 1.6rem, 0.5rem 1.65rem, calc ( 100% - 2.99rem) 3.25rem, calc ( 100% - 2.75rem) 3rem, 0 0rem, 0 0rem;
}
.toast a {
color : #fff;
}
.toast-item.closed {
max-height : 0;
}
.toast-icons {
background : #fff1;
padding : 1rem 1rem 1.25rem 1rem;
display : flex;
justify-content : space-around;
border-radius : 2rem;
gap : 1.5rem;
width : 100%;
box-sizing : border-box;
margin-top : 1.5rem;
margin-bottom : 1rem;
}
.toast-icon {
width : 3.75rem;
height : 3.75rem;
border-radius : 100%;
display : flex;
align-items : center;
justify-content : center;
color : #fff;
cursor : pointer;
position : relative;
}
.toast-icon:before {
left : 0.7rem;
top : 2.4em;
transform : rotate ( -96deg) skewX ( 30deg) ;
}
.toast-icon:after {
font-size : 2rem;
font-weight : bold;
}
.icon-error:after {
font-size : 3.6rem;
line-height : 2rem;
font-weight : 500;
padding-top : 0.25rem;
max-height : 2rem;
}
.icon-help {
background : #0070e0;
--clr : #0070e0;
}
.icon-success {
background : #03a65a;
--clr : #03a65a;
}
.icon-warning {
background : #fc8621;
--clr : #fc8621;
}
.icon-error {
background : #db3056;
--clr : #db3056;
}
#t-help:checked ~ .toast-panel .toast-item.help,
#t-success:checked ~ .toast-panel .toast-item.success,
#t-warning:checked ~ .toast-panel .toast-item.warning,
#t-error:checked ~ .toast-panel .toast-item.error {
max-height : 0;
opacity : 0;
}
input[type=checkbox] {
display : none;
}
</ style> </ head> < body> < inputtype = " checkbox" name = " t-help" id = " t-help" checked > < inputtype = " checkbox" name = " t-success" id = " t-success" checked > < inputtype = " checkbox" name = " t-warning" id = " t-warning" checked > < inputtype = " checkbox" name = " t-error" id = " t-error" checked > < divclass = " toast-panel" > < divclass = " toast-item help" > < divclass = " toast help" > < labelfor = " t-help" class = " close" > </ label> < h3> </ h3> < p> </ p> </ div> </ div> < divclass = " toast-item success" > < divclass = " toast success" > < labelfor = " t-success" class = " close" > </ label> < h3> </ h3> < p> </ p> </ div> </ div> < divclass = " toast-item warning" > < divclass = " toast warning" > < labelfor = " t-warning" class = " close" > </ label> < h3> </ h3> < p> </ p> </ div> </ div> < divclass = " toast-item error" > < divclass = " toast error" > < labelfor = " t-error" class = " close" > </ label> < h3> </ h3> < p> </ p> </ div> </ div> < divclass = " toast-icons" > < labelfor = " t-help" class = " toast-icon icon-help" > </ label> < labelfor = " t-success" class = " toast-icon icon-success" > </ label> < labelfor = " t-warning" class = " toast-icon icon-warning" > </ label> < labelfor = " t-error" class = " toast-icon icon-error" > </ label> </ div> </ div> < script>
</ script> </ body> </ html>
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < title> </ title> < style>
html, body {
display : grid;
}
html {
min-height : 100%;
background : #121212;
}
html::before {
grid-area : 1;
background : #0001;
backdrop-filter : url ( #noisey) ;
content : '' ;
}
body {
grid-area : 1;
}
svg[width='0'][height='0'] {
position : fixed;
}
div {
position : relative;
place-self : center;
padding : 0 0.125em;
color : #00f;
font : italic 900 clamp ( 2em, 21.5vw, 25em) montserrat, sans-serif;
overflow-wrap : anywhere;
text-align : center;
text-transform : uppercase;
isolation : isolate;
filter : url ( #sliced) url ( #noisey) hue-rotate ( calc ( var ( --hov, 0) *120deg) ) ;
transition : filter 0.3s;
}
div::after {
position : absolute;
inset : 0;
background : linear-gradient ( -4deg, #0000 calc ( 58.5% + -.5px) , #f00 calc ( 58.5% + .5px) ) , linear-gradient ( -2.5deg, #0f0 calc ( 31% + -.5px) , #000 calc ( 31% + .5px) ) ;
background-size : 100% 1lh;
mix-blend-mode : lighten;
pointer-events : none;
content : '' ;
}
div:focus {
outline : none;
}
div:hover, div:focus {
--hov : 1;
}
</ style> </ head> < body> < svgwidth = " 0" height = " 0" > < filterid = " sliced" color-interpolation-filters = " sRGB" > < feColorMatrixvalues = " 0 0 0 0 .93
0 0 0 0 .93
0 0 0 0 .93
1 0 1 0 -1" > </ feColorMatrix> < feOffsetdx = " -16" dy = " -2" result = " topstrip" > </ feOffset> < feColorMatrixin = " SourceGraphic" values = " 0 0 0 0 .93
0 0 0 0 .93
0 0 0 0 .93
0 1 1 0 -1" > </ feColorMatrix> < feOffsetdx = " 16" dy = " 2" > </ feOffset> < feBlendin = " topstrip" > </ feBlend> < feDropShadowstdDeviation = " 5" > </ feDropShadow> < feDropShadowstdDeviation = " 7" result = " outstrip" > </ feDropShadow> < feColorMatrixin = " SourceGraphic" values = " 0 0 0 0 .945
0 0 0 0 .965
0 0 0 0 .4
-1 -1 1 0 0" > </ feColorMatrix> < feBlendin = " outstrip" > </ feBlend> </ filter> < filterid = " noisey" > < feTurbulencetype = " fractalNoise" baseFrequency = " 3.17" > </ feTurbulence> < feComponentTransfer> < feFuncAtype = " table" tableValues = " 0 .3" > </ feFuncA> </ feComponentTransfer> < feCompositein = " SourceGraphic" operator = " out" > </ feComposite> </ filter> </ svg> < divcontenteditable = " true" > </ div> </ body> < script>
</ script> </ html>
html源码
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < title> </ title> < style>
body {
font-family : sans-serif;
min-height : 100dvh;
justify-content : center;
align-items : center;
display : flex;
background-color : #ece9e4;
font-size : 1rem;
}
button {
position : relative;
font : inherit;
background-color : #f0f0f0;
border : 0;
color : #242424;
border-radius : 0.5em;
font-size : 3rem;
padding : 0.375em 1em;
font-weight : 600;
text-shadow : 0 0.0625em 0 #fff;
box-shadow : inset 0 0.0625em 0 0 #f4f4f4, 0 0.0625em 0 0 #efefef, 0 0.125em 0 0 #ececec, 0 0.25em 0 0 #e0e0e0, 0 0.3125em 0 0 #dedede, 0 0.375em 0 0 #dcdcdc, 0 0.425em 0 0 #cacaca, 0 0.425em 0.5em 0 #cecece;
transition : 0.25s ease;
pointer : cursor;
touch-action : manipulation;
-webkit-tap-highlight-color : rgba ( 0, 0, 0, 0) ;
cursor : pointer;
}
button:active, button:hover {
transform : translateY ( 0.225em) ;
box-shadow : inset 0 0.03em 0 0 #f4f4f4, 0 0.03em 0 0 #efefef, 0 0.0625em 0 0 #ececec, 0 0.125em 0 0 #e0e0e0, 0 0.125em 0 0 #dedede, 0 0.2em 0 0 #dcdcdc, 0 0.225em 0 0 #cacaca, 0 0.225em 0.375em 0 #cecece;
}
button:active:after, button:hover:after {
height : calc ( 100% + 0.225em) ;
}
button:after {
position : absolute;
content : "" ;
display : block;
width : 100%;
height : calc ( 100% + 0.375em) ;
top : 0;
left : 0;
background-color : transparent;
transition : height 0.25s ease;
}
</ style> </ head> < body> < button> </ button> < script>
</ script> </ body> </ html>
扫一扫
1454
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
