HTML和CSS3中的2D、3D结合实现动画效果_第1页
免费预览已结束，剩余6页可下载查看

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、html和css3中的2d、3d结合实现动画效果虽然我们我们在前端工作中，对于2d、3d动画效果普通来说都用不上，基本上都是用js或jq来完成这些动画效果，但是最基础的这些你是否已经遗忘了呢？昨天重温了一下这些东西，随手写了两个小例子一、用法css画个心首先在html中定义一个div，只需要一个p即可，我用法伪元素来画出；/*基于父级定位*/.heartposition:relative;/*用法伪元素画出两个图像,用法图形拼接来造出一个心*/.heart:after,.heart:beforecontent:""position:absolute;top:

2、100px;left:0;right:0;margin:auto;width:50px;height:80px;background:red;/*borde-radius有四个值分离对应四个角，分离对应左上右上右下左下*/border-radius:50px50px00;/*旋转元素，两个一起旋转。等下只需要调动一个即可*/transform:rotate(-45deg);transform-origin:0100%;/*旋转元素使它和before伪元素拼接成一个心*/.heart:afterleft:-100px;transform:rotate(45deg);transform-origi

3、n:100%100%;通过以上代码我们就得到了一个红红火火的心2345截图20180809143249.png二、用法css画一个太极图，并且加上动画使它自动旋转和上面画心形一样我依旧用法的是伪元素来写的先定义一个div，取名为taiji然后再用伪元素且看我是如何把它给造出来，话不多说，挺直上代码taijiposition:relative;width:200px;height:100px;background:white;border-color:black;border-style:solid;border-width:4px4px100px4px;/*变成圆形*/border-radiu

4、s:50%;margin:100pxauto;/*定义动画名称时长匀速无限循环播放*/animation:myfirst4slinearinfinite;taiji:before,taiji:aftercontent:""position:absolute;top:50%;left:0;width:25px;height:25px;background:white;border:38pxsolidblack;border-radius:50%;taiji:afterleft:50%;background:black;border-color:white;/*定义动画*/keyframesmyfirst0%transfor

人人文库> 全部分类> 生活休闲 > 科普知识

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论