纯css实现一个新冠病毒效果
代码语言：html
所属分类：布局界面
代码描述：纯css实现一个新冠病毒效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
html,
body {
margin: 0px;
padding: 0px;
width: 100vw;
height: 100vh;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #080e1e;
background: radial-gradient(circle, rgb(65, 102, 202) -60%, rgba(0, 0, 0, 0.8901960784313725) 75%);
background: -webkit-radial-gradient(circle, rgb(65, 102, 202) -60%, rgba(0, 0, 0, 0.8901960784313725) 75%);
background: -moz-radial-gradient(circle, rgb(65, 102, 202) -60%, rgba(0, 0, 0, 0.8901960784313725) 75%);
background: -o-radial-gradient(circle, rgb(65, 102, 202) -60%, rgba(0, 0, 0, 0.8901960784313725) 75%);
}
#covid-19 {
width: 220px;
height: 220px;
animation-name: float;
animation-duration: 1s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
.shadow {
width: 100px;
height: 10px;
background: #1c1c1c;
border-radius: 70%;
opacity: 1;
filter: blur(3px);
animation-name: animate-shadow;
animation-duration: 1s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
g.evelope {
animation-name: rotate;
transform-origin: 100px 105px;
animation-duration: 2s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
ellipse.left-eyeball,
ellipse.right-eyeball {
animation-name: moveEyeBalls;
transform-origin: 50% 50%;
animation-duration: 3s;
animation-direction: normal;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
.left-eyebrows,
.right-eyebrows {
animation-name: moveEyebrows;
transform-origin: 50% 50%;
animation-duration: 1s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
.mouth {
animation-name: moveMouth;
transform-origin: 50% 50%;
animation-duration: 2s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes moveMouth {
0% {
transform: rotate(0deg);
} 100% {
transform: rotate(12deg);
}
}
@keyframes moveEyebrows {
0% {
transform: translateY(0px);
} 100% {
transform: translateY(-1px);
}
}
@keyframes moveEyeBalls {
0% {
transform: translateX(0px);
} 25% {
transform: translateX(2px);
} 50%{
transform: translateX(-2px);
} 75%{
transform: translateX(-2px);
} 100% {
transform: translateX(0px);
}
}
@keyframes float {
0% {
transform: translateY(0px);
} 100% {
transform: translateY(20px);
}
}
@keyframes animate-shadow {
0% {
transform: scale(1);
} 100% {
transform: scale(1.2);
}
}
@keyframes rotate {
0% {
transform: rotate(0deg);
} 50% {
transform: rotate(4deg);
} 100% {
transform: rotate(0deg);
}
}
</style>
</head>
<body translate="no">
<svg id="covid-19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<g id="body">
<g class="evelope">
<g>
<rect x="103.956" y="57.628" transform="matrix(-0.2015 0.9795 -0.9795 -0.2015 186.9409 -34.9744)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" width="7.543" height="2.175" />
<ellipse transform="matrix(0.9784 0.2068 -0.2068 0.9784 13.3685 -21.4106)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" cx="109.074" cy="53.226" rx="3.557" ry="1.779" />
</g>
<g>
<rect x="120.357" y="64.516" transform="matrix(-0.6423 0.7665 -0.7665 -0.6423 254.1387 12.601)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" width="7.543" height="2.175" />
<ellipse transform="matrix(0.7629 0.6465 -0.6465 0.7629 70.0389 -68.1447)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" cx="127.921" cy="61.411" rx="3.557" ry="1.778" />
</g>
<g>
<rect x="134.108" y="77.591" transform="matrix(-0.8209 0.5711 -0.5711 -0.8209 295.9926 64.5149)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" width="7.541" height="2.175" />
<ellipse transform="matrix(0.5666 0.824 -0.824 0.5666 124.1331 -84.7547)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" cx="142.637" cy="75.628" rx="3.558" ry="1.779" />
</g>
<g>
<rect x="140.875" y="97.239" transform="matrix(-0.9835 0.1808 -0.1808 -0.9835 304.683 168.8848)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" width="7.541" height="2.175" />
<path fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" d="M150.863,101.02c-0.967,0.17-2.029-1.256-2.374-3.192
c-0.346-1.935,0.16-3.643,1.125-3.814c0.97-0.174,2.032,1.256,2.377,3.191C152.335,99.138,151.829,100.848,150.863,101.02z" />
</g>
<g>
<rect x="139.409" y="117.607" transform="matrix(-0.958 -0.2867 0.2867 -0.958 246.3248 273.4525)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" width="7.542" height="2.175" />
<path fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" d="M147.492,123.921c-0.938-0.287-1.235-2.041-0.662-3.922
s1.8-3.172,2.737-2.885c0.942,0.285,1.239,2.043,0.665,3.924C149.659,122.917,148.431,124.208,147.492,123.921z" />
</g>
<g>
<rect x="129.26" y="135.677" transform="matrix(-0.8199 -0.5726 0.5726 -0.8199 163.7922 325.0609)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" width="7.542" height="2.175" />
<path fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" d="M135.486,143.081c-0.8-0.568-0.533-2.326,0.602-3.932
c1.134-1.605,2.703-2.447,3.504-1.881c0.805,0.566,0.536,2.328-0.6,3.934C137.859,142.806,136.288,143.646,135.486,143.081z" />
</g>
<g>
<rect x="109.059" y="148.468" transform="matrix(-0.4482 -0.8939 0.8939 -0.4482 29.7178 317.4522)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" width="7.542" height="2.174" />
<path fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" d="M111.98,156.278c-0.432-0.881,0.64-2.299,2.402-3.17
c1.761-0.873,3.542-0.865,3.977,0.014c0.438,0.883-0.638,2.303-2.401,3.174C114.198,157.167,112.417,157.157,111.98,156.278z" />
</g>
<g>
<rect x="87.73" y="149.962" transform="matrix(0.062 -0.9981 0.9981 0.062 -64.927 233.0152)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" width="7.542" height="2.174" />
<path fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" d="M87.387,156.435c0.07-0.98,1.708-1.666,3.67-1.533
c1.96,0.131,3.496,1.033,3.431,2.012c-0.066,0.982-1.71,1.67-3.672,1.535C88.856,158.317,87.322,157.413,87.387,156.435z" />
</g>
<g>
<rect x="69.332" y="143.727" transform="matrix(0.6362 -0.7716 0.7716 0.6362 -85.1344 109.094)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" width="7.544" height="2.173" />
<path fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" d="M66.61,146.757c0.631-0.75,2.361-0.346,3.871,0.914
c1.509,1.258,2.223,2.891,1.596,3.645c-0.63,0.756-2.365,0.348-3.875-0.914C66.694,149.146,65.983,147.513,66.61,146.757z" />
</g>
<g>
<rect x="55.152" y="129.772" transform="matrix(0.8659 -0.5001 0.5001 0.8659 -57.5493 47.0135)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" width="7.545" height="2.173" />
<path fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" d="M52.162,130.407c0.854-0.482,2.333,0.502,3.306,2.211
c0.973,1.705,1.071,3.484,0.219,3.971c-0.854,0.486-2.337-0.502-3.31-2.211C51.404,132.671,51.31,130.896,52.162,130.407z" />
</g>
<g>
<rect x="48.102" y="110.994" transform="matrix(0.9957 -0.0924 0.0924 0.9957 -10.1365 5.2739)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" width="7.544" height="2.173" />
<path fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" d="M45.919,108.843c0.978-0.082,1.91,1.432,2.079,3.391
c0.171,1.957-0.484,3.613-1.461,3.699c-0.979,0.086-1.913-1.434-2.082-3.393C44.285,110.583,44.941,108.931,45.919,108.843z" />
</g>
<g>
<rect x="49.077" y="89.789" transform="matrix(0.9512 0.3087 -0.3087 0.9512 30.6372 -11.8766)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" width="7.544" height="2.174" />
<path fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" d="M48.66,85.549c0.93,0.312,1.188,2.07,0.568,3.936
c-0.617,1.865-1.873,3.129-2.804,2.82c-0.934-0.309-1.191-2.072-0.571-3.938C46.47,86.501,47.727,85.244,48.66,85.549z" />
</g>
<g>
<rect x="61.05" y="70.169" transform="matrix(0.7939 0.608 -0.608 0.7939 56.6806 -24.7286)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" width="7.544" height="2.175" />
<path fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" d="M62.648,64.837c0.772,0.604,0.429,2.348-0.776,3.9
c-1.203,1.553-2.809,2.325-3.583,1.725c-0.777-0.603-0.432-2.351,0.774-3.904C60.266,65.006,61.87,64.238,62.648,64.837z" />
</g>
<g>
<rect x="78.954" y="59.388" transform="matrix(0.3117 0.9502 -0.9502 0.3117 114.4062 -36.9789)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" width="7.545" height="2.176" />
<path fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" d="M84.56,53.952c0.296,0.936-0.973,2.18-2.844,2.78
c-1.87,0.602-3.631,0.331-3.932-0.602c-0.301-0.937,0.973-2.184,2.845-2.783C82.5,52.746,84.257,53.017,84.56,53.952z" />
</g>
</g>
<g class="head">
<ellipse class="circle" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" cx="98.358" cy="104.591" rx="43.131" ry="42.906" />
<g class="face">
<ellipse class="left-eye" fill="#FFFFFF" cx="87.792" cy="109.901" rx="7.745" ry="6.936" />
<ellipse class="left-eyeball" fill="#1E1E1E" cx="87.759" cy="108.753" rx="3.092" ry="2.938" />
<path class="left-eyebrows" fill="#1E1E1E" d="M68.29,101.559c0,0,0.179-0.059,0.516-0.17c0.321-0.084,0.815-0.262,1.388-0.393
c0.582-0.15,1.263-0.295,2.018-0.434c0.754-0.139,1.574-0.25,2.439-0.35c0.86-0.086,1.762-0.145,2.679-0.176
c0.913-0.016,1.846-0.021,2.764,0.033c0.468,0.004,0.914,0.051,1.371,0.094c0.455,0.021,0.905,0.063,1.345,0.121
c0.874,0.094,1.732,0.24,2.516,0.357c0.805,0.152,1.502,0.273,2.156,0.449c0.151,0.031,0.292,0.045,0.441,0.088
c0.151,0.051,0.299,0.102,0.411,0.127l0.375,0.115c0.104,0.025,0.195,0.08,0.301,0.125c0.25,0.123,0.303,0.141,0.515,0.298
c0.091,0.1,0.279,0.223,0.378,0.342c0.293,0.277,0.605,0.457,1.13,0.49c0.249-0.012,0.479-0.086,0.781-0.148
c0.27-0.111,0.504-0.264,0.793-0.406c0.526-0.324,0.986-0.747,1.425-1.106c0.371-0.387,0.757-0.725,0.98-0.965
c0.257-0.248,0.394-0.378,0.394-0.378l0.799-0.031c0,0,0.018,0.552,0.047,1.517c-0.036,0.482-0.055,1.081-0.178,1.759
c-0.08,0.338-0.156,0.701-0.257,1.082c-0.15,0.367-0.308,0.756-0.5,1.15c-0.458,0.748-1.039,1.564-1.9,2.133
c-0.397,0.338-0.883,0.529-1.353,0.785c-0.493,0.172-1,0.391-1.53,0.475c-1.055,0.266-2.151,0.293-3.252,0.307
c-1.095-0.043-2.204-0.127-3.285-0.318c-2.167-0.383-4.262-0.99-6.182-1.654c-1.923-0.66-3.653-1.432-5.126-2.1
c-1.473-0.672-2.651-1.33-3.481-1.777c-0.822-0.467-1.292-0.734-1.292-0.734L68.29,101.559z" />
<ellipse class="right-eye" transform="matrix(0.991 -0.1339 0.1339 0.991 -13.3992 15.699)" fill="#FFFFFF" cx="109.983" cy="107.439" rx="9.661" ry="8.517" />
<ellipse class="right-eyeball" transform="matrix(0.991 -0.1339 0.1339 0.991 -13.0728 15.5171)" fill="#1E1E1E" cx="108.849" cy="104.968" rx="4.333" ry="4.238" />
<path class="right-eyebrows" fill="#1E1E1E" d="M97.595,97.325c0,0,0.046,0.017,0.131,0.034c0.082,0.019,0.219,0.037,0.369,0.081
c0.298,0.085,0.786,0.168,1.308,0.285c0.534,0.109,1.15,0.228,1.797,0.321c0.643,0.099,1.324,0.162,1.975,0.177
c0.643,0.029,1.271-0.035,1.798-0.139c0.525-0.086,0.962-0.274,1.308-0.442c0.175-0.09,0.335-0.18,0.481-0.242
c0.162-0.117,0..........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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