css-doodle实现的花朵动画-html代码-BFW代码库

css-doodle实现的花朵动画

代码语言：html

所属分类：动画

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title> Unicode Flowers - CSS Doodle</title>

<style>
      html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #333357;
}

    </style>
</head>
<body translate="no">
<css-doodle>
:doodle {
flex: none;
@grid: 1x24;
@size: 100vmin;
}
--transform: scale(@r(.8, 1.2)) translateX(@r(-200%, 200%)) translateY(@r(-5%, 35%));
z-index: 2;
color: @pn(#fff, #8b4480, #f9d51e, #36a47b, #7db13c, #ea695c, #0059b2, #74a9c3);
transform-origin: 50% 100%;
transform: var(--transform);
::before {
position: absolute;
bottom: 38vmin;
left: -2vmin;
content: "✿";
font-size: 15vmin;
-webkit-text-stroke: .4vmin;
}
::after {
position: absolute;
bottom: 0;
left: 0;
content: "(";
font-size: 20vmin;
transform: rotate(60deg) skew(60deg) scale(1.2, 1.8);
}
@random {
::after {
content: ")";
left: 1.7vmin;
bottom: -3vmin;
}
}
@nth(5, 10, 15, 20, 24) {
z-index: 1;
color: #fff;
}
@nth(1, 3, 9, 16, 19) {
::after {
bottom: 0;
left: 0;
content: "(";
}
animation: swingLeft @r(1.5, 3)s ease infinite alternate both;
::before {
animation: beforeLeft @lr()s ease infinite alternate both;
}
}
@nth(5, 7, 15, 18, 23) {
::after {
content: ")";
left: 1.7vmin;
bottom: -3vmin;
}
animation: swing @r(1.5, 3)s ease infinite alternate both;
::before {
animation: before @lr()s ease infinite alternate both;
}
}
@keyframes swingLeft {
0% {
transform: var(--transform) rotate(0deg);
}
100% {
transform: var(--transform) rotate(7deg);
.........完整代码请登录后点击上方下载按钮下载查看