版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
第JavaScript+CSS实现唯美蝴蝶动画目录演示技术栈源码对部分蝴蝶的设定飞动的设置对蝴蝶形体的设置
演示
技术栈
关于svg标签在svg中关于图形的复用，是通过标签defs来解决的。举个例子：在图形中红色圆圈●还有黄色圆圈●都是复用的元素。结构都是一样的，只是颜色和位置的差别。
关于figure：figure标签规定独立的流内容（图像、图表、照片、代码等等）。
figure元素的内容应该与主内容相关，同时元素的位置相对于主内容是独立的。如果被删除，则不应对文档流产生影响。
关于perspective-origin：perspective-origin属性定义3D元素所基于的X轴和Y轴。该属性允许您改变3D元素的底部位置。
定义时的perspective-Origin属性，它是一个元素的子元素，透视图，而不是元素本身。
perspective-origin:x-axisy-axis;
x-axis
定义该视图在x轴上的位置。默认值：50%。
可能的值：
leftcenterrightlength%y-axis
定义该视图在y轴上的位置。默认值：50%。
可能的值：
topcenterbottomlength%
源码
对部分蝴蝶的设定
section
div
var
figure/figure
figure/figure
figure/figure
figure/figure
figure/figure
figure/figure
/var
/div
div
var
var
var
var
figure
svgviewBox="0050100"
usexlink:href="#shape-butterfly-1"rel="externalnofollow"rel="externalnofollow"/use
/svg
svgviewBox="0050100"
usexlink:href="#shape-butterfly-1"rel="externalnofollow"rel="externalnofollow"/use
/svg
/figure
/var
/var
/var
/var
/div
飞动的设置
@-webkit-keyframesrotating{
0%{
-webkit-transform:rotate3d(0,0,0,0deg);
-moz-transform:rotate3d(0,0,0,0deg);
-ms-transform:rotate3d(0,0,0,0deg);
-o-transform:rotate3d(0,0,0,0deg);
transform:rotate3d(0,0,0,0deg);
100%{
-webkit-transform:rotate3d(0,1,0,720deg);
-moz-transform:rotate3d(0,1,0,720deg);
-ms-transform:rotate3d(0,1,0,720deg);
-o-transform:rotate3d(0,1,0,720deg);
transform:rotate3d(0,1,0,720deg);
@-moz-keyframesrotating{
0%{
-webkit-transform:rotate3d(0,0,0,0deg);
-moz-transform:rotate3d(0,0,0,0deg);
-ms-transform:rotate3d(0,0,0,0deg);
-o-transform:rotate3d(0,0,0,0deg);
transform:rotate3d(0,0,0,0deg);
100%{
-webkit-transform:rotate3d(0,1,0,720deg);
-moz-transform:rotate3d(0,1,0,720deg);
-ms-transform:rotate3d(0,1,0,720deg);
-o-transform:rotate3d(0,1,0,720deg);
transform:rotate3d(0,1,0,720deg);
@-ms-keyframesrotating{
0%{
-webkit-transform:rotate3d(0,0,0,0deg);
-moz-transform:rotate3d(0,0,0,0deg);
-ms-transform:rotate3d(0,0,0,0deg);
-o-transform:rotate3d(0,0,0,0deg);
transform:rotate3d(0,0,0,0deg);
100%{
-webkit-transform:rotate3d(0,1,0,720deg);
-moz-transform:rotate3d(0,1,0,720deg);
-ms-transform:rotate3d(0,1,0,720deg);
-o-transform:rotate3d(0,1,0,720deg);
transform:rotate3d(0,1,0,720deg);
@-o-keyframesrotating{
0%{
-webkit-transform:rotate3d(0,0,0,0deg);
-moz-transform:rotate3d(0,0,0,0deg);
-ms-transform:rotate3d(0,0,0,0deg);
-o-transform:rotate3d(0,0,0,0deg);
transform:rotate3d(0,0,0,0deg);
100%{
-webkit-transform:rotate3d(0,1,0,720deg);
-moz-transform:rotate3d(0,1,0,720deg);
-ms-transform:rotate3d(0,1,0,720deg);
-o-transform:rotate3d(0,1,0,720deg);
transform:rotate3d(0,1,0,720deg);
@keyframesrotating{
0%{
-webkit-transform:rotate3d(0,0,0,0deg);
-moz-transform:rotate3d(0,0,0,0deg);
-ms-transform:rotate3d(0,0,0,0deg);
-o-transform:rotate3d(0,0,0,0deg);
transform:rotate3d(0,0,0,0deg);
100%{
-webkit-transform:rotate3d(0,1,0,720deg);
-moz-transform:rotate3d(0,1,0,720deg);
-ms-transform:rotate3d(0,1,0,720deg);
-o-transform:rotate3d(0,1,0,720deg);
transform:rotate3d(0,1,0,720deg);
@-webkit-keyframesrotatingY{
100%{
-webkit-transform:rotateY(-360deg);
-moz-transform:rotateY(-360deg);
-ms-transform:rotateY(-360deg);
-o-transform:rotateY(-360deg);
transform:rotateY(-360deg);
@-moz-keyframesrotatingY{
100%{
-webkit-transform:rotateY(-360deg);
-moz-transform:rotateY(-360deg);
-ms-transform:rotateY(-360deg);
-o-transform:rotateY(-360deg);
transform:rotateY(-360deg);
@-ms-keyframesrotatingY{
100%{
-webkit-transform:rotateY(-360deg);
-moz-transform:rotateY(-360deg);
-ms-transform:rotateY(-360deg);
-o-transform:rotateY(-360deg);
transform:rotateY(-360deg);
@-o-keyframesrotatingY{
100%{
-webkit-transform:rotateY(-360deg);
-moz-transform:rotateY(-360deg);
-ms-transform:rotateY(-360deg);
-o-transform:rotateY(-360deg);
transform:rotateY(-360deg);
}
对蝴蝶形体的设置
.butterfly_container{
position:absolute;
left:50%;
top:50%;
width:100px;
height:100px;
margin-left:-50px;
margin-top:-50px;
-webkit-transform-origin:50%50%;
-moz-transform-origin:50%50%;
-ms-transform-origin:50%50%;
-o-transform-origin:50%50%;
transform-origin:50%50%;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
transform-style:preserve-3d;
-webkit-animation:rotatingY10slinearinfinite;
-moz-animation:rotatingY10slinearinfinite;
-ms-animation:rotatingY10slinearinfinite;
-o-animation:rotatingY10slinearinfinite;
animation:rotatingY10slinearinfinite;
.butterfly_containervar{
position:absolute;
left:50%;
top:50%;
width:100px;
height:100px;
margin-left:-50px;
margin-top:-50px;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
transform-style:preserve-3d;
.butterfly_containervar.rotate3d{
-webkit-transform:rotate3d(1,0.5,0,70deg);
-moz-transform:rotate3d(1,0.5,0,70deg);
-ms-transform:rotate3d(1,0.5,0,70deg);
-o-transform:rotate3d(1,0.5,0,70deg);
transform:rotate3d(1,0.5,0,70deg);
.butterfly_containervar.translate3d{
-webkit-transform:translate3d(-300px,0px,0px);
-moz-transform:translate3d(-300px,0px,0px);
-ms-transform:translate3d(-300px,0px,0px);
-o-transform:translate3d(-300px,0px,0px);
transform:translate3d(-300px,0px,0px);
.butterfly_containervar.translate3d-1{
-webkit-animation:fluttering10sease-in-outinfinite;
-moz-animation:fluttering10sease-in-outinfinite;
-ms-animation:fluttering10sease-in-outinfinite;
-o-animation:fluttering10sease-in-outinfinite;
animation:fluttering10sease-in-outinfinite;
.butterfly_container.scale_halfvar.scale{
-webkit-transform:scale3d(0.5,0.5,0.5);
-moz-transform:scale3d(0.5,0.5,0.5);
-ms-transform:scale3d(0.5,0.5,0.5);
-o-transform:scale3d(0.5,0.5,0.5);
transform:scale3d(0.5,0.5,0.5);
.butterfly_container.scale_thirdvar.scale{
-webkit-transform:scale3d(0.333,0.333,0.333);
-moz-transform:scale3d(0.333,0.333,0.333);
-ms-transform:scale3d(0.333,0.333,0.333);
-o-transform:scale3d(0.333,0.333,0.333);
transform:scale3d(0.333,0.333,0.333);
.butterfly_container.scale_quartervar.scale{
-webkit-transform:scale3d(0.25,0.25,0.25);
-moz-transform:scale3d(0.25,0.25,0.25);
-ms-transform:scale3d(0.25,0.25,0.25);
-o-transform:scale3d(0.25,0.25,0.25);
transform:scale3d(0.25,0.25,0.25);
.butterfly_containerfigure.butterfly{
position:absolute;
left:50%;
top:50%;
width:100px;
height:100px;
margin-left:-50px;
margin-top:-50px;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
transform-style:preserve-3d;
-webkit-transform-origin:50%50%;
-moz-transform-origin:50%50%;
-ms-transform-origin:50%50%;
-
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2025年软件设计师考试应对措施及试题及答案
- 行政法学人才培养的方向及问题试题及答案
- 信息处理技术真正重要考点试题及答案
- 网络安全审计的实施策略试题及答案
- 行政法学形势变化试题及答案
- 软件测试流程与工具试题及答案
- 网络环境与管理模式的风险试题及答案
- 跨界创新在经济转型中的作用研究试题及答案
- 公司生产工作计划推动生产检验标准化与检验员培训
- 高考作文世代传承的试题与答案
- DL∕T 2006-2019 干式空心电抗器匝间绝过电压试验设备技术规范
- 风对起飞和着陆影响及修正和风切变完整版课件
- 粮食平房仓设计规范课件
- 物质创造普遍秩序中文版
- 国家级高技能人才培训基地建设项目申请书
- 高校在完善国防动员机制中的作用与实现路径
- 化工原理习题(谭天恩)解答上
- 库欣综合征英文教学课件cushingsyndrome
- 聚酯合成的酯化与缩聚课件
- 交管12123驾驶证学法减分题库与答案（通用版）
- EHS监测测量控制程序
评论
0/150
提交评论