如何使用css3绘制任意角度扇形+动画

更新日期: 2018-04-12阅读: 3.4k标签: 绘制

这里只是做下原理解释,原理:使用两个半圆做角度拼接。比如想绘制一个缺口朝右,缺口弧度30度角的扇形



那么将由一个旋转65度角的半圆A+一个旋转-65度角的半圆B组合而成。代码

<style>
.outer{
position: absolute;
width: 200px;
height: 200px;
transform: rotate(65deg);
clip: rect(0px,100px,200px,0px);/* 这个clip属性用来绘制半圆,在clip的rect范围内的内容显示出来,使用clip属性,元素必须是absolute的 */
border-radius: 100px;
background-color: yellow;
/*-webkit-animation: an1 2s infinite linear;*/
}
.pie{
position: absolute;
width: 200px;
height: 200px;
transform: rotate(-65deg);
clip: rect(0px,100px,200px,0px);
border-radius: 100px;
background-color: yellow;
/*-webkit-animation: an2 2s infinite linear;*/
}
</style>

<div></div>
<div></div>


这样可以绘制0-360任意角度的扇形了。然后,我们要绘制一个会动的扇形,比如这个缺口一开一合,向贪吃蛇一样。css3提供了animation属性,本文只考虑chrome,因此只加了-webkit-animation,需要兼容的同学另行处理。

解开上面两个css中注释掉的部分:-webkit-animation,然后增加如下css:

/**动画*/
@-webkit-keyframes an1{
       0% {transform: rotate(0deg);}
       50%{transform: rotate(90deg);}
       100%{transform: rotate(0deg);}
}
@-webkit-keyframes an2{
       0% {transform: rotate(0deg);}
       50%{transform: rotate(-90deg);}
       100%{transform: rotate(0deg);}
}

这样让A半圆在2秒内从0旋转到90在旋转到0,让B半圆在2秒内从0旋转到-90在旋转到0,刚好完成一次开闭的动作。


上面的半圆是通过clip产生的,假设我的场景是这个扇形的位置是变化的,比如贪吃蛇的场景,那么使用clip就不合适了。下面采取另外一种方法

<style>
.outer{
position: absolute;
width: 100px;
height: 200px;
border-radius: 100px 0 0 100px; /* 绘制半圆,采用只绘制左上角,左下角的方法,因此需要将宽度设置为高度的一半*/
transform: rotate(0deg);
transform-origin: 100% 50%;/* 这个很重要,需要设置旋转中心,默认旋转中心是元素的中间,但是我们绘制的是半圆,因此旋转中心应该是 100%宽度,50%高度*/
background-color: yellow;
-webkit-animation: an1 1s infinite linear;
}

.pie{
position: absolute;
width: 100px;
height: 200px;
transform: rotate(0deg);
transform-origin: 100% 50%;
border-radius: 100px 0 0 100px;
background-color: yellow;
-webkit-animation: an2 1s infinite linear;
}


/**动画*/
@-webkit-keyframes an1{
       0% {transform: rotate(0deg);}
       50%{transform: rotate(90deg);}
       100%{transform: rotate(0deg);}
}


@-webkit-keyframes an2{
       0% {transform: rotate(0deg);}
       50%{transform: rotate(-90deg);}
       100%{transform: rotate(0deg);}
}


.ct{
position: absolute;
width: 200px;
height: 200px;
}


</style>

<div class="ct" id="ctx">
  <div class="outer"></div>
  <div class="pie"></div> 
 </div>

<script type="text/javascript">
 
 var left = 0;
 var ctx = document.getElementById("ctx");


 setInterval(function () {
  left+=10;
  if(left>400){
  left=0;
  }
  ctx.style.left=left+"px";
 },1000);
</script>


效果可以看到,一个会动的圆形在往右边一动,缺口一开一合。

本文参考自:http://jingyan.baidu.com/article/c910274be4dd69cd371d2d48.html


链接: https://www.fly63.com/article/detial/626

css实现自适应正方形的多种方法实现

纯CSS实现自适应浏览器宽度的正方形有以下三种方法:CSS3 vw 单位、设置垂直方向的padding撑开容器、利用伪元素的 margin(padding)-top 撑开容器

纯css如何绘制三角形_利用border实现画三角形的原理方法

使用css画三角形,首先想到的思路是:利用border边框样式来实现,这是由于border的边框是由四个三角形组成的。

使用css3绘制画圆,扇形,三角形的实现

css已经越来越强大了 ,可以使用它来绘制各种简单的形状,用于代替图片显示,这次的分享主要用到画圆,扇形,三角形等知识点,由于IE9以上才支持圆角,暂时不考虑兼容问题

纯 CSS 实现大量小块儿绘制

现在做的项目是公司内部全部组要用的 viewer 库. Viewer 需要的功能非常的多,其中的一个就是需要提供一些常用的绘图API功能, 比如用户鼠标移动画箭头,画圈圈,高光选中文本等等。

我是如何用 CSS 绘制各种形状的

实现方式是通过border-radius这个属性;border-radius它可以单独指定水平和垂直半径。用 / 分隔这两个值。并且该属性的值不仅可以接受长度值,还能接收百分比的值。百分比的值会基于元素的尺寸进行解析,宽是水平半径的解析,高是垂直半径的解析。

css怎么绘制箭头?

在网页制作中,很多时候都会有箭头的情况,我们可以使用css来绘制箭头,css是如何绘制箭头的呢?下面我们来看一下使用css绘制箭头的方法。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!