CSS制作简单图标
CSS制作图标包括知识点如border-width、border-style、border-color、border-radius、对元素的定位拼接、旋转等结合起来。
图标效果如下（拖动滑块可缩放图标）：
缩放字体比例后如图：
test-css图标.css 文件对颜色做了处理（由于伪类:before/:after没办法设置其边框颜色.....）：
.icon-ok-green{
position:absolute;
width:1em;
height:.3em;
background-color:rgba(144,200,65,1);
transform:rotate(50deg);
transform-origin:right center;
border-radius:.15em;
left:0em;
bottom:0.15em;
}
.icon-ok-green:after{
content:"";
position:absolute;
top:.1em;
left:-.6em;
width:1.5em;
height:.3em;
background-color:rgba(144,200,65,1);
transform: rotate(70deg);
transform-origin: right center;
border-radius: .15em;
}
.icon-ok-red{
position:absolute;
width:1em;
height:.3em;
background-color:rgba(241,32,45,1);
transform:rotate(50deg);
transform-origin:right center;
border-radius:.15em;
left:0em;
bottom:0.15em;
}
.icon-ok-red:after{
content:"";
position:absolute;
top:.1em;
left:-.6em;
width:1.5em;
height:.3em;
background-color:rgba(241,32,45,1);
transform: rotate(70deg);
transform-origin: right center;
border-radius: .15em;
}
.icon-ok-warning{
position:absolute;
width:1em;
height:.3em;
background-color:rgba(234,152,39,1);
transform:rotate(50deg);
transform-origin:right center;
border-radius:.15em;
left:0em;
bottom:0.15em;
}
.icon-ok-warning:after{
content:"";
position:absolute;
top:.1em;
left:-.6em;
width:1.5em;
height:.3em;
background-color:rgba(234,152,39,1);
transform: rotate(70deg);
transform-origin: right center;
border-radius: .15em;
}
.icon-ok-blue{
position:absolute;
width:1em;
height:.3em;
background-color:rgba(43,150,255,1);
transform:rotate(50deg);
transform-origin:right center;
border-radius:.15em;
left:0em;
bottom:0.15em;
}
.icon-ok-blue:after{
content:"";
position:absolute;
top:.1em;
left:-.6em;
width:1.5em;
height:.3em;
background-color:rgba(43,150,255,1);
transform: rotate(70deg);
transform-origin: right center;
border-radius: .15em;
}
.icon-ok-gray{
position:absolute;
width:1em;
height:.3em;
background-color:rgba(138,132,132,1);
transform:rotate(50deg);
transform-origin:right center;
border-radius:.15em;
left:0em;
bottom:0.15em;
}
.icon-ok-gray:after{
content:"";
position:absolute;
top:.1em;
left:-.6em;
width:1.5em;
height:.3em;
background-color:rgba(138,132,132,1);
transform: rotate(70deg);
transform-origin: right center;
border-radius: .15em;
}
多说无益
源码贴放在此：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="test-css图标.css">
<style>
body{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;
margin:;padding:;font-size:150%;/*10 ÷ 16 × 100% = 62.5%*/
font-family:"Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo,
"Droid Sans","wenquanyi micro hei","Hiragino Sans GB", "Hiragino Sans GB W3", Arial, sans-serif;}
.icon-block{display:inline-block;position:relative;margin:0 2px;width:2em;height:2em;}
.block-color-default{background: #e0e0e0;}
.block-radius-default{border-radius:.15em;}
.icon-block:hover{opacity:0.6;filter:Alpha(opacity=60);cursor:pointer;}
.icon-ok{
position:absolute;
width:1em;
height:.3em;
background-color:#000;
transform:rotate(50deg);
transform-origin:right center;
border-radius:.15em;
left:0em;
bottom:0.15em;
}
.icon-ok:after{
content:"";
position:absolute;
top:.1em;
left:-.6em;
width:1.5em;
height:.3em;
background-color: #000;
transform: rotate(70deg);
transform-origin: right center;
border-radius: .15em;
}
.icon-no{
position:relative;
width:1.6em;
height:.3em;
background-color:#000;
transform:rotate(45deg);
border-radius:.15em;
left:0.15em;
bottom:-.85em;
}
.icon-no:after{
content:"";
position:absolute;
width:1.6em;
height:.3em;
background-color: #000;
transform: rotate(90deg);
border-radius: .15em;
}
.icon-menu {
box-sizing: border-box;
position: relative;
width: 2em;
height: 2em;
background-color: transparent;
border-radius: .3em;
}
.icon-menu:before {
box-sizing: border-box;
content: "";
position: absolute;
top:;
right:;
bottom:;
left:;
margin: auto;
width: 1.3em;
height: .2em;
background-color: #000;
}
.icon-menu:after {
box-sizing: border-box;
content: "";
position: absolute;
top:;/*top=0;right=0;bottom=0;left=0;margin=auto;实现垂直、水平居中*/
right:;
bottom:;
left:;
margin: auto;
width: 1.3em;
height: 1.1em;
border-width: .22em;/*边框宽度*/
border-style: solid none;/*上下边框是solid 左右无边框*/
border-color: #000;/*边框颜色*/
}
.icon-menu2 {
box-sizing: border-box;
position: relative;
width: .4em;
height: .4em;
background-color: #000;
border-radius: 50%;
bottom:-.7em;
left:.74em;
}
.icon-menu2:before {
box-sizing: border-box;
content: "";
position: absolute;
top:;
left: -.58em;
width: .4em;
height: .4em;
background-color: #000;
border-radius: 50%;
}
.icon-menu2:after {
box-sizing: border-box;
content: "";
position: absolute;
top:;
left: .56em;
width: .4em;
height: .4em;
background-color: #000;
border-radius: 50%;
}
.icon-top {
box-sizing: border-box;
position: relative;
width:;
height:;
border-right: .6em solid transparent;
border-bottom: .6em solid #000;
border-left: .6em solid transparent;
left:.4em;
bottom:-.18em;
}
.icon-top:after {
content: "";
position: absolute;
left: 50%;
top: .6em;
margin-left: -.3em;
width: .6em;
height: 1em;
background-color: #000;
}
.icon-right {
box-sizing: border-box;
position: relative;
width: 1em;
height: .6em;
background-color: #000;
bottom:-.65em;
left:.2em;
}
.icon-right:after {
content: "";
position: absolute;
top: 50%;
left: 1em;
margin-top: -.6em;
width:;
height:;
border-top: .6em solid transparent;
border-bottom: .6em solid transparent;
border-left: .6em solid #000;
}
.icon-bottom {
box-sizing: border-box;
position: relative;
width: .6em;
height: 1em;
background-color: #000;
left:.65em;
bottom:-.18em;
}
.icon-bottom:after {
content: "";
position: absolute;
left: 50%;
top: 1em;
margin-left: -.6em;
width:;
height:;
border-right: .6em solid transparent;
border-top: .6em solid #000;
border-left: .6em solid transparent;
}
.icon-left {
box-sizing: border-box;
position: relative;
width:;
height:;
border-top: .6em solid transparent;
border-right: .6em solid #000;
border-bottom: .6em solid transparent;
bottom:-.5em;
left:.2em;
}
.icon-left:after {
content: "";
position: absolute;
top:;
bottom:; /*在绝对定位中，top: 0; bottom: 0; margin: auto; 结合使用能竖直居中*/
left: .6em;
margin: auto;
width: 1em;
height: .6em;
background-color: #000;
}
.icon-download {
box-sizing: border-box;
position: relative;
width: 1.4em;
height: .8em;
border-width: .25em;
border-style: none solid solid;
border-color: #000;
bottom:-1em;
left:.2em;
}
.icon-download:before {
content: "";
position: absolute;
right:;
bottom: .5em;
left:;
margin: auto;
width: .3em;
height: .8em;
background-color: #000;
}
.icon-download:after {
content: "";
position: absolute;
right:;
bottom: .2em;
left:;
margin: auto;
width:;
height:;
border-right: .4em solid transparent;
border-top: .4em solid #000;
border-left: .4em solid transparent;
}
.icon-upload {
box-sizing: border-box;
position: relative;
width: 1.4em;
height: .8em;
border-width: .25em;
border-style: none solid solid;
border-color: #000;
bottom:-1em;
left:.2em;
}
.icon-upload:before {
content: "";
position: absolute;
right:;
bottom: .3em;
left:;
margin: auto;
width: .3em;
height: .6em;
background-color: #000;
}
.icon-upload:after {
content: "";
position: absolute;
right:;
bottom: .9em;
left:;
margin: auto;
width:;
height:;
border-right: .4em solid transparent;
border-bottom: .4em solid #000;
border-left: .4em solid transparent;
}
.icon-video {
box-sizing: border-box;
position: relative;
width: 1.2em;
height: .9em;
background-color: #000;
border-radius: .18em;
bottom:-.55em;
left:.25em;
}
.icon-video:after {
content: "";
position: absolute;
top: 50%;
left: 1.1em;
margin-top: -.5em;
width:;
height:;
border-top: .5em solid transparent;
border-right: .4em solid #000;
border-bottom: .5em solid transparent;
}
.icon-voice {
box-sizing: border-box;
position: relative;
width: 1em;
height: .7em;
border-width: .1em;
border-style: none none solid;/*只有下边框*/
border-color: #000;
border-radius: 50%;
bottom:-.65em;
left:.5em;
}
.icon-voice:before {
content: "";
position: absolute;
right:;
left:;
bottom: .08em;
margin: auto;
width: .6em;
height: 1em;
background-color: #000;
border-radius: .4em;
}
.icon-voice:after {
content: "";
position: absolute;
right:;
bottom: -.48em;
left:;
margin: auto;
width:;
height:;
border-right: .5em solid transparent;
border-bottom: .4em solid #000;
border-left: .5em solid transparent;
}
.icon-play {
box-sizing: border-box;
position: relative;
width: 1.6em;
height: 1.6em;
border: .2em solid #000;
border-radius: 50%;
bottom:-.25em;
left:.2em;
}
.icon-play:after {
content: "";
position: absolute;
top:;
bottom:;
left: 50%;
margin-top: auto;
margin-bottom: auto;
margin-left: -.2em;
width:;
height:;
border-top: .4em solid transparent;
border-bottom: .4em solid transparent;
border-left: .6em solid #000;
}
.icon-pause {
box-sizing: border-box;
position: relative;
width: 1.6em;
height: 1.6em;
border: .2em solid #000;
border-radius: 50%;
bottom:-.25em;
left:.2em;
}
.icon-pause:before {
box-sizing: border-box;
content: "";
position: absolute;
top:;
bottom:;
left: 50%;
margin-top: auto;
margin-bottom: auto;
margin-left: -.35em;
width: .2em;
height: .7em;
background-color: #000;
}
.icon-pause:after {
box-sizing: border-box;
content: "";
position: absolute;
top:;
bottom:;
left: 50%;
margin-top: auto;
margin-bottom: auto;
margin-left: .15em;
width: .2em;
height: .7em;
background-color: #000;
}
.icon-previous {
box-sizing: border-box;
position: relative;
width: 1.6em;
height: 1.6em;
border: .2em solid #000;
border-radius: 50%;
bottom:-.25em;
left:.2em;
}
.icon-previous:before {
box-sizing: border-box;
content: "";
position: absolute;
top:;
bottom:;
left: 50%;
margin-top: auto;
margin-bottom: auto;
margin-left: -.55em;
width:;
height:;
border-top: .4em solid transparent;
border-bottom: .4em solid transparent;
border-right: .5em solid #000;
}
.icon-previous:after {
box-sizing: border-box;
content: "";
position: absolute;
top:;
bottom:;
left: 50%;
margin-top: auto;
margin-bottom: auto;
margin-left: -.15em;
width:;
height:;
border-top: .4em solid transparent;
border-bottom: .4em solid transparent;
border-right: .5em solid #000;
}
.icon-next {
box-sizing: border-box;
position: relative;
width: 1.6em;
height: 1.6em;
border: .2em solid #000;
border-radius: 50%;
bottom:-.25em;
left:.2em;
}
.icon-next:before {
box-sizing: border-box;
content: "";
position: absolute;
top:;
bottom:;
left: 50%;
margin-top: auto;
margin-bottom: auto;
margin-left:-.01em;
width:;
height:;
border-top: .4em solid transparent;
border-bottom: .4em solid transparent;
border-left: .5em solid #000;
}
.icon-next:after {
box-sizing: border-box;
content: "";
position: absolute;
top:;
bottom:;
left: 50%;
margin-top: auto;
margin-bottom: auto;
margin-left: -.35em;
width:;
height:;
border-top: .4em solid transparent;
border-bottom: .4em solid transparent;
border-left: .5em solid #000;
}
.icon-stop {
box-sizing: border-box;
position: relative;
width: 1.6em;
height: 1.6em;
border: .2em solid #000;
border-radius: 50%;
bottom:-.25em;
left:.2em;
}
.icon-stop:after {
box-sizing: border-box;
content: "";
position: absolute;
top:;
bottom:;
left:;
right:;
margin: auto;
width: .65em;
height: .65em;
background-color: #000;
}
.icon-position {
position: relative;
width: .4em;
height: .4em;
border: .3em solid #000;
border-radius: 50%;
left:.5em;
bottom:-.3em;
}
.icon-position:after {
content: "";
position: absolute;
top: .5em;
left: -.2em;
width:;
height:;
border-top: 0.6em solid #000;
border-right:0.4em solid transparent;
border-left: 0.4em solid transparent;
}
.icon-pc {
box-sizing: border-box;
position: relative;
width: 1.4em;
height: .9em;
border-width: .12em .12em .12em;
border-style: solid;
border-color: #000;
border-radius: .1em;
background-color: #efefef;
left:.25em;
bottom:-.2em;
}
.icon-pc:before {
content: "";
position: absolute;
top: .7em;
right:;
left:;
margin: auto;
width: .4em;
height: .5em;
background-color: #000;
}
.icon-pc:after {
content: "";
position: absolute;
top: 1.2em;
right:;
left:;
margin: auto;
width: 1.2em;
height: .1em;
background-color: #000;
}
.icon-phone {
box-sizing: border-box;
position: relative;
width: 1em;
height: 1.4em;
background-color: #efefef;
border-width: .12em .12em .3em .12em;
border-style: solid;
border-color: #000;
border-radius: .12em;
bottom:-.3em;
left:.48em;
}
.icon-phone:after {
content: "";
position: absolute;
right:;
bottom: -.25em;
left:;
margin: auto;
width: .2em;
height: .2em;
background-color: #fff;
border-radius: .2em;
}
.icon-search {
box-sizing: border-box;
position: relative;
width: .6em;
height: .2em;
background-color: #000;
border-top-right-radius: .15em;
border-bottom-right-radius: .15em;
transform: rotate(40deg);
bottom:-1.2em;
left:1.1em;
}
.icon-search:before {
content: "";
position: absolute;
left: -.85em;
bottom: -.4em;
width: .6em;
height: .6em;
border: .15em solid #000;
border-radius: 50%;
}
.icon-star {
box-sizing: border-box;
position: relative;
width:;
height:;
border-top: .5em solid #000;
border-right: .7em solid transparent;
border-left: .7em solid transparent;
bottom:-.8em;
left:.3em;
}
.icon-star:before {
content: "";
position: absolute;
top: -.5em;
left: -.7em;
width:;
height:;
border-top: .5em solid #000;
border-right: .7em solid transparent;
border-left: .7em solid transparent;
transform: rotate(72deg);
}
.icon-star:after {
content: "";
position: absolute;
top: -.5em;
left: -.65em;
width:;
height:;
border-top: .5em solid #000;
border-right: .7em solid transparent;
border-left: .7em solid transparent;
transform: rotate(-72deg);
}
.icon-email {
box-sizing: border-box;
position: relative;
width:;
height:;
border-width: .5em .7em;
border-style: solid;
border-color: transparent #000 #000 #000;
bottom:-.52em;
left:.28em;
}
.icon-email:after {
content: "";
position: absolute;
top: -.5em;
left: -.7em;
width:;
height:;
border-top: .4em solid #000;
border-right: .7em solid transparent;
border-left: .7em solid transparent;
}
.icon-heart {
position: relative;
width: .8em;
height: 1.2em;
background-color: #000;
border-top-left-radius: 1em;
border-top-right-radius: 1em;
transform: rotate(-45deg);
transform-origin: center bottom;
bottom:-.2em;
left:.9em;
}
.icon-heart:after {
content: "";
position: absolute;
top: -.4em;
left: -.4em;
width: .8em;
height: 1.2em;
background-color: #000;
border-top-left-radius: 1em;
border-top-right-radius: 1em;
transform: rotate(90deg);
transform-origin: center bottom;
}
.icon-password {
box-sizing: border-box;
position: relative;
width: 1.4em;
height: 1em;
background-color: #000;
border-radius: .2em;
bottom:-.7em;
left:.25em;
}
.icon-password:before {
box-sizing: border-box;
content: "";
position: absolute;
top: -.6em;
left: 50%;
margin-left: -.5em;
width: 1em;
height: 1em;
border: .15em solid #000;
border-radius: 50%;
}
.icon-password:after {
box-sizing: border-box;
content: "";
position: absolute;
bottom: .2em;
left: 50%;
margin-left: -.2em;
width: .3em;
height: .5em;
border-top-left-radius: .2em;
border-top-right-radius: .2em;
background-color: #fff;
}
.icon-user {
box-sizing: border-box;
position: relative;
width: .7em;
height: .7em;
background-color: #000;
border-radius: 50%;
bottom:-.2em;
left:.65em;
}
.icon-user:after {
content: "";
position: absolute;
top: .75em;
left: 50%;
margin-left:-.7em;
width: 1.4em;
height: .7em;
background-color: #000;
border-top-left-radius: .9em;
border-top-right-radius: .9em;
}
.icon-home {
box-sizing: border-box;
position: relative;
width: 1.1em;
height: .9em;
background-color: #000;
bottom:-.8em;
left:.5em;
}
.icon-home:before {
content: "";
position: absolute;
top: -.5em;
left: 50%;
margin-left: -.9em;
border-left: .9em solid transparent;
border-right: .9em solid transparent;
border-bottom: .7em solid #000;
}
.icon-home:after {
z-index:;
content: "";
position: absolute;
right:;
bottom:;
left:;
margin: auto;
width: .3em;
height: .45em;
background-color: #fff;
}
</style>
</head>
<body>
<div class="icon-block"><div class="icon-ok"></div></div>
<div class="icon-block"><div class="icon-no"></div></div>
<div class="icon-block"><div class="icon-menu"></div></div>
<div class="icon-block"><div class="icon-menu2"></div></div>
<div class="icon-block"><div class="icon-top"></div></div>
<div class="icon-block"><div class="icon-right"></div></div>
<div class="icon-block"><div class="icon-bottom"></div></div>
<div class="icon-block"><div class="icon-left"></div></div>
<div class="icon-block"><div class="icon-download"></div></div>
<div class="icon-block"><div class="icon-upload"></div></div>
<div class="icon-block"><div class="icon-video"></div></div>
<div class="icon-block"><div class="icon-voice"></div></div>
<div class="icon-block"><div class="icon-play"></div></div>
<div class="icon-block"><div class="icon-pause"></div></div>
<div class="icon-block"><div class="icon-previous"></div></div>
<div class="icon-block"><div class="icon-next"></div></div>
<div class="icon-block"><div class="icon-stop"></div></div>
<div class="icon-block"><div class="icon-position"></div></div>
<div class="icon-block"><div class="icon-pc"></div></div>
<div class="icon-block"><div class="icon-phone"></div></div>
<div class="icon-block"><div class="icon-search"></div></div>
<div class="icon-block"><div class="icon-star"></div></div>
<div class="icon-block"><div class="icon-email"></div></div>
<div class="icon-block"><div class="icon-heart"></div></div>
<div class="icon-block"><div class="icon-password"></div></div>
<div class="icon-block"><div class="icon-user"></div></div>
<div class="icon-block"><div class="icon-home icon-home-blue"></div></div>
<br>
<div class="icon-block"><div class="icon-ok-green"></div></div>
<div class="icon-block"><div class="icon-ok-red"></div></div>
<div class="icon-block block-color-default block-radius-default"><div class="icon-ok-warning"></div></div>
<div class="icon-block block-color-default block-radius-default"><div class="icon-ok-blue"></div></div>
<div class="icon-block block-color-default block-radius-default"><div class="icon-ok-gray"></div></div>
<div>
<input type="range" id="range" min="0" max="400" value="150" onchange="rangeEve()"/>
<span>body{font-size:<span id="showRange">150</span>%}</span>
</div> <script>
function rangeEve(){
var rangeValue=document.getElementById('range').value;
document.getElementById('showRange').innerHTML=rangeValue;
document.body.style.fontSize=rangeValue+'%';
}
</script>
</body>
</html>
更多图标制作请参考博文：https://www.cnblogs.com/xinjie-just/p/5978171.html
CSS制作简单图标的更多相关文章
- 用CSS制作带图标的按钮
先上一张效果图
- 利用 css 制作简单的提示框
在网页开发中,为了提高用户体验,经常会用到一些提示框来引导用户,这里分享下一些简单的提示框的制作 1.首先类似一个长方形右上角一个关闭按钮 这里用到的主要是一些定位的知识,运用relative和abs ...
- 纯CSS制作网页图标
三角形 <div class="box"></div> <style>.box{ width: 0; height: 0; border-top ...
- CSS制作简单loading动画
曾经以为,loading的制作需要一些比较高深的web动画技术,后来发现大多数loading都可以用“障眼法”做出来.比如一个旋转的圆圈,并不都是将gif图放进去,有些就是画个静止图像,然后让它旋转就 ...
- js+css制作简单的轮播图带有定时功能
用纯css和JavaScript代码制作带有定时轮播功能的轮播图 <!DOCTYPE html> <html> <head> <meta charset=&q ...
- css制作简单loading动画效果【css3 loading加载动画】
曾经以为,loading的制作需要一些比较高深的web动画技术,后来发现大多数loading都可以用“障眼法”做出来.比如一个旋转的圆圈,并不都是将gif图放进去,有些就是画个静止图像,然后让它旋转就 ...
- css制作简单的导航栏
//css代码 #menu{ height: 65px; width:100%; background-color: rgba(0, 0, 0, 0.5);}#menu ul{ list-style: ...
- 使用div+css制作简单导航 以及要注意问题
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- css制作简单下拉菜单
要点:定位,隐藏,显示. (一)先建一个两次列表 <ul id="ul1"> <li>首页</li> <li>第二页 <ul& ...
随机推荐
- 如何理解Python中的if __name__ == '__main__'
1. 摘要 通俗的理解__name__ == '__main__':假如你叫小明.py,在朋友眼中,你是小明(__name__ == '小明'):在你自己眼中,你是你自己(__name__ == '_ ...
- finger - 用户信息查找程序
总览 finger [-lmsp ] [user ... ] [user@host ... ] 描述 The finger 显示关于系统用户的信息 参数: -s Finger 显示用户的登录名, 真名 ...
- autoHeight # 动态高度添加 用 window.addEventListener('resize', function () {
动态高度添加 用 window.addEventListener('resize', function () { mounted () { this.init() window.addEventLis ...
- m3u8 格式转MP4
现在很多视频网站采用HLS流媒体的方式来提供视频直播,在HTML源代码中flash的播放地址为 http://xxxxxx/video/movie.m3u8 1.m3u8下载的格式大致如下: #EXT ...
- 从多表连接后的select count(*)看待SQL优化
从多表连接后的select count(*)看待SQL优化 一朋友问我,以下这SQL能直接改写成select count(*) from a吗? SELECT COUNT(*) FROM a LEFT ...
- linux 部署nginx作为反向代理入口的内核参数/etc/sysctl.conf
# Kernel sysctl configuration file for Red Hat Linux## For binary values, 0 is disabled, 1 is enable ...
- scrapy yield 回调函数不执行解决方案
yield Request(url=parse.urljoin(response.url, p_url),callback=self.parse_detail) 回调函数不执行: 加上: dont_f ...
- 【转】C# windows服务的创建与调试
Windows Service这一块并不复杂,但是注意事项太多了,网上资料也很凌乱,偶尔自己写也会丢三落四的.所以本文也就产生了,本文不会写复杂的东西,完全以基础应用的需求来写,所以不会对Window ...
- LR百分比模式
1 场景模式切换 Vuser Group Mode转换为Percentage Mode:如下 Scenario->Convert Scenairio to the VuserGroup Mod ...
- Laya Tween循环
Laya Tween循环 @author ixenos 需求:做一个循环的缓动动画 方案: 1)如果只是线性变化,那么直接使用timer或者frameLoop来变化 2)如果需要有非线性变化,那么使用 ...