【CSS3——简单的饼图】
<div class="pie" style="animation-delay:-20s;"></div>
<div class="pie" style="animation-delay:-60s;"></div>
@keyframes spin{
to{transform: rotate(.5turn);}
}
@keyframes bg{
50%{background:#655}
}
.pie{
width:100px;
height:100px;
border-radius: 50%;
background:yellowgreen;
background-image: linear-gradient(to right, transparent 50%, #655 0%);
}
.pie::before{
content:'';
display: block;
margin-left:50%;
height: 100%;
/*outline: 1px dashed white;*/
/*重叠右半部分*/
background-color: inherit;
border-radius: 0 100% 100% 0 / 50%;
transform-origin: left;
/*使重叠部分转起来*/
transform: rotate(.8turn);
animation: spin 50s linear infinite,
bg 100s step-end infinite;
animation-play-state: paused;
animation-delay: inherit;
}
【SVG】
越来越多的公众号在图文消息中加入了SVG动画交互效果，今天我也来了最简单的效果吧。
文字动效
* {
margin: 0;
padding: 0;
box-sizing: border-box!important;
word-wrap: break-word!important;
}
html, body {
height: 100%;
}
body {
padding: 0 15px;
font-family: 'Microsoft Yahei', 'helvetica neue', helvetica, sans-serif;
}
</style>
<section style="margin:0px auto;max-width:360px;text-align:center;overflow:hidden;">
<svg viewBox="0 0 1080 620" width="100%" height="620px" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
<g>
<animate attributeName="opacity" begin="0s" dur="1s" values="1;0;1" repeatCount="indefinite"></animate>
<text x="340" y="1750" fill="#000" style="font-size:36px">点一下屏幕，有请主角</text>
</g>
</svg>
</section>
viewBox="x,y,w,h"
x,y控制SVG内所有元素的相对位置，不影响SVG的背景图
w,h控制SVG宽高，是SVG的内分辨率，不是SVG元素的dom尺寸
w、h越大，svg内的元素越小，反之，元素则越大
建议viewBox的x、y值设置为0，w、h设置为背景图的尺寸
preserveAspectRatio属性用来设置viewBox的缩放和对齐方式，xMinYMin meet的意思是根据视口的宽高进行等比例缩放，这里的视口是width和height值组成的矩形区域
attributeName 为动画控制的属性，这里为opacity透明度
begin为动画开始时间（延迟时间），0s表示立即开始动画，也可以是分号分隔的一组值，例如begin="3s;5s"表示的是3s之后动画开始，6s时候动画再重新开始（如果之前动画没走完，会立即停止从头开始）
dur为动画时间，dur越小，动画越快
values表示attributeName指定属性的值变化,可以是一个值，也可以是用分号分隔的多个值，这里的"1;0;1"表示“不透明->透明->不透明”，即闪烁效果。
repeatCount，表示动画重复次数，indefinite=无数次
网友评论