<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>超酷的SVG+CSS3山水画+睡美人图</title>
<style>
body {
background: #333;
font-family: 'Oswald', sans-serif;
}
h1 {
position: absolute;
width: 100%;
text-align: center;
margin-top: 40px;
font-size: 35px;
color: #5c6e55;
opacity: 0.7;
}
h2 {
position: absolute;
width: 80%;
left: 10%;
text-align: center;
margin-top: 5px;
font-size: 18px;
letter-spacing: -0.01em;
color: #4b5a46;
opacity: 0.7;
display: none;
}
.main {
width: 85%;
position: absolute;
left: 7.5%;
}
.keyboard {
display: none;
}
#innerflower,
#balburst polygon {
opacity: 0;
}
.st0 {
fill: #b3c3ad;
opacity: 0.8;
-webkit-transform: translateY(10px);
-ms-transform: translateY(10px);
transform: translateY(10px);
}
.st1 {
opacity: 0.34;
fill: #b9e3ca;
}
.st2 {
opacity: 0.34;
fill: #c18aa0;
stroke: #b9e3ca;
stroke-miterlimit: 10;
}
.st3 {
opacity: 0.34;
fill: #934654;
}
.st4 {
opacity: 0.34;
fill: #9f5c7b;
}
.st5 {
opacity: 0.34;
fill: #ae8fa8;
stroke: #a2ddd7;
stroke-miterlimit: 10;
}
.st6 {
opacity: 0.34;
fill: #934654;
stroke: #4fdbca;
stroke-width: 2;
stroke-miterlimit: 10;
}
.st7 {
opacity: 0.26;
fill: #3ba89b;
}
.st8 {
opacity: 0.34;
fill: #a83759;
}
.st9 {
opacity: 0.34;
fill: #a83759;
stroke: #4fdbca;
stroke-miterlimit: 10;
}
.st10 {
opacity: 0.34;
fill: #8d7b98;
}
.st11 {
opacity: 0.43;
fill: #69d0c4;
}
.st12 {
opacity: 0.67;
fill: #69d0c4;
}
.st13 {
opacity: 0.29;
fill: #69d0c4;
}
.st14 {
fill: url(#SVGID_1_);
}
.st15 {
opacity: 0.26;
fill: url(#SVGID_2_);
}
.st16 {
opacity: 0.13;
fill: #8d7b98;
}
.st17 {
fill: #b9e3ca;
}
.st18 {
opacity: 0.2;
fill: #3ba89b;
}
.st19 {
fill: #69d0c4;
}
.st20 {
opacity: 0.35;
fill: url(#SVGID_3_);
}
.st21 {
opacity: 0.35;
fill: url(#SVGID_4_);
-webkit-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}
.st22 {
opacity: 0.7;
fill: #69d0c4;
}
.st23 {
fill: #a83759;
}
.st24 {
fill: none;
stroke: #543934;
stroke-miterlimit: 10;
}
.st25 {
fill: #21887e;
}
.st26 {
opacity: 0.52;
}
.st27 {
fill: #3ba89b;
}
.st28 {
opacity: 0.96;
fill: url(#SVGID_5_);
}
.st29 {
opacity: 0.96;
fill: url(#SVGID_6_);
}
.st30 {
opacity: 0.16;
}
.st31 {
fill: #e8e6e4;
}
.st32 {
opacity: 0.7;
}
.st33 {
fill: #fff;
}
.st34 {
fill: #259386;
}
.st35 {
fill: url(#grass-shadow_1_);
}
.st36 {
fill: #1b6b61;
}
.st37 {
fill: #1e776c;
}
.st39 {
display: inline;
fill: none;
stroke: #21887e;
stroke-width: 10;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st40 {
display: inline;
fill: none;
stroke: #b9e3ca;
stroke-width: 10;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st41 {
display: inline;
fill: none;
stroke: #c18aa0;
stroke-width: 10;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st42 {
display: inline;
fill: none;
stroke: #a83759;
stroke-width: 10;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st43 {
fill: url(#r-wing_4_);
}
.st44 {
fill: url(#l-wing_4_);
}
.st45 {
fill: url(#r-wing_5_);
}
.st46 {
fill: url(#l-wing_5_);
}
.st47 {
fill: url(#r-wing_6_);
}
.st48 {
fill: url(#l-wing_6_);
}
.st49 {
fill: url(#r-wing_7_);
}
.st50 {
fill: url(#l-wing_7_);
}
.st51 {
opacity: 0.79;
}
.st52 {
opacity: 0.7;
stroke: #60c6b7;
fill: none;
}
.st53 {
fill: #60c6b7;
}
.st54 {
fill: #9dd1b6;
}
.st55 {
fill: #d0efdc;
}
.st56 {
opacity: 0.41;
fill: none;
stroke: #69d0c4;
stroke-miterlimit: 10;
}
.st57 {
fill: none;
stroke: #69d0c4;
stroke-miterlimit: 10;
}
.st58 {
fill: #bcbfb4;
}
.st59 {
fill: #a3645b;
}
.st60 {
opacity: 0.75;
fill: #ba8a7b;
}
.st61 {
fill: #ce795b;
}
.st62 {
fill: #b16d67;
}
.st63 {
fill: #1f7a6f;
}
.st64 {
fill: #ce795b;
}
.st65 {
fill: #a3645b;
}
.st68 {
opacity: 0.27;
fill: #f9f9f9;
enable-background: new;
}
.st66 {
opacity: 0.73;
fill: none;
stroke: #f9f9f9;
stroke-width: 0.75;
stroke-miterlimit: 10;
enable-background: new;
}
.st67 {
fill: #dd4563;
}
.kst0 {
fill: #fff;
}
.kst1 {
fill: #8e2f6c;
}
.kst2 {
fill: #a83759;
}
.kst3 {
fill: #ce6f80;
}
.kst4 {
fill: #bdb9b4;
}
.kst5 {
fill: #9ca396;
}
.kst6 {
fill: #69d0c4;
}
.kst7 {
fill: #3ba89b;
}
.kst8 {
fill: #21887e;
}
#yawn {
-webkit-transform: translateX(-115px);
-ms-transform: translateX(-115px);
transform: translateX(-115px);
opacity: 0;
}
#lightning path,
#tongue-flick {
visibility: hidden;
}
#lightning path,
#lightning,
#backflower {
fill: none;
}
@media screen and (max-device-width: 900px) {
h1 {
display: none;
}
.keyboard,
h2 {
display: block;
}
}
</style>
</head>
<body>
<script src="js/jquery-1.11.1.min.js"></script>
<div class="block">
<svg class="main" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="50 0 1170 950">
<g id="mountains">
<path class="st0" d="M-24 0.8H1263.1V405.8H-24z" />
<path class="st1" d="M342 249.8L417 234.8 531.1 291.8 576.1 228.8 675.1 279.8 693.1 255.8 768.1 267.8 957.1 372.8 1083.1 426.8 15 417.8z" />
<path class="st2" d="M139.2 273.8L315 237.8 399 258.8 462 243.8 540.1 261.8 606.1 249.8 657.1 288.8 693.1 303.8 750.1 372.8 780.1 411.8 102 423.8z" />
<path class="st1" d="M177 279.8L327 252.8 369 282.8 417 234.8 507.1 285.8 567.1 258.8 657.1 288.8 732.1 408.8 180 417.8z" />
<path class="st3" d="M1245.1 264.8L1131.1 207.8 1098.1 174.8 1062.1 183.8 1004.2 201 986.7 180.5 935.7 188.3 888.9 230 828.9 283.7 764.2 277.7 645 300.8 696.1 411.8 1251.1 414.8z" />
<path class="st4" d="M1242.1 327.8L1119.1 285.8 1020.1 333.8 927.1 282.8 822.1 261.8 780.1 327.8 717.3 349.9 669.1 366.8 606.1 339.8 600.1 408.8 1251.1 414.8z" />
<path class="st5" d="M621.1 315.8L513.1 369.8 432 357.8 417 381.8 375 345.8 318 330.8 303 366.8 267 378.8 258 426.8 678.1 408.8z" />
<path class="st6" d="M-8.9 237.9L81.1 300.9 123 273.8 180 342.8 225 324.8 270 366.8 315 358.4 369 422 42.2 422 -15 424.3z" />
<path class="st7" d="M77.2 307L120.5 267 145.2 307z" />
<path class="st8" d="M922.2 251L912.2 299 970.2 271z" />
<path class="st9" d="M224.2 357L190.2 419 294.2 421z" />
<path class="st8" d="M900.2 335L850.2 411 944.2 413zM584.2 411L674.2 385 722.2 411z" />
<path class="st10" d="M184.2 239L178.2 305 222.2 279zM982.2 317L972.2 357 1020.1 333.8zM630.2 341L616.2 399 664.2 387zM306.2 335L272.2 423 338.2 421zM688.2 339L684.2 395 722.2 411zM60.2 341L26.2 421 102 423.8z" />
<path class="st1" d="M864.2 247L838.2 281 884.2 281zM222.2 269L188.2 311 260.2 307zM658.2 345L648.2 391 664.2 387zM372.2 379L369 421 446.2 419zM1098.2 275L1068.2 305 1102.2 289zM212.2 221L228.2 253 280.2 243z" />
TweenMax.js+css3 svg实现的响应式山水画 睡美人图动画效果源码.zip
版权申诉
193 浏览量
2022-11-01
00:09:03
上传
评论
收藏 98KB ZIP 举报
TweenMax.js+css3 svg实现的响应式山水画 睡美人图动画效果源码.zip （5个子文件） 
132686883658015741 
index.html 78KB js 
jquery-1.11.1.min.js 94KB DrawSVGPlugin.min.js 8KB ion.sound.min.js 13KB TweenMax.min.js 105KB资源评论
