笑脸时钟日历效果-html代码-BFW代码库

代码语言：html

代码描述：笑脸时钟日历效果

代码标签：效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
:root{
--black:hsl(180,100%,2%); 
--white:hsl(180,100%,96%); 
--featuredColor: blueviolet;
}
html,body{
height: 100%;
margin: 0;
}
body{
background-color:var(--black) ;
color:var(--white);
font-family:sans-serif;
display: flex;

}
h1{
font-size: 18px;
font-weight: normal;
margin:0;
position:absolute;
z-index:0;
line-height:18px;
 
}
h1 small{
font-size: 16px;
font-style: italic;
opacity:.6;
}
#quotes{
position:absolute;
top:0;
right: 0;
z-index: 1;
transition: .3s;
text-align: right;
font-style: italic;
text-shadow: -1px -1px 0 var(--black), 1px -1px 0 var(--black), -1px 1px 0 var(--black), 1px 1px 0 var(--black);  
}
#quotes b,#quotes span{
color:var(--featuredColor);  
}
button{
position:absolute;
bottom: 0;
margin:10px;
border:none;
background-color: transparent;
padding: 5px;        
cursor:pointer;
font-size:16px;
text-decoration: underline;
color:var(--white);
}
button:disabled{
opacity:.2;
cursor:default;
text-decoration: none;
}
button[value="1"]{
right: 0;         
}
button[value="1"]::after{
content: " »" ;     
}
button[value="-1"]::before{
content: "« " ;
}
#container{
--size : min(100vw ,100vh);       
--tanAngle:0.1989123673796;
--sector: calc(var(--size) * var(--tanAngle) / 2 ) ;
width: var(--size) ;
height:var(--size);
align-self:flex-end;
margin: 0 auto;
border-radius: 50%;    
position: relative;
overflow: hidden;      
filter:drop-shadow(0 0 var(--sector)  hsl(180,100%,22%));
opacity: 0;
transition:2s;
}
#container>div{        
border-radius:50%;
height: 100%;
background-color: transparent;        
transition:2s ease-out; 
}

#container>span{
position:absolute;
display:block;
width: 50%;
height: 50%;
border-radius: 50%;
background-color: transparent;    
overflow: hidden;       
left:25%;
top:25%;
text-align:center;
text-shadow: -1px -1px 0 var(--black), 1px -1px 0 var(--black), -1px 1px 0 var(--black), 1px 1px 0 var(--black);
}
#monthYear{
display:block;
font-size: calc(var(--sector) /2);
margin-top:5%;
transition:opacity .9s;     
}
#smileTime{
position:absolute;
width: calc(var(--size) * .4);
height:  calc(var(--size) * .2);
margin-left: calc(var(--size) * -.2);
border-radius: 0  0 calc(var(--size) * .2) calc(var(--size) * .2);
top:50%;
overflow: hidden;
background-image:radial-gradient(circle at center top,transparent 60%, hsla(190,100%,50%, 10%) 60%); 
}
#smileTime #plug{
display:block;
height:  calc(var(--size) * .4);
width: calc(var(--size) * .8);
margin-top:calc((var(--size) * -.4 ));
margin-left:calc((var(--size) * -.2 ));
transform-origin: center bottom;       
background-image:radial-gradient(circle at center bottom,transparent 29.5%, hsla(180,100%,2%,90%) 29.5%);
}
.dia{
width: var(--sector);
height: 50%;
margin-left:calc(50% - var(--sector) / 2);
box-sizing: border-box;
position:absolute;
transform-origin: center bottom;
clip-path: polygon(0% 0%,100% 0%, 50% 100%);
clip-path: polygon(0% -3%,100% -3%, 50% 97%);
font-size: calc(var(--sector) /2);
text-align: center;      
background-image:radial-gradient(circle at 50% 100%,transparent 50%, rgba(0,0,255,.85) 50%);
color:var(--white);
}
.dia>div{
display:block;
position:absolute;
width: 100%;
text-align: center;
transition:top 2s ease-out .3s, transform 2s ease-out .3s, coolor .8s ease 2s;
top:0;
z-index: 1;
font-family: cursive;
}
.dia[clicked]>div{
top:100%;
transform:scale(0);
color:var(--featuredColor);
font-weight: bold;
transition:top .3s ease-in .1s, transform .3s ease-in .1s;
}
.dia>span{
display:block;
background-color: var(--featuredColor);
font-size: calc(var(--sector) /4);
line-height: calc(var(--sector) /3);
width: calc(var(--sector) /3);
left:calc(var(--sector) /3);
top:calc(var(--sector) /1.5);
position:absolute;
border-radius: 50%;
text-align: center;
transition:opacity 2.4s ease 2s;
color:black;
}
.dia[clicked]>span{
transition:.2s;
opacity:0.2;
background-color:black; 
color:white
}
.dia[last]{
color:rgba(255,255,255,.2);
}
@media(hover) {
.dia:not([clicked]):hover{
background-color:var(--featuredColor);
cursor:pointer;    
}
}
.dia[clicked]{
background-color: rgba(255,255,255,.1);
cursor:default;
}
#nose{
display:block;
width: 100%;
position:absolute;
top:50%;
font-size: calc(var(--sector) /1.6);
line-height: 0;
transition:transform .22s ease-out;
font-family: cursive;
color:var(--featuredColor);            
}
#eye_1,#eye_2{
display:block;
position:absolute;
height: calc(var(--size) * .09);
width: calc(var(--size) * .07);;
background-color: var(--black);        
margin-top:calc(var(--size) * -.015);
border-radius: 50% 50% 10% 10%;
transition:transform .18s;
transform-origin: bottom;
border-top:calc(var(--size) * .02) solid black;
box-sizing: border-box;       
}
#eye_1{
left: calc(var(--size) * .1);
}
#eye_2{
right: calc(var(--size) * .1) ;
}
</style>




</head>

<body translate="no" >
  <h1>Circular calendar. <br>
    Or what's left of the month. <br>
    Or Tempus fugit. <br>
    Or Mr. Month. <br>
    <small>Fit to window.</small> <br>
    <small>Without SVG.</small>
</h1>
    <div id="quotes"></div>
<div id="container">
  <div></div>
    <span>   
   <span id="monthYear"></span>
        <span id="nose"></span>
        <span id="eye_1"></span><span id="eye_2"></span>
        <span id="smileTime"><span id="plug" title="Time elapsed today"></span></span>
    </span>
</div>
<button value="-1"></button>
 <button value="1"></button>
   

  
  
      <script>
const container = document.getElementById("container")
const containtCalendar = container.querySelector("#container>div") 
const quotes = document.getElementById("quotes")
const toDay = new Date((new Date).getFullYear(),(new Date).getMonth(), (new Date).getDate())
const initialDay = (new Date).getDate()
const nameDay = ["Sunday","Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
const nameMonth = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
const ephemeris = {
  0:{ // January
    1:["First day of the year"]
  },
  8:{ // September
    11:["Catalonia Day"],
    22:["Autumn equinox"],
    24:["\"La Mercè\""],
    28:["Tony's anniversary", "Ezekiel's anniversary", "Matthew's Day"]   
  },
  9:{ // October
    4:["Francis Day"],
    21:["Ursula's Day"], 
    31:["Halloween", "My aniversary"]
  },
  11:{ // December
    25:["Christmas"]           
  }
}
function dayNo(y,m,d){
        /*
            Returns .........完整代码请登录后点击上方下载按钮下载查看