大厂前端工程师教你如何使用css3绘制任意角度扇形+动画
这里只是做下原理解释,原理:使用两个半圆做角度拼接。比如想绘制一个缺口朝右,缺口弧度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绘制任意角度扇形+动画的更多相关文章
- 来自BAT大厂前端工程师的自白-怎么才能学好前端
如果说理解学好web前端是先能找到一份工作,那么你应该这样做: 1.制定好一下系统的web前端学习规划,每天定量,学完什么知识点就掌握,能自己应用,而不是能看懂,写不出来东西. 2.不要自己一个人闷头 ...
- 分享9款用HTML5/CSS3制作的动物人物动画
1.纯CSS3绘制可爱的蚱蜢 还有眨眼动画 今天我们要分享一个利用纯CSS3绘制的蚱蜢动画,非常可爱. 在线演示 源码下载 2.HTML5 Canvas头发飘逸动画 很酷的HTML5动画 HTML5 ...
- 7款纯CSS3实现的炫酷动画应用
1.纯CSS3实现人物摇头动画 这次我们要来分享一款超级可爱的纯CSS3人物摇头动画,初始化的时候人物的各个部位是利用CSS3动画效果拼接而成,接下来就是人物听音乐的场景,一边听音乐一边摇着脑袋,十分 ...
- web前端工程师面试技巧 常见问题解答
web前端工程师面试技巧 常见问题解答 每年的春招是各企业需求人才的黄金时期,不少的前端大牛或者前端新手在面试时候不知道怎么来回答面试官的问题,下面来看下我转载的这篇文章吧,希望对从事前端工作的你有所 ...
- (转)国内外优秀的Web前端工程师
1. 国内外优秀的Web前端工程师 寻找Github.微博.知乎等技术社区上比较活跃.影响力大的圈内大神,供大家膜拜! 视野所限,未必全面,欢迎大家推荐.自荐. 排名不分先后,序号只为标记方便. 提供 ...
- 15分钟带你了解前端工程师必知的javascript设计模式(附详细思维导图和源码)
15分钟带你了解前端工程师必知的javascript设计模式(附详细思维导图和源码) 前言 设计模式是一个程序员进阶高级的必备技巧,也是评判一个工程师工作经验和能力的试金石.设计模式是程序员多年工作经 ...
- 前端工程师手中的Sublime Text
原文地址:http://css-tricks.com/sublime-text-front-end-developers/ 我的Blog:http://cabbit.me/sublime-text-f ...
- Web前端工程师成长之路——知识汇总
一.何为Web前端工程师? 前端工程师,也叫Web前端开发工程师.他是随着web发展,细分出来的行业.Web前端开发工程师,主要职责是利用(X)HTML/CSS/JavaScript ...
- web前端工程师校园招聘要求
小燕子对紫薇说:“这辈子也别想着进皇宫了”.可后来她们不但进了宫,还都当上了格格.你在想什么?走呗! 1.去哪了网 前端开发工程师 工作地点:北京 工作职责: 负责去哪儿网各产品线Web前端研发: 负 ...
随机推荐
- Java实现LeetCode_0041_FirstMissingPositive
package javaLeetCode.hard; import java.util.Arrays; public class FirstMissingPositive_41 { public st ...
- Java实现洛谷 P1428 小鱼比可爱
题目描述 人比人,气死人:鱼比鱼,难死鱼.小鱼最近参加了一个"比可爱"比赛,比的是每只鱼的可爱程度.参赛的鱼被从左到右排成一排,头都朝向左边,然后每只鱼会得到一个整数数值,表示这只 ...
- 洛谷P1255 数楼梯
题目描述 楼梯有N阶,上楼可以一步上一阶,也可以一步上二阶. 编一个程序,计算共有多少种不同的走法. 分析与代码 走n阶楼梯,无论是走一次走1阶还是2阶,总得迈出一步, 所以求n阶楼梯 ...
- mysql基础-数据类型和sql模式-学习之(三)
0x01 mysql的两种方向: 开发DBA:数据库设计(E-R关系图).sql开发.内置函数.存储历程(存储过程和存储函数).触发器.时间调度器(event scheduler) 运维----> ...
- Linux RTC设备驱动
1. 在Linux2.6.29内核中,RTC是以平台设备的方式注册进内核的. ① RTC驱动定义于文件:drivers/rtc/rtc-s3c.c static struct platform_dri ...
- js原型链、继承、this指向等老生常谈却依然不熟的知识点——记录解析
开始记录学习过程—— 很详细的解析过程——https://juejin.im/post/5c72a1766fb9a049ea3993e6 借鉴阅读——https://github.com/KieSun ...
- .net core3.1 abp动态菜单和动态权限(思路) (二)
ps:本文需要先把abp的源码下载一份来下,跟着一起找实现,更容易懂 在abp中,对于权限和菜单使用静态来管理,菜单的加载是在登陆页面的地方(具体是怎么知道的,浏览器按F12,然后去sources中去 ...
- SpringBoot整合分布式ZooKeeper和Dubbo
ZooKeeper ZooKeeper是一个分布式的,开放远吗的分布式应用程序协调服务.它是一个为分布式应用提供一致性服务的软件,提供的功能包括:配置维护.域名服务.分布式同步.组服务等. 服务提供者 ...
- 利用Jackson将数据转换为Json
1.确保相关依赖导入 2.配置web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app ...
- git-bash用法详解
目录 1. 开启Windows的 sshd 服务 1.1. ssh 高级配置 1.1.1. 生成秘钥 1.1.2. 添加或更改密码 1.1.3. 分发公钥 1.1.4. 允许以root身份ssh连接 ...