css布局实现一个可点击变暗的皮卡丘效果代码
代码语言：html
所属分类：动画
代码描述：css布局实现一个可点击变暗的皮卡丘效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
@-webkit-keyframes blinky {
0%, 9%, 11%, 19%, 21%, 69%, 71%, 100% {
transform: scaleY(1);
}
10%, 20%, 70% {
transform: scaleY(0);
}
}
@keyframes blinky {
0%, 9%, 11%, 19%, 21%, 69%, 71%, 100% {
transform: scaleY(1);
}
10%, 20%, 70% {
transform: scaleY(0);
}
}
:root {
--black: #8f3632;
--white: #fff;
--primary-color: #ff9441;
--primary-color-dark: #dd814b;
--primary-color-tint: #ffc562;
--secondary-color: #697f31;
--secondary-color-tint: #98b847;
--tertiary-color: #ebd24c;
--tertiary-color-dark: #d3b35a;
--tertiary-color-tint: #fcf691;
--accent-color: #e63900;
--background: #ebd5f6;
--background-shadow: #d8ade3;
--pumpkin-inside-color: var(--black);
--darkness-color: #753f8e;
--stroke-width: 0.3125rem;
--transition-dur: 0.5s;
--flip: 1;
}
* {
box-sizing: border-box;
}
html {
font-size: 14px;
}
body {
display: grid;
place-items: center;
height: 100vh;
background-color: var(--background);
line-height: 1;
}
.pumpkin {
display: grid;
place-items: center;
position: relative;
cursor: pointer;
}
.pumpkin *,
.pumpkin *::before,
.pumpkin *::after {
position: absolute;
transition: background-color var(--transition-dur);
}
.pumpkin::after {
content: "";
position: absolute;
bottom: -1rem;
height: 3rem;
width: 70%;
border-radius: 100%;
background-color: var(--background-shadow);
transition: background-color var(--transition-dur);
}
.pumpkin-ear {
border-top-left-radius: 50% 80%;
border-top-right-radius: 50% 80%;
border-bottom-right-radius: 50% 20%;
border-bottom-left-radius: 50% 20%;
--ear-position-x: 2.75rem;
--ear-tip-position-x: -1.5rem;
z-index: 4;
bottom: calc(100% - 4rem);
height: 10rem;
width: 5.5rem;
transform-origin: center bottom;
transform: rotate(calc(40deg * var(--flip)));
background-color: var(--primary-color);
overflow: hidden;
}
.pumpkin-ear::before {
content: "";
top: -0.5rem;
left: var(--ear-tip-left);
right: var(--ear-tip-right);
height: 4rem;
width: 140%;
transform: rotate(calc(20deg * var(--flip)));
border-radius: 100%;
border: var(--stroke-width) solid var(--black);
transition: border-color var(--transition-dur);
}
.pumpkin-ear-left {
--flip: -1;
--ear-tip-left: var(--ear-tip-position-x);
left: var(--ear-position-x);
}
.pumpkin-ear-right {
--ear-tip-right: var(--ear-tip-position-x);
right: var(--ear-position-x);
}
.pumpkin-eye {
--eye-position-x: 4.5em;
--eye-inner-position-x: 0.375em;
--eye-light-position-x: 35%;
--eye-br-bottom-y: 40%;
top: 0;
height: 3.5em;
width: 3.25em;
}
.pumpkin-eye::before {
content: "";
z-index: 5;
top: 0;
left: var(--eye-inner-left);
right: var(--eye-inner-right);
height: 1.5em;
width: 1.5em;
border-radius: 100%;
background-color: var(--primary-color);
}
.pumpkin-eye-inner {
height: 100%;
width: 100%;
transform: translateZ(0);
border-top-left-radius: 50% 60%;
border-top-right-radius: 50% 60%;
border-bottom-left-radius: var(--eye-br-bottom-left);
border-bottom-right-radius: var(--eye-br-bottom-right);
box-shadow: var(--eye-box-shadow);
background-color: var(--pumpkin-inside-color);
overflow: hidden;
}
.pumpkin-eye-inner::before, .pumpkin-eye-inner::after {
content: "";
bottom: -6em;
left: var(--eye-light-left);
right: var(--eye-light-right);
height: 300%;
width: 300%;
border-radius: 100%;
opacity: var(--eye-light-opacity, 0);
transition: opacity var(--transition-dur);
}
.pumpkin-eye-inner::before {
transform: scale(1.1);
background-color: var(--tertiary-color);
-webkit-animation: var(--pumpkin-light-animation);
animation: var(--pumpkin-light-animation);
}
.pumpkin-eye-inner::after {
transform: scale(0.9);
background-color: var(--tertiary-color-tint);
-webkit-animation: var(--pumpkin-light-inner-animation);
animation: var(--pumpkin-light-inner-animation);
}
.pumpkin-eye-left {
--eye-inner-right: var(--eye-inner-position-x);
--eye-br-bottom-left: 55% var(--eye-br-bottom-y);
--eye-br-bottom-right: 45% var(--eye-br-bottom-y);
--eye-box-shadow: inset var(--stroke-width) calc(var(--stroke-width) * -1) var(--primary-color-tint);
--eye-light-left: var(--eye-light-position-x);
left: var(--eye-position-x);
}
.pumpkin-eye-right {
--eye-inner-left: var(--eye-inner-position-x);
--eye-br-bottom-left: 45% var(--eye-br-bottom-y);
--eye-br-bottom-right: 55% var(--eye-br-bottom-y);
--eye-box-shadow: inset calc(var(--stroke-width) * -1) calc(var(--stroke-width) * -1) var(--primary-color-tint);
--eye-light-right: var(--eye-light-position-x);
right: var(--eye-position-x);
}
.pumpkin-nose {
border-top-left-radius: 50% 30%;
border-top-right-radius: 50% 30%;
border-bottom-right-radius: 50% 70%;
border-bottom-left-radius: 50% 70%;
top: 2.5em;
left: 50%;
height: 0.5em;
width: 0.75em;
transform: translateX(-50%);
background-color: var(--black);
}
.pumpkin-mouth {
top: 3.5em;
left: 50%;
height: 0.625em;
width: 4.75em;
transform: translateX(-50%);
overflow: hidden;
}
.pumpkin-mouth::before, .pumpkin-mouth::after {
content: "";
bottom: 0;
height: 200%;
width: calc(50% - var(--stroke-width) * 2);
border-radius: 100%;
border: var(--stroke-width) solid var(--black);
transition: border-color var(--transition-dur);
}
.pumpkin-mouth::before {
left: calc(50% - var(--stroke-width) / 2);
border-right: 0;
}
.pumpkin-mouth::after {
right: calc(50% - var(--stroke-width) / 2);
border-left: 0;
}
.pumpkin-cheek {
--cheek-position-x: 2rem;
--cheek-light-position-x: 117%;
top: 2.5rem;
height: 3.75rem;
width: 3rem;
transform: rotate(calc(15deg * var(--flip)));
border-radius: 100%;
background-color: var(--pumpkin-inside-color);
overflow: hidden;
}
.pumpkin-cheek::before {
content: "";
left: var(--cheek-light-left);
right: var(--cheek-light-right);
top: -1.75em;
height: 280%;
width: 320%;
border-radius: 100%;
background-color: var(--tertiary-color);
opacity: var(--cheek-light-opacity, 0);
transition: opacity var(--transition-dur);
-webkit-animation: var(--pumpkin-light-animation);
animation: var(--pumpkin-light-animation);
}
.pumpkin-cheek-left {
--flip: -1;
--cheek-light-left: var(--cheek-light-position-x);
left: var(--cheek-position-x);
box-shadow: inset var(--stroke-width) calc(var(--stroke-width) * -1) var(--primary-color-tint);
}
.pumpkin-cheek-right {
--cheek-light-right: var(--cheek-light-position-x);
right: var(--cheek-position-x);
box-shadow: inset calc(var(--stroke-width) * -1) calc(var(--stroke-width) * -1) var(--primary-color-tint);
}
.pumpkin-face {
z-index: 5;
width: 100%;
top: 8rem;
}
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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