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

资源网站搜索大全https://55wd.com

那么将由一个旋转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{
% {transform: rotate(0deg);}
%{transform: rotate(90deg);}
%{transform: rotate(0deg);}
}
@-webkit-keyframes an2{
% {transform: rotate(0deg);}
%{transform: rotate(-90deg);}
%{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 100px; /* 绘制半圆,采用只绘制左上角,左下角的方法,因此需要将宽度设置为高度的一半*/
transform: rotate(0deg);
transform-origin: % %;/* 这个很重要,需要设置旋转中心,默认旋转中心是元素的中间,但是我们绘制的是半圆,因此旋转中心应该是 100%宽度,50%高度*/
background-color: yellow;
-webkit-animation: an1 1s infinite linear;
} .pie{
position: absolute;
width: 100px;
height: 200px;
transform: rotate(0deg);
transform-origin: % %;
border-radius: 100px 100px;
background-color: yellow;
-webkit-animation: an2 1s infinite linear;
} /**动画*/
@-webkit-keyframes an1{
% {transform: rotate(0deg);}
%{transform: rotate(90deg);}
%{transform: rotate(0deg);}
} @-webkit-keyframes an2{
% {transform: rotate(0deg);}
%{transform: rotate(-90deg);}
%{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 = ;
var ctx = document.getElementById("ctx"); setInterval(function () {
left+=;
if(left>){
left=;
}
ctx.style.left=left+"px";
},);
</script>

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

大厂前端工程师教你如何使用css3绘制任意角度扇形+动画的更多相关文章

  1. 来自BAT大厂前端工程师的自白-怎么才能学好前端

    如果说理解学好web前端是先能找到一份工作,那么你应该这样做: 1.制定好一下系统的web前端学习规划,每天定量,学完什么知识点就掌握,能自己应用,而不是能看懂,写不出来东西. 2.不要自己一个人闷头 ...

  2. 分享9款用HTML5/CSS3制作的动物人物动画

    1.纯CSS3绘制可爱的蚱蜢 还有眨眼动画 今天我们要分享一个利用纯CSS3绘制的蚱蜢动画,非常可爱. 在线演示 源码下载 2.HTML5 Canvas头发飘逸动画 很酷的HTML5动画 HTML5 ...

  3. 7款纯CSS3实现的炫酷动画应用

    1.纯CSS3实现人物摇头动画 这次我们要来分享一款超级可爱的纯CSS3人物摇头动画,初始化的时候人物的各个部位是利用CSS3动画效果拼接而成,接下来就是人物听音乐的场景,一边听音乐一边摇着脑袋,十分 ...

  4. web前端工程师面试技巧 常见问题解答

    web前端工程师面试技巧 常见问题解答 每年的春招是各企业需求人才的黄金时期,不少的前端大牛或者前端新手在面试时候不知道怎么来回答面试官的问题,下面来看下我转载的这篇文章吧,希望对从事前端工作的你有所 ...

  5. (转)国内外优秀的Web前端工程师

    1. 国内外优秀的Web前端工程师 寻找Github.微博.知乎等技术社区上比较活跃.影响力大的圈内大神,供大家膜拜! 视野所限,未必全面,欢迎大家推荐.自荐. 排名不分先后,序号只为标记方便. 提供 ...

  6. 15分钟带你了解前端工程师必知的javascript设计模式(附详细思维导图和源码)

    15分钟带你了解前端工程师必知的javascript设计模式(附详细思维导图和源码) 前言 设计模式是一个程序员进阶高级的必备技巧,也是评判一个工程师工作经验和能力的试金石.设计模式是程序员多年工作经 ...

  7. 前端工程师手中的Sublime Text

    原文地址:http://css-tricks.com/sublime-text-front-end-developers/ 我的Blog:http://cabbit.me/sublime-text-f ...

  8. Web前端工程师成长之路——知识汇总

    一.何为Web前端工程师?          前端工程师,也叫Web前端开发工程师.他是随着web发展,细分出来的行业.Web前端开发工程师,主要职责是利用(X)HTML/CSS/JavaScript ...

  9. web前端工程师校园招聘要求

    小燕子对紫薇说:“这辈子也别想着进皇宫了”.可后来她们不但进了宫,还都当上了格格.你在想什么?走呗! 1.去哪了网 前端开发工程师 工作地点:北京 工作职责: 负责去哪儿网各产品线Web前端研发: 负 ...

随机推荐

  1. java实现扑克牌移动

    /* 下面代码模拟了一套扑克牌(初始排序 A~K,共 13 张)的操作过程. 操作过程是: 手里拿着这套扑克牌,从前面拿一张放在后面,再从前面拿一张放桌子上,再从前面拿一张放在后面,.... 如此循环 ...

  2. java实现第八届蓝桥杯平方十位数

    平方十位数 题目描述 由0~9这10个数字不重复.不遗漏,可以组成很多10位数字. 这其中也有很多恰好是平方数(是某个数的平方). 比如:1026753849,就是其中最小的一个平方数. 请你找出其中 ...

  3. Cordova+ionic+angular 项目从 UIWebView 更换为 WKWebView ,通过IOS审核

    当前 cordova-ios 最新版本 5.1.1 新版本 cordova-ios 将删除 UIWebView 代码中的所有引用.WKWebView 将是 Cordova 的默认 Web 视图.   ...

  4. [leetcode] 股票问题

    参考文章: [1] 团灭 LeetCode 股票买卖问题 [2] Most consistent ways of dealing with the series of stock problems 其 ...

  5. Spring Boot 教程 - Elasticsearch

    1. Elasticsearch简介 Elasticsearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口.Elasticsearc ...

  6. 关于mysql auto-increment

    创建表语句如下mysql> show create table Tautoincrement\G *************************** 1. row ************* ...

  7. ubuntu安装qt步骤(源码)

    1.安装gcc,g++ sudo apt-get install gcc sudo apt-get install g++ 2.解压源码包 tar xvzf qt-xxxx 3.安装xlib库 sud ...

  8. Dedecms 修改当前位置样式

    当前列表页间隔符样式修改 后台-->系统基本参数-->核心设置-->栏目位置的间隔符号 只有二级位置栏目时的间隔符去除 找到include文件中的typelink.class.php ...

  9. Dedecms 目标仿站的学习视频

    目标网站首页的初步仿制(实站仿站)http://vodcdn.video.taobao.com/player/ugc/tb_ugc_bytes_core_player_loader.swf 目标网站首 ...

  10. String 类中常用方法

    序号 方法定义 类型 描述 1 public String(char[] value) 构造 直接将一个字符数组变为一个字符串 2 public String(char[] value,int off ...