html实现圣诞树动效.zip_HTML资源-CSDN文库

共4个文件

html：1个

css：1个

下载：1个

html5

5星 · 超过95%的资源需积分: 5 47 浏览量 2020-12-24 11:02:14 上传评论 9 收藏 58KB ZIP 举报

资源详情

资源评论

资源推荐

收起资源包目录

圣诞树效果.zip （4个子文件）

圣诞树效果_files

snowflake.png 46KB

domtree.js.下载 5KB

domtree.css 4KB

圣诞树效果.html 93KB

<!DOCTYPE html>  <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>css3简洁动感旋转圣诞树效果</title> <link href="./圣诞树效果_files/domtree.css" rel="stylesheet" media="screen"> </head> <body>  <div class="tree" style="width: 500px; height: 600px; top: 100px;"><button style="width: 126.667px; height: 26px; transform: translate3d(250px, 292px, 0px) rotateX(0deg) rotateY(79.5156deg) rotateZ(-7.03293deg);">222</button><input type="radio" style="transform: translate3d(250px, 580px, 0px) rotateX(0deg) rotateY(283.782deg) rotateZ(-13.1236deg);"><input type="checkbox" checked="" style="transform: translate3d(250px, 356px, 0px) rotateX(0deg) rotateY(120.582deg) rotateZ(-12.4424deg);"><select selected="Sretni praznici" style="width: 215.417px; height: 26px; transform: translate3d(250px, 505px, 0px) rotateX(0deg) rotateY(83.5705deg) rotateZ(-2.33195deg);"><option>1111</option><option>222</option><option>God Jul</option><option>Boas Festas</option><option>Mutlu Bayramlar</option><option>Sarbatori Fericite</option><option>Jie Ri Yu Kuai</option><option>Bones Festes</option><option>Tanoshii kurisumasu wo</option><option>Buone Feste</option><option>Happy Holidays</option><option>Ii holide eximnandi</option><option>Frohe Feiertage</option><option>Prettige feestdagen</option><option>Beannachtaí na Féile</option><option>Vesele Praznike</option><option>Selamat Hari Raya</option><option>Sretni praznici</option></select><meter min="0" max="100" value="59" style="width: 222.917px; height: 26px; transform: translate3d(250px, 523px, 0px) rotateX(0deg) rotateY(246.797deg) rotateZ(-10.7437deg);"></meter><input type="checkbox" checked="" style="transform: translate3d(250px, 143px, 0px) rotateX(0deg) rotateY(111.686deg) rotateZ(-14.9024deg);"><meter min="0" max="100" value="91" style="width: 151.667px; height: 26px; transform: translate3d(250px, 352px, 0px) rotateX(0deg) rotateY(250.863deg) rotateZ(-8.26426deg);"></meter><progress style="width: 59.1667px; height: 26px; transform: translate3d(250px, 130px, 0px) rotateX(0deg) rotateY(147.262deg) rotateZ(-12.1975deg);"></progress><input type="checkbox" style="transform: translate3d(250px, 34px, 0px) rotateX(0deg) rotateY(182.427deg) rotateZ(-7.88978deg);"><progress max="100" value="68" style="width: 47.0833px; height: 26px; transform: translate3d(250px, 101px, 0px) rotateX(0deg) rotateY(148.532deg) rotateZ(-0.928524deg);"></progress><input type="radio" style="transform: translate3d(250px, 249px, 0px) rotateX(0deg) rotateY(177.226deg) rotateZ(-2.30536deg);"><progress max="100" value="62" style="width: 40.4167px; height: 26px; transform: translate3d(250px, 85px, 0px) rotateX(0deg) rotateY(171.703deg) rotateZ(-14.8633deg);"></progress><meter min="0" max="100" value="34" style="width: 37.0833px; height: 26px; transform: translate3d(250px, 77px, 0px) rotateX(0deg) rotateY(32.2729deg) rotateZ(-8.82592deg);"></meter><input type="radio" checked="" style="transform: translate3d(250px, 573px, 0px) rotateX(0deg) rotateY(284.396deg) rotateZ(-5.17675deg);"><input type="checkbox" checked="" style="transform: translate3d(250px, 59px, 0px) rotateX(0deg) rotateY(25.4237deg) rotateZ(-13.3232deg);"><button style="width: 204.167px; height: 26px; transform: translate3d(250px, 478px, 0px) rotateX(0deg) rotateY(316.827deg) rotateZ(-0.804481deg);">Beannachtaí na Féile</button><button style="width: 233.75px; height: 26px; transform: translate3d(250px, 549px, 0px) rotateX(0deg) rotateY(319.667deg) rotateZ(-0.832264deg);">Happy Holidays</button><input type="checkbox" checked="" style="transform: translate3d(250px, 7px, 0px) rotateX(0deg) rotateY(176.172deg) rotateZ(-8.53015deg);"><progress max="100" value="68" style="width: 157.917px; height: 26px; transform: translate3d(250px, 367px, 0px) rotateX(0deg) rotateY(45.3706deg) rotateZ(-10.4087deg);"></progress><input type="checkbox" checked="" style="transform: translate3d(250px, 12px, 0px) rotateX(0deg) rotateY(11.5989deg) rotateZ(-13.4789deg);"><input type="radio" checked="" style="transform: translate3d(250px, 219px, 0px) rotateX(0deg) rotateY(191.55deg) rotateZ(-8.60127deg);"><select selected="Beannachtaí na Féile" style="width: 230px; height: 26px; transform: translate3d(250px, 540px, 0px) rotateX(0deg) rotateY(222.615deg) rotateZ(-4.40074deg);"><option>1111</option><option>222</option><option>God Jul</option><option>Boas Festas</option><option>Mutlu Bayramlar</option><option>Sarbatori Fericite</option><option>Jie Ri Yu Kuai</option><option>Bones Festes</option><option>Tanoshii kurisumasu wo</option><option>Buone Feste</option><option>Happy Holidays</option><option>Ii holide eximnandi</option><option>Frohe Feiertage</option><option>Prettige feestdagen</option><option>Beannachtaí na Féile</option><option>Vesele Praznike</option><option>Selamat Hari Raya</option><option>Sretni praznici</option></select><select selected="Frohe Feiertage" style="width: 205.833px; height: 26px; transform: translate3d(250px, 482px, 0px) rotateX(0deg) rotateY(356.225deg) rotateZ(-13.8551deg);"><option>1111</option><option>222</option><option>God Jul</option><option>Boas Festas</option><option>Mutlu Bayramlar</option><option>Sarbatori Fericite</option><option>Jie Ri Yu Kuai</option><option>Bones Festes</option><option>Tanoshii kurisumasu wo</option><option>Buone Feste</option><option>Happy Holidays</option><option>Ii holide eximnandi</option><option>Frohe Feiertage</option><option>Prettige feestdagen</option><option>Beannachtaí na Féile</option><option>Vesele Praznike</option><option>Selamat Hari Raya</option><option>Sretni praznici</option></select><input type="radio" style="transform: translate3d(250px, 548px, 0px) rotateX(0deg) rotateY(337.858deg) rotateZ(-3.72379deg);"><select selected="1111" style="width: 155px; height: 26px; transform: translate3d(250px, 360px, 0px) rotateX(0deg) rotateY(313.059deg) rotateZ(-3.19226deg);"><option>1111</option><option>222</option><option>God Jul</option><option>Boas Festas</option><option>Mutlu Bayramlar</option><option>Sarbatori Fericite</option><option>Jie Ri Yu Kuai</option><option>Bones Festes</option><option>Tanoshii kurisumasu wo</option><option>Buone Feste</option><option>Happy Holidays</option><option>Ii holide eximnandi</option><option>Frohe Feiertage</option><option>Prettige feestdagen</option><option>Beannachtaí na Féile</option><option>Vesele Praznike</option><option>Selamat Hari Raya</option><option>Sretni praznici</option></select><progress style="width: 162.5px; height: 26px; transform: translate3d(250px, 378px, 0px) rotateX(0deg) rotateY(115.181deg) rotateZ(-14.9254deg);"></progress><progress style="width: 200.833px; height: 26px; transform: translate3d(250px, 470px, 0px) rotateX(0deg) rotateY(100.75deg) rotateZ(-13.86deg);"></progress><input type="radio" style="transform: translate3d(250px, 60px, 0px) rotateX(0deg) rotateY(103.705deg) rotateZ(-14.076deg);"><button style="width: 180.417px; height: 26px; transform: translate3d(250px, 421px, 0px) rotateX(0deg) rotateY(203.308deg) rotateZ(-12.9459deg);">God Jul</button><input type="checkbox" style="transform: translate3d(250px, 106px, 0px) rotateX(0deg) rotateY(171.141deg) rotateZ(-2.14859deg);"><meter min="0" max="100" value="89" style="width: 199.167px; height: 26px; transform: translate3d(250px, 466px, 0px) rotateX(0deg) rotateY(179.411deg) rotateZ(-12.9189deg);"></meter><input type="radio" style="transform: translate3d(250px, 598px, 0px) rotateX(0deg) rotateY(97.3321deg) rotateZ(-5.09349deg);"><input type="checkbox" style="transform: translate3d(250px, 519px, 0px) rotateX(0deg) rotateY(193.877deg) rotateZ(-11.332deg);"><button style="width: 187.5px; height: 26px; transform: translate3d(250px, 438px, 0px) rotateX(0deg)