css-doodle实现九种盘中美食动画效果代码
代码语言：html
所属分类：动画
代码描述：css-doodle实现九种盘中美食动画效果代码
代码标签： css-doodle 九种 盘中 美食 动画
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
* {
box-sizing: border-box;
margin: 0;
}
html,
body {
margin: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background-color: #F1E8E1;
}
main {
position: relative;
background-color: #F1E8E1;
width: 100vmin;
height: 100vmin;
--gap: 4vmin;
--size: 28vmin;
overflow: hidden;
}
section {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--gap);
padding: var(--gap);
width: 100%;
height: 100%;
}
css-doodle {
width: var(--size);
height: var(--size);
border-radius: 100%;
-webkit-animation: rotate 40s linear infinite;
animation: rotate 40s linear infinite;
}
@-webkit-keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
</head>
<body translate="no">
<style>
css-doodle {
--1: (
:doodle {
flex: none;
@grid: 1x30;
background: #FF4C00;
overflow: hidden;
}
@place-cell: center;
::before, ::after { transition: inherit; }
@match (i >= 2) {
z-index: @p(2, 3, 4);
transition: 0.5s ease all;
}
@nth(1) {
@size: 80%;
background: radial-gradient(circle at 50% 50%, #fff calc(58% - 0.1vmin), #E386B3 calc(58% - 0.1vmin + 1px), #E386B3 calc(58% + 0.1vmin), #fff calc(58% + 0.1vmin + 1px));
border-radius: 100%;
}
@match(i >= 2 && i <= 7) {
@size: calc(3.2vmin * 1.4);
transform: translate(@m2(@r(±160%))) rotate(@r(360deg));
background-image: @doodle(
@grid: 1x6 / 100% 100%;;
@size: 10% 20%;
position: absolute;
top: 29%;
left: 45%;
background-color: #d5f2d6;
border-radius: 100%;
transform: rotate(calc(60deg * (@i + 1))) translate3d(0%, -40%, 0);
transform-origin: 50% 100%;
);
background-color: #74c58d;
border: 0.28vmin solid #006c61;
border-radius: 100%;
}
@match(i > 7 && i <= 12) {
@size: 7vmin;
z-index: @p(3, 4);
transform: translate(@m2(@r(±90%))) rotate(@r(360deg));
background: radial-gradient(circle at 50% 50%, @stripe(transparent 60%, #fff));
border: 0.28vmin solid #b24478;
clip-path: inset(0 50% 0 0);
border-radius: 100%;
}
@match(i > 12 && i <= 17) {
@size: calc(3.1vmin * 1.3) calc(3.3vmin * 1.3);
transform: translate(@m2(@r(±180%))) rotate(@r(360deg));
background-color: #ff4c00;
border-radius: 100%;
::before, ::after {
content: "";
position: absolute;
top: 10%;
left: calc(0.4vmin * 1.3);
width: calc(2.3vmin * 1.3);
height: calc(2.3vmin * 1.3);
background-image: @doodle(
@grid: 1x3 / 100% 100%;;
@size: 12% 22%;
position: absolute;
top: 25%;
left: 45%;
background-color: #fce8e5;
border-radius: 100%;
transform: rotate(calc(60deg * (@i + 1) + 180deg)) translate3d(0%, -60%, 0);
transform-origin: 50% 100%;
);
background-color: #ffa788;
border-radius: 100%;
clip-path: inset(0 0 50% 0);
}
::after {
top: 19%;
transform: rotate(180deg);
}
}
@match(i > 17 && i <= 27) {
z-index: @p(1, 2);
transform: translate(@m2(@r(±80%))) rotate(@r(360deg));
@size: calc(6vmin * 1.2) calc(6vmin * 1.2);
background-image: @doodle(
@grid: 1x9 / 100% 100%;
@size: 100% 100%;
:container {
--color: @p(#006c61, #2d996e, #74c58d);
--color-1: @P;
}
position: absolute;
@nth(1, 2, 3, 4, 5) {
@size: 40%;
background: @var(--color);
border-radius: 100%;
}
@nth(1) {
top: 0;
left: 50%;
transform: translateX(-50%);
}
@nth(2) {
top: 28%;
left: 15%;
}
@nth(3) {
top: 28%;
right: 15%;
}
@nth(4) {
top: 56%;
right: 5%;
}
@nth(5) {
top: 56%;
left: 5%;
}
@nth(6) {
top: 50%;
left: 50%;
@size: 40% 46%;
transform: translateX(-50%);
background: @var(--color);
}
@nth(7) {
@size: 0;
left: 50%;
bottom: 4%;
transform: translateX(-50%);
border-style: solid;
border-width: 0 8vmin 75vmin;
border-color: transparent transparent @var(--color-1) transparent;
}
@nth(8, 9) {
@size: 0;
border-style: solid;
border-width: 0 7vmin 35vmin;
border-color: transparent transparent @var(--color-1) transparent;
}
@nth(8) {
left: 57%;
bottom: 32%;
transform: rotate(50deg);
}
@nth(9) {
right: 57%;
bottom: 16%;
transform: rotate(-50deg);
}
);
}
@match(i > 27 && i < 34) {
z-index: 10;
@size: 1.4vmin;
transform: translate(@m2(@r(±400%))) rotate(@r(360deg));
background: #fff;
}
);
--2: (
:doodle {
flex: none;
@grid: 1x42;
background: #FFa788;
overflow: hidden;
}
@place-cell: center;
::before, ::after { transition: inherit; }
@match (i >= 4) {
transition: 0.5s ease all;
}
@nth(1) {
@size: 80%;
background: #545150;
border-radius: 100%;
::after {
content: "";
@size: 100% 100%;
@place-cell: center;
background: #f2e7e1;
clip-path: @shape(
points: 360;
r: 0.85 + cos(50t)*.015;
)
}
}
@nth(2, 3) {
position: absolute;
@size: 10% 10%;
background: #545150;
::before, ::after {
content: "";
@size: 100% 100%;
background: #545150;
border-radius: 20%;
}
::before {
@place-cell: 0% 50%;
transform: skew(-20deg);
}
::after {
@place-cell: 100% 50%;
transform: skew(20deg);
}
}
@nth(2) {
@place-cell: 21% 21%;
transform: rotate(-45deg);
}
@nth(3) {
@place-cell: 79% 79%;
transform: rotate(135deg);
}
@match(i > 3 && i < 23) {
@size: 2vmin 1vmin;
background: #fff;
transform: translate(@m2(@r(±7vmin))) rotate(@r(360deg));
border-radius: 100%;
}
@nth(24, 25, 26) {
z-index: 1;
@size: 12% 6%;
--color-1: @p(#d5c7b8, #b1a79e);
--color-2: @P;
@place-cell: @pd(32% 32%, 42% 26%, 26% 42%);
transform: rotate(@r(360deg));
::before {
content: "";
@size: 0;
@place-cell: center -100%;
transform: translateX(-50%);
border-style: solid;
border-width: 0 0.65vmin 5vmin;
border-color: transparent transparent @var(--color-1) transparent;
clip-path: inset(50% 0 0 0);
}
::after {
content: "";
position: absolute;
@size: 100% 100%;
border-radius: 50% 50% 0 0/100% 100% 0 0;
background: @var(--color-2);
}
}
@match(i > 26 && i < 30) {
@size: calc(3.2vmin * 1);
transform: @pd(
translate(@r(2vmin, 3vmin), @r(6vmin, 7.5vmin)) rotate(@r(360deg)),
translate(@r(3vmin, 5vmin), @r(4vmin, 6vmin)) rotate(@r(360deg)),
translate(@r(5vmin, 7vmin), @r(2vmin, 3vmin)) rotate(@r(360deg)),
);
background-image: @doodle(
@grid: 1x6 / 100% 100%;;
@size: 10% 20%;
position: absolute;
top: 29%;
left: 45%;
background-color: #d5f2d6;
border-radius: 100%;
transform: rotate(calc(60deg * (@i + 1))) translate3d(0%, -40%, 0);
transform-origin: 50% 100%;
);
background-color: #74c58d;
border: 0.22vmin solid #006c61;
border-radius: 100%;
}
@match(i > 29 && i < 36) {
position: absolute;
top: calc(70% - (@i - 30) * 2.3%);
left: calc(30% + (@i - 30) * 2.3%);
@size: 0.6vmin 7vmin;
background: @pd(#2e996e, #75c58d);
transform: rotate(@r(-40, -50)deg) translateY(@r(±20%));
}
@match(i > 35 && i < 42) {
position: absolute;
top: calc(30% + (@i - 36) * 2.3%);
left: calc(70% - (@i - 36) * 2.3%);
@size: 0.6vmin 7vmin;
background: @pd(#ffa788, #ff4b00);
transform: rotate(@r(-40, -50)deg) translateY(@r(±20%));
}
@nth(42) {
z-index: 1;
@size: 11vmin;
transform: rotate(@r(180deg));
filter: drop-shadow(0 0 1vmin #00000050);
::before {
content: "";
@size: 100%;
@place-cell: center;
background: #fff;
clip-path: @shape(
points: 360;
r: .8 + cos(@p(2,3,4,5)t)*.03;
);
}
::after {
content: "";
@size: @r(28,32)%;
@place-cell: center;
background: #ffd850;
border-radius: 100%;
transform: translate(@m2(@r(±10%)));
}
}
);
--3: (
:doodle {
flex: none;
@grid: 1x9;
background: #ffb700;
overflow: hidden;
}
@place-cell: center;
::before, ::after { transition: inherit; }
@match (i >= 2) {
z-index: @p(2, 3, 4);
transition: 0.5s ease all;
}
@nth(1) {
@size: 82%;
background: radial-gradient(circle at 50% 50%, #fff calc(58% - 0.1vmin), #E386B3 calc(58% - 0.1vmin + 1px), #E386B3 calc(58% + 0.1vmin), #fff calc(58% + 0.1vmin + 1px));
border-radius: 100%;
clip-path: @shape(
points: 360;
r: 0.95 + cos(@p(10,11,12,13,14)t)*.015;
);
transition: 0.5s ease clip-path;
}
@nth(2, 3) {
@size: 45% 2.5vmin;
@place-cell: 50% @pd(20, 30)%;
transform: translate(@r(±20%), @r(±10%)) rotate(@r(±25)deg);
::before {
content: "";
@size: 100%;
background: linear-gradient(transparent calc(50% - 0.1vmin), #000 calc(50% - 0.1vmin + 1px), #000 calc(50% + 0.1vmin), transparent calc(50% + 0.1vmin + 1px));
}
::after {
content: "";
@size: 10vmin 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: @doodle(
@grid: 4x1 / 100% 100%;
background-color: #ff4b00;
border-radius: @pd(20%, 100%);
::before, ::after {
content: "";
@place-cell: @r(20%, 80%) @r(20%, 80%);
@size: 20vmin;
background: #db3b11;
transform: rotate(@r(360deg));
}
);
}
}
@nth(4, 5, 6) {
@size: 5.5vmin;
@place-cell: @pd(
@r(61, 65)% @r(48, 52)%,
@r(74, 78)% @r(48, 52)%,
@r(66, 70)% @r(60, 64)%
);
::before {
content: "";
@size: 100%;
background-image: @m6(radial-gradient(ellipse at 50% 50%, @stripe(#c12701 40%, transparent)));
background-size: 20% 10%;
background-position: @m6(@r(30, 70)% @r(30, 70)%);
background-repeat: no-repeat;
background-color: #db3b11;
clip-path: @shape(
points: 200;
scale: .03;
k: 18;
x: (k+1)*cos(t) - cos((k+1)*t);
y: (k+1)*sin(t) - sin((k+1)*t);
);
}
::after {
content: "";
@size: 100%;
@place-cell: center;
background: @doodle(
@grid: 1x2 / 100% 100%;
@size: 8% 25%;
@place-cell: @r(20%, 80%) @r(20%, 80%);
background: #2e996e;
transform: rotate(@r(360deg));
);
}
}
@nth(7, 8) {
@place-cell: @pd(
80% 64%,
66% 75%
);
transform: rotate(@r(360deg));
@size: 11%;
background: linear-gradient(-45deg, #2e996e calc(50% - 0.15vmin), #252525 calc(50% - 0.15vmin + 1px), #252525 calc(50% + 0.15vmin), #2e996e calc(50% + 0.15vmin + 1px));
border-radius: 100% 0 100% 0;
}
@nth(9) {
@size: 9vmin 13vmin;
background-image: @doodle(
@grid: 16x12 / 100% 100%;
background-color: @p(#ff4b00, #ffb700);
border-radius: 100%;
transform: rotate(@r(360deg)) translate(@r(±10%), @r(±10%));
@random(0.78) {
opacity: 0;
}
);
background-color: #ffd850;
@place-cell: @r(38, 42)% @r(58, 62)%;
transform: rotate(@r(-30, -60)deg);
clip-path: @shape(
points: 200;
scale: .02;
k: 40;
x: (k+1)*cos(t) - cos((k+1)*t);
y: (k+1)*sin(t) - sin((k+1)*t);
);
::before {
content: "";
@size: 100%;
background-image: @doodle(
@grid: 16x12 / 100% 100%;
background-color: #2e996e;
transform: rotate(@r(360deg)) translate(@r(±10%), @r(±10%));
opacity: @p(0, 0, 0, 0, 1);
@random(0.78) {
opacity: 0;
}
);
}
}
);
--4: (
:doodle {
flex: none;
@grid: 1x14;
background: radial-gradient(circle at 50% 50%, #fffaf8 calc(53% - 1px), #d5c7b8 53%, #d5c7b8 56%, #006c61 calc(56% + 1px));
overflow: hidden;
}
@place-cell: center;
transition: 0.5s ease all;
::before, ::after { transition: inherit; }
@nth(1) {
@size: 22%;
@place-cell: 34% 34%;
border: 0.5vmin solid #d5c7b8;
border-radius: 100%;
transform: rotate(@r(360deg));
::before {
content: "";
@size: 100%;
background: linear-gradient(60deg, #db3b11 70%, #000 85%);
border-radius: 100%;
}
::after {
content: "";
@size: 100%;
@place-cell: center;
background: @doodle(
@grid: 6x6 / 100% 100%;
background: #ffa788;
border-radius: 100%;
transform: translate(@m2(@r(±50%)));
@random(0.7) {
opacity: 0;
}
);
border-radius: 100%;
}
}
@nth(2) {
@size: 22%;
@place-cell: 57% 28%;
background-image: @doodle(
@grid: 2x2 / 100% 100%;
background: #d5f2d6;
transform: scale(0.5) rotate(@r(±40deg));
transform-origin: @pn(80% 80%, 0 80%, 100% 50%);
@nth(4) {
opacity: 0;
}
);
background-color: #2e996e;
border: 0.5vmin solid #d5c7b8;
border-radius: 100%;
transform: rotate(@r(360deg));
::after {
content: "";
@size: 100%;
@place-cell: center;
transform: rotate(@r(360deg));
background-image: @doodle(
@grid: 2x2 / 100% 100%;
background: #ff4b00;
transform: scale(0.25) rotate(@r(±40deg));
transform-origin: @pn(80% 80%, 0 80%, 100% 50%);
@nth(4) {
opacity: 0;
}
);
}
}
@nth(3) {
@size: 28%;
@place-cell: 70% 52%;
background-image: @doodle(
@grid: 2x2 / 100% 100%;
background: #ffa788;
transform: rotate(@pn(@r(±40deg), @r(±40deg), @r(90, 130)deg)) scale(0.6, 0.8);
border-radius: @rep(4, @r(30%, 100%));
transform-origin: @pn(80% 80%, 0 80%, 100% 60%);
@nth(4) {
opacity: 0;
}
);
background-color: #ff4b00;
border: 0.7vmin solid #d5c7b8;
border-radius: 100%;
transform: rotate(@r(360deg));
::before {
content: "";
@size: 100%;
@place-cell: center;
transform: rotate(@r(360deg));
background-image: @doodle(
@grid: 2x2 / 100% 100%;
background: @p(#2e996e, #75c58d);
transform: scale(0.3) rotate(@r(±40deg));
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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