原生js+css实现卡通风格待办事项应用代码
代码语言：html
所属分类：其他
代码描述：原生js+css实现卡通风格待办事项应用代码
代码标签： 原生 js css 卡通 风格 待办 事项 应用 代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
--add-todo-active: 0;
min-height: 100vh;
background-color: #222;
display: grid;
font-family: Poppins, sans-serif;
}
:root {
--hue: 20;
--accent: hsl(var(--hue), 80%, 50%);
--dark-accent: hsl(var(--hue), 100%, 5%);
--light-accent: hsl(var(--hue), 100%, 95%);
}
.add-todo {
--active: 0;
position: absolute;
top: 0;
left: 50%;
translate: -50% 0;
width: max(250px, calc(80vmin * var(--active)));
height: max(50px, calc(150px * var(--active)));
display: block;
border: none;
background-color: transparent;
overflow: visible;
transition: top .5s, width .5s, height .5s, translate .5s;
z-index: 10;
}
.add-todo::before,
.add-todo::after {
content: '';
position: absolute;
height: 50px;
aspect-ratio: 1;
background-color: var(--accent);
left: -50px;
top: 0;
z-index: 0;
mask:
radial-gradient(circle 25px, #0000 24px, #000 25px),
linear-gradient(45deg, #000 52px, #0000 50px);
mask-composite: subtract;
clip-path: inset(0 0 0 25px);
}
.add-todo::after {
left: 100%;
mask:
radial-gradient(circle 25px, #0000 24px, #000 25px),
linear-gradient(-45deg, #000 52px, #0000 50px);
mask-composite: subtract;
clip-path: inset(0 25px 0 0);
}
.add-todo .inner {
position: relative;
width: 100%;
height: 100%;
background-color: var(--accent);
padding: 1rem 2rem;
border-radius: 0 0 25px 25px;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 50px 1fr;
overflow: hidden;
transition: border-radius .5s;
border-bottom: 3px solid black;
}
.add-todo header {
display: flex;
align-items: center;
justify-content: center;
}
.add-todo header h1 {
color: var(--light-accent);
font-weight: 300;
display: flex;
align-items: center;
justify-content: center;
}
.add-todo header h1 svg {
width: 50px;
aspect-ratio: 1;
opacity: 1;
}
.add-todo .todo-input-section {
display: flex;
}
.add-todo .todo-input-section .todo-input-wrapper {
display: flex;
width: 100%;
align-items: center;
}
.add-todo .todo-input-section .todo-input-wrapper .todo-input {
width: 100%;
background-color: transparent;
border: none;
font-family: Poppins, sans-serif;
color: var(--dark-accent);
font-size: 1.3rem;
}
.add-todo .todo-input-section .todo-input:is(:active, :focus-within) {
outline: none;
}
.add-todo .todo-input-section .todo-input::placeholder {
color: rgba(255 255 255 / .3);
}
.add-todo .todo-input-section .todo-input-wrapper .add-todo-btn {
width: 50px;
height: 50px;
background-color: transparent;
border: none;
cursor: pointer;
color: var(--dark-accent);
transition: opacity .3s, scale .1s;
}
.add-todo-btn:active {
opacity: .7;
scale: 1.1;
}
.add-todo-btn svg {
width: 100%;
height: 100%;
}
.add-todo:popover-open,
body:has(.add-todo:popover-open) {
--active: 1;
--add-todo-active: 1;
}
.add-todo [popovertarget] {
position: absolute;
width: calc(100% * (1 - var(--active)));
height: calc(100% * (1 - var(--active)));
top: 50%;
left: 50%;
translate: -50% -50%;
background-color: var(--accent);
background-clip: padding-box;
opacity: calc(1 - var(--active));
border: 3px solid transparent;
border-radius: 25px;
overflow: hidden;
font-family: Poppins, sans-serif;
font-size: 1.2rem;
font-weight: 700;
letter-spacing: -1px;
word-spacing: 2px;
color: var(--dark-accent);
cursor: pointer;
transition: width .5s, height .5s, translate .5s, opacity .5s;
}
[popover]:popover-open::backdrop {
background-color: rgba(0 0 0 / .6);
}
[popover]::backdrop {
background-color: transparent;
transition: background-color .3s allow-discrete;
}
@starting-style {
[popover]:popover-open::backdrop {
background-color: transparent;
}
}
.todos {
--margin-top: 50px;
--has-todos: 0;
position: relative;
width: 100%;
height: calc(100% - (var(--margin-top) + (var(--add-todo-active) * 100px)));
margin-top: calc(var(--margin-top) + (var(--add-todo-active) * 100px));
display: grid;
transition: margin-top .3s, height .3s;
}
.todos .todos-list {
list-style: none;
gap: 1rem;
padding: 1rem;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 1fr);
align-items: center;
justify-items: center;
z-index: 5;
}
.todos .todos-list .todo-item {
--completed: 0;
--removed: 0;
position: relative;
background-color: var(--accent);
padding: 1rem;
width: max-content;
border-radius: .6rem;
display: flex;
align-items: center;
justify-content: center;
box-shadow: -5px 5px 0px var(--dark-accent);
transform: rotate(var(--rotation)) translateY(var(--top-offset));
}
.todo-item .task-text {
margin-right: 15px;
position: relative;
white-space: nowrap;
}
.todo-item .task-text::after {
content: '';
position: absolute;
width: calc(110% * var(--completed));
height: 3px;
top: 50%;
left: 0%;
translate: 0% -50%;
background-color: var(--dark-accent);
transition: width .3s;
}
.todos .todo-item .todo-item-btn {
--checked: 0;
position: relative;
width: 25px;
aspect-ratio: 1;
background-color: var(--accent);
border: none;
border-radius: 50%;
cursor: pointer;
transition: opacity .3s, filter .3s;
}
.todo-item .todo-item-btn:hover {
z-index: 3;
}
.todo-item:has(.todo-item-btn:hover) .todo-item-btn:not(:hover) {
opacity: .6;
filter: blur(2px);
}
.todo-item .todo-item-btn:nth-of-type(1) {
margin-right: -6px;
z-index: 2;
}
.todo-item .todo-item-btn svg {
position: absolute;
inset: 0;
opacity: calc(1 - var(--checked));
}
.todo-item .todo-item-btn svg:last-of-type {
opacity: var(--checked);
}
.todo-item .todo-item-btn input {
position: absolute;
inset: 0;
appearance: none;
opacity: 0;
cursor: pointer;
clip-path: circle(50%);
}
.todo-item .todo-item-btn:has(input:checked),
.todo-item .todo-item-btn:active {
--checked: 1;
}
.todo-item:has(.todo-item-btn input:checked) {
--completed: 1;
}
.todos-list:not(:has(*))+.no-todos {
--has-todos: 1;
}
.todos .no-todos {
position: absolute;
top: 50%;
left: 50%;
transform: rotate(4deg) translate(-50%, calc(-50% + (var(--add-todo-active) * 50px)));
width: max-content;
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
font-family: Kalam, sans-serif;
font-size: 3rem;
color: var(--light-accent);
opacity: calc(var(--has-todos) * .5);
pointer-events: none;
z-index: 0;
transition: opacity .3s, transform .3s;
}
.todos .no-todos svg {
width: 30vmin;
position: absolute;
top: -45%;
left: calc(100% + .2ch);
transform-origin: 50% 100%;
transform: rotate(-70deg);
}
.alien-link {
--alien-hover: 0;
color: slategray;
position: fixed;
bottom: 1rem;
left: 1rem;
width: 48px;
aspect-ratio: 1;
display: grid;
place-items: center;
z-index: 100;
opacity: calc(.8 + (.2 * var(--alien-hover)));
animation: app-start 5s linear 1 -2.5s;
}
@keyframes app-start {
to {
--alien-hover: 1;
}
}
.alien-link::after {
content: 'Click me !';
position: absolute;
bottom: calc(100% - 10px);
left: calc(100% - 10px);
width: 100px;
aspect-ratio: 2/1;
background-color: color-mix(in srgb, slategray, dodgerblue);
color: rgba(0 0 0 / .8);
border-radius: 10px 10px 10px 0px;
transform-origin: 0% 0%;
transform: rotate(-2deg) translate(calc((1 - var(--alien-hover)) * -10px), calc((1 - var(--alien-hover)) * -10px));
display: flex;
align-items: center;
justify-content: center;
text-align: center;
white-space: nowrap;
font-size: 1rem;
font-weight: 600;
opacity: var(--alien-hover);
transition: opacity .3s, transform .5s;
}
:where(.x-link, .alien-link, ):is(:hover, :focus-visible) {
--alien-hover: 1;
}
.alien-link svg {
width: 75%;
}
</style>
</head>
<body>
<div class="add-todo" popover="auto" id="add-todo-popover">
<div class="inner">
<header class="header">
<h1>To-do List <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_iconCarrier">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M8.38358 3C8.75808 3 9.06166 3.31153 9.06166 3.69582V3.92169C9.10586 3.91015 9.15023 3.89901 9.19476 3.88829C11.0399 3.44416 12.9601 3.44416 14.8052 3.88829C14.8498 3.89901 14.8941 3.91014 14.9383 3.92169V3.69582C14.9383 3.31153 15.2419 3 15.6164 3C15.9909 3 16.2945 3.31153 16.2945 3.69582V4.42901C18.2277 5.38732 19.6726 7.19919 20.1754 9.39896C20.6082 11.2924 20.6082 13.2628 20.1754 15.1562C19.5504 17.8905 17.4698 20.0255 14.8052 20.6669C12.9601 21.111 11.0399 21.111 9.19476 20.6669C6.53017 20.0255 4.44963 17.8906 3.82461 15.1562C3.3918 13.2628 3.3918 11.2924 3.82461 9.39896C4.32745 7.19918 5.77233 5.38732 7.70551 4.42901V3.69582C7.70551 3.31153 8.00909 3 8.38358 3ZM11.0274 9.88793C11.2393 9.67055 11.2393 9.31809 11.0274 9.1007C10.8156 8.88331 10.4721 8.88331 10.2603 9.1007L8.83564 10.5626L8.31512 10.0285C8.10327 9.81107 7.7598 9.81107 7.54796 10.0285C7.33611 10.2458 7.33611 10.5983 7.54796 10.8157L8.45206 11.7435C8.66391 11.9608 9.00737 11.9608 9.21922 11.7435L11.0274 9.88793ZM12.9041 10.3293C12.6045 10.3293 12.3616 10.5785 12.3616 10.886C12.3616 11.1934 12.6045 11.4426 12.9041 11.4426H16.0685C16.3681 11.4426 16.6109 11.1934 16.6109 10.886C16.6109 10.5785 16.3681 10.3293 16.0685 10.3293H12.9041ZM11.0274 14.5267C11.2393 14.3093 11.2393 13.9569 11.0274 13.7395C10.8156 13.5221 10.4721 13.5221 10.2603 13.7395L8.83564 15.2014L8.31512 14.6673C8.10327 14.4499 7.7598 14.4499 7.54796 14.6673C7.33611 14.8846 7.33611 15.2371 7.54796 15.4545L8.45206 16.3822C8.66391 16.5996 9.00737 16.5996 9.21922 16.3822L11.0274 14.5267ZM12.9041 14.9681C12.6045 14.9681 12.3616 15.2173 12.3616 15.5248C12.3616 15.8322 12.6045 16.0814 12.9041 16.0814H16.0685C16.3681 16.0814 16.6109 15.8322 16.6109 15.5248C16.6109 15.2173 16.3681 14.9681 16.0685 14.9681H12.9041Z"
fill="currentColor"></path>
</g>
</svg></h1>
</header>
<section class="todo-input-section">
<div class="todo-input-wrapper">
<input type="text" class="todo-input" placeholder="What do you want to do?" />
<button class="add-todo-btn">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_iconCarrier">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM12.75 9C12.75 8.58579 12.4142 8.25 12 8.25C11.5858 8.25 11.25 8.58579 11.25 9L11.25 11.25H9C8.58579 11.25 8.25 11.5858 8.25 12C8.25 12.4142 8.58579 12.75 9 12.75H11.25V15C11.25 15.4142 11.5858 15.75 12 15.75C12.4142 15.75 12.75 15.4142 12.75 15L12.75 12.75H15C15.4142 12.75 15.75 12.4142 15.75 12C15.75 11.5858 15.4142 11.25 15 11.25H12.75V9Z"
fill="currentColor"></path>
</g>
</svg>
</button>
</div>
</section>
</div>
<button popovertarget="add-todo-popover">Add Todo</button>
</div>
<section class="todos">
<ul class="todos-list">
</ul>
<div class="no-todos">
No Todos yet!
<svg fill="currentColor" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 377.114 377.115" xml:space="preserve">
<g id="SVGRepo_iconCarrier">
<g>
<g>
<path
d="M16.808,330.236c-1.836-2.449-4.896-4.285-7.344-6.732c-2.448-2.447-4.284-6.119-6.12-9.18 c-1.224-1.836-4.284-0.611-3.06,1.225c2.448,6.119,6.732,17.135,14.076,17.748C16.808,333.908,18.032,332.072,16.808,330.236z">
</path>
<path
d="M63.932,357.775c-3.672-2.447-7.956-3.059-12.24-4.283c-4.896-1.836-9.792-3.672-13.464-6.732 c-1.224-0.611-2.448,0.613-1.836,1.836c6.12,6.732,16.524,14.076,26.316,14.688C65.156,362.671,65.768,359,63.932,357.775z">
</path>
<path
d="M101.875,332.683c-3.06,3.061-5.508,6.732-9.18,9.18c-3.672,2.449-7.344,3.061-11.628,3.672 c-2.448,0.613-1.224,3.061,0.612,3.674c10.404,1.223,20.196-3.674,24.48-12.854C106.771,333.296,103.711,330.236,101.875,332.683z ">
</path>
<path
d="M111.056,295.351c-0.612-0.611-1.836-0.611-3.06,0c-2.448,2.449-1.836,5.508-1.836,7.957 c0,4.283-0.612,7.955-2.448,11.627c-0.612,2.449,2.448,3.672,3.672,1.836c1.836-3.672,3.06-7.344,3.672-11.016 C112.892,302.695,114.116,297.8,111.056,295.351z">
</path>
<path
d="M98.204,278.828c-3.672-1.836-6.732-4.896-9.792-7.344c-3.06-3.061-5.508-6.121-9.18-8.568 c-2.448-1.225-4.896,1.225-3.672,3.672c2.448,3.672,6.12,6.732,9.792,9.793c3.06,2.447,6.732,4.895,10.404,6.73 C98.815,284.335,101.264,280.664,98.204,278.828z">
</path>
<path
d="M55.976,259.244c-4.284,0-7.956,0.611-11.628,2.447c-3.06,1.836-7.344,5.508-7.344,9.182c0,1.836,2.448,3.672,4.284,2.447 c2.448-1.836,4.284-4.285,6.12-6.121c2.448-1.836,5.508-3.059,7.956-3.059C59.036,264.14,59.647,259.855,55.976,259.244z">
</path>
<path
d="M55.976,303.308c-2.448-3.672-2.448-8.568-1.224-12.24c0.612-1.836-2.448-3.061-3.06-1.225 c-1.836,4.896-3.06,9.18-1.836,14.076c1.224,4.283,4.284,1.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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