css+svg实现制作生日快乐蛋糕动画效果代码
代码语言：html
所属分类：动画
代码描述：css+svg实现制作生日快乐蛋糕动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
@import url(http://fonts.googleapis.com/css?family=Lato:300italic);
html,
body {
width: 100%;
height: 100%;
}
body {
background: #ee9ca7;
}
#cake {
display: block;
position: relative;
margin: -10em auto 0 auto;
}
/* ============================================== Candle
*/
.velas {
background: #ffffff;
border-radius: 10px;
position: absolute;
top: 228px;
left: 50%;
margin-left: -2.5px;
margin-top: -8.33333333px;
width: 5px;
height: 35px;
-webkit-transform: translateY(-300px);
-ms-transform: translateY(-300px);
transform: translateY(-300px);
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-animation: in 500ms 6s ease-out forwards;
animation: in 500ms 6s ease-out forwards;
}
.velas:after,
.velas:before {
background: rgba(255, 0, 0, 0.4);
content: "";
position: absolute;
width: 100%;
height: 2.22222222px;
}
.velas:after {
top: 25%;
left: 0;
}
.velas:before {
top: 45%;
left: 0;
}
/* ============================================== Fire
*/
.fuego {
border-radius: 100%;
position: absolute;
top: -20px;
left: 50%;
margin-left: -2.2px;
width: 6.66666667px;
height: 18px;
}
.fuego:nth-child(1) {
-webkit-animation: fuego 2s 6.5s infinite;
animation: fuego 2s 6.5s infinite;
}
.fuego:nth-child(2) {
-webkit-animation: fuego 1.5s 6.5s infinite;
animation: fuego 1.5s 6.5s infinite;
}
.fuego:nth-child(3) {
-webkit-animation: fuego 1s 6.5s infinite;
animation: fuego 1s 6.5s infinite;
}
.fuego:nth-child(4) {
-webkit-animation: fuego 0.5s 6.5s infinite;
animation: fuego 0.5s 6.5s infinite;
}
.fuego:nth-child(5) {
-webkit-animation: fuego 0.2s 6.5s infinite;
animation: fuego 0.2s 6.5s infinite;
}
/* ============================================== Animation Fire
*/
@-webkit-keyframes fuego {
0%, 100% {
background: rgba(254, 248, 97, 0.5);
-webkit-box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2);
box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2);
-webkit-transform: translateY(0) scale(1);
transform: translateY(0) scale(1);
}
50% {
background: rgba(255, 50, 0, 0.1);
-webkit-box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2);
box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2);
-webkit-transform: translateY(-20px) scale(0);
transform: translateY(-20px) scale(0);
}
}
@keyframes fuego {
0%, 100% {
background: rgba(254, 248, 97, 0.5);
-webkit-box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2);
box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2);
-webkit-transform: translateY(0) scale(1);
transform: translateY(0) scale(1);
}
50% {
background: rgba(255, 50, 0, 0.1);
-webkit-box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2);
box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2);
-webkit-transform: translateY(-20px) scale(0);
transform: translateY(-20px) scale(0);
}
}
@-webkit-keyframes in {
to {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes in {
to {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
.text {
color: #8b6a60;
font-family: 'Lato', sans-serif;
font-weight: 300;
font-style: italic;
text-align: center;
}
.text h1 {
font-size: 1.4em;
}
</style>
</head>
<body>
<div class="velas">
<div class="fuego"></div>
<div class="fuego"></div>
<div class="fuego"></div>
<div class="fuego"></div>
<div class="fuego"></div>
</div>
<svg id="cake" version="1.1" x="0px" y="0px" width="200px" height="500px" viewBox="0 0 200 500" enable-background="new 0 0 200 500" xml:space="preserve">
<path fill="#a88679" d="M173.667-13.94c-49.298,0-102.782,0-147.334,0c-3.999,0-4-16.002,0-16.002
c44.697,0,96.586,0,147.334,0C177.667-29.942,177.668-13.94,173.667-13.94z">
<animate id="bizcocho_3" attributeName="d" calcMode="spline" keySplines="0 0 1 1; 0 0 1 1" begin="relleno_2.end" dur="0.3s" fill="freeze" values="
M173.667-13.94c-49.298,0-102.782,0-147.334,0c-3.999,0-4-16.002,0-16.002
c44.697,0,96.586,0,147.334,0C177.667-29.942,177.668-13.94,173.667-13.94z
;
M173.667,411.567c-47.995,12.408-102.955,12.561-147.334,0
c-3.848-1.089-0.189-16.089,3.661-15.002c44.836,12.66,90.519,12.753,139.427,0.07
C173.293,395.631,177.541,410.566,173.667,411.567z
;
M173.667,427.569c-49.795,0-101.101,0-147.334,0c-3.999,0-4-16.002,0-16.002
c46.385,0,97.539,0,147.334,0C177.668,411.567,177.667,427.569,173.667,427.569z
" />
</path>
<path fill="#8b6a60" d="M100-178.521c1.858,0,3.364,1.506,3.364,3.363c0,0,0,33.17,0,44.227
c0,19.144,0,57.431,0,76.574c0,10.152,0,40.607,0,40.607c0,1.858-1.506,3.364-3.364,3.364l0,0c-1.858,0-3.364-1.506-3.364-3.364c0,0,0-30.455,0-40.607c0-19.144,0-57.432,0-76.575c0-11.057,0-44.226,0-44.226C96.636-177.015,98.142-178.521,100-178.521
L100-178.521z">
<animate id="relleno_2" attributeName="d" calcMode="spline" keySplines="0 0 1 1; 0 0 1 1; 0 0 0.58 1" begin="bizcocho_2.end" dur="0.5s" fill="freeze" values="
M100-178.521c1.858,0,3.364,1.506,3.364,3.363c0,0,0,33.17,0,44.227
c0,19.144,0,57.431,0,76.574c0,10.152,0,40.607,0,40.607c0,1.858-1.506,3.364-3.364,3.364l0,0c-1.858,0-3.364-1.506-3.364-3.364c0,0,0-30.455,0-40.607c0-19.144,0-57.432,0-76.575c0-11.057,0-44.226,0-44.226C96.636-177.015,98.142-178.521,100-178.521
L100-178.521z
;
M100,267.257c1.858,0,3.364,1.506,3.364,3.363c0,0,0,33.17,0,44.227
c0,19.143,0,57.43,0,76.574c0,10.151,0,40.606,0,40.606c0,1.858-1.506,3.364-3.364,3.364l0,0c-1.858,0-3.364-1.506-3.364-3.364
c0,0,0-30.455,0-40.606c0-19.145,0-57.432,0-76.576c0-11.057,0-44.225,0-44.225C96.636,268.763,98.142,267.257,100,267.257
L100,267.257z
;
M93.928,405.433c-0.655,6.444-0.102,9.067,2.957,11.798c0,0,8.083,5.571,16.828,3.503
c18.629-4.406,43.813,6.194,50.792,7.791c14.75,3.375,9.162,6.867,9.162,6.867c-2.412,2.258-58.328,0-73.667,0l0,0
c-1.858,0-69.995,2.133-73.667,0c0,0-3.337-2.439,6.172-5.992c11.375-4.25,52.875,8.822,47.139-9.442
c-6.333-20.167,5.226-21.514,5.226-21.514c3.435-0.915,12.78-6.663,10.923-0.546L93.928,405.433z
;
M102.242,427.569c5.348,0,14.079,0,17.462,0c0,0,17.026,0,27.504,0
c19.143,0,20.39-3.797,26.459,0c3,1.877,0,7.823,0,7.823c-2.412,2.258-58.328,0-73.667,0l0,0c-1.858,0-67.187,0-73.667,0
c0,0-4.125-4.983,0-7.823c5.201-3.58,16.085,0,23.725,0c8.841,0,20.762,0,20.762,0c3.686,0,8.597,0,19.511,0H102.242z
" />
</path>
<path fill="#a88679" d="M173.667-15.929c-46.512,0-105.486,0-147.334,0c-3.999,0-4-16.002,0-16.002
c43.566,0,97.96,0,147.334,0C177.667-31.931,177.666-15.929,173.667-15.929z">
<animate id="bizcocho_2" attributeName="d" calcMode="spline" keySplines="0 0 1 1; 0 0 1 1; 0.25 0 0.58 1" begin="relleno_1.end" dur="0.5s" fill="freeze" values="
M173.667-15.929c-46.512,0-105.486,0-147.334,0c-3.999,0-4-16.002,0-16.002
c43.566,0,97.96,0,147.334,0C177.667-31.931,177.666-15.929,173.667-15.929z
;
M173.434,445.393c-47.269,8.001-105.245,8.001-147.334,0c-3.929-0.747-0.692-16.543,3.243-15.824
c43.828,8.001,92.165,8.001,140.739,0C174.029,428.918,177.377,444.726,173.434,445.393z
;
M173.667,449.514c-47.576-5.454-102.799-5.744-147.333,0c-3.966,0.512-3.938-15.297,0-16.002
c43.683-7.823,97.646-8.026,147.333,0C177.616,434.15,177.642,449.969,173.667,449.514z
;
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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