.coinview {
width: 320px;
height: 320px;
margin-left: -160px;
margin-top: -160px;
position: absolute;
top: 50%;
left: 50%;
transform-style: preserve-3d;
/* animation: spin 2s linear infinite; */
}
.back, .middle,.front{
background-size: contain;
border-radius: 50%;
width: 320px;
height: 320px;
}
.back {
background-image: url("a.png");
}
.middle {
background-image: url("b.png");
position: absolute;
top: 0;
}
.front {
background-image: url("b.png");
position: absolute;
top: 0;
transform: translateZ(10px);
}
@keyframes spin {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
.coinview.s1 {
animation: spin 0.25s linear infinite;
}
.coinview.to1{
transform: rotateY(0deg);
}
.coinview.to2 {
transform: rotateY(180deg);
}
view
<i-spin i-class="iconfont" size="large" fix wx:if="{{coining}}" custom>
<view class="coinview {{coinTransForm?'s1':(coin180?'to1':'to2')}}" catch:tap="tapStopCoin">
<view class="back"></view>
<view class="middle" style="transform: translateZ(1px)"></view>
<view class="middle" style="transform: translateZ(2px)"></view>
<view class="middle" style="transform: translateZ(3px)"></view>
<view class="middle" style="transform: translateZ(4px)"></view>
<view class="middle" style="transform: translateZ(5px)"></view>
<view class="middle" style="transform: translateZ(6px)"></view>
<view class="middle" style="transform: translateZ(7px)"></view>
<view class="middle" style="transform: translateZ(8px)"></view>
<view class="middle" style="transform: translateZ(9px)"></view>
<view class="front"></view>
</view>
</i-spin>
css3定义字体在前端项目切图阶段常常用到,但是有时候却不知道调用某个字体对应的英文名是什么,如果稍稍写错就出不来效果,所以虽然很小的一件事,往往很多人搞错,下面就附带了css3定义字体名称font-family 正确字体英文名称写法(大全),希望对大家有用,也作为笔记,方便下次查找。
windows常见内置中文字体
字体中文名 字体英文名
宋体 SimSun(浏览器默认)
黑体 SimHei
微软雅黑 Microsoft Yahei
微软正黑体 Microsoft JhengHei
楷体 KaiTi
新宋体 NSimSun
仿宋 FangSong
OS X常见内置中文字体
字体中文名 字体英文名
苹方 PingFang SC
华文黑体 STHeiti
华文楷体 STKaiti
华文宋体 STSong
华文仿宋 STFangsong
华文中宋 STZhongsong
华文琥珀 STHupo
华文新魏 STXinwei
华文隶书 STLiti
华文行楷 STXingkai
冬青黑体简 Hiragino Sans GB
兰亭黑-简 Lantinghei SC
翩翩体-简 Hanzipen SC
手札体-简 Hannotate SC
宋体-简 Songti SC
娃娃体-简 Wawati SC
魏碑-简 Weibei SC
行楷-简 Xingkai SC
雅痞-简 Yapi SC
圆体-简 Yuanti SC
office安装后新增字体
字体中文名 字体英文名
幼圆 YouYuan
隶书 LiSu
华文细黑 STXihei
华文楷体 STKaiti
华文宋体 STSong
华文仿宋 STFangsong
华文中宋 STZhongsong
华文彩云 STCaiyun
华文琥珀 STHupo
华文新魏 STXinwei
华文隶书 STLiti
华文行楷 STXingkai
方正舒体 FZShuTi
方正姚体 FZYaoti
开源字体
字体中文名 字体英文名
思源黑体 Source Han Sans CN
思源宋体 Source Han Serif SC
文泉驿微米黑 WenQuanYi Micro Hei
版权字体(汉仪)
字体中文名 字体英文名
汉仪旗黑 HYQihei 40S
汉仪旗黑 HYQihei 50S
汉仪旗黑 HYQihei 60S
汉仪大宋简 HYDaSongJ
汉仪楷体 HYKaiti
汉仪家书简 HYJiaShuJ
汉仪PP体简 HYPPTiJ
汉仪乐喵体简 HYLeMiaoTi
汉仪小麦体 HYXiaoMaiTiJ
汉仪程行体 HYChengXingJ
汉仪黑荔枝 HYHeiLiZhiTiJ
汉仪雅酷黑W HYYaKuHeiW
汉仪大黑简 HYDaHeiJ
汉仪尚魏手书W HYShangWeiShouShuW
版权字体(方正)
字体中文名 字体英文名
方正粗雅宋简体 FZYaSongS-B-GB
方正报宋简体 FZBaoSong-Z04S
方正粗圆简体 FZCuYuan-M03S
方正大标宋简体 FZDaBiaoSong-B06S
方正大黑简体 FZDaHei-B02S
方正仿宋简体 FZFangSong-Z02S
方正黑体简体 FZHei-B01S
方正琥珀简体 FZHuPo-M04S
方正楷体简体 FZKai-Z03S
方正隶变简体 FZLiBian-S02S
方正隶书简体 FZLiShu-S01S
方正美黑简体 FZMeiHei-M07S
方正书宋简体 FZShuSong-Z01S
方正舒体简体 FZShuTi-S05S
方正水柱简体 FZShuiZhu-M08S
方正宋黑简体 FZSongHei-B07S
方正宋三简体 FZSong
方正魏碑简体 FZWeiBei-S03S
方正细等线简体 FZXiDengXian-Z06S
方正细黑一简体 FZXiHei I-Z08S
方正细圆简体 FZXiYuan-M01S
方正小标宋简体 FZXiaoBiaoSong-B05S
方正行楷简体 FZXingKai-S04S
方正姚体简体 FZYaoTi-M06S
方正中等线简体 FZZhongDengXian-Z07S
方正准圆简体 FZZhunYuan-M02S
方正综艺简体 FZZongYi-M05S
方正彩云简体 FZCaiYun-M09S
方正隶二简体 FZLiShu II-S06S
方正康体简体 FZKangTi-S07S
方正超粗黑简体 FZChaoCuHei-M10S
方正新报宋简体 FZNew BaoSong-Z12S
方正新舒体简体 FZNew ShuTi-S08S
方正黄草简体 FZHuangCao-S09S
方正少儿简体 FZShaoEr-M11S
方正稚艺简体 FZZhiYi-M12S
方正细珊瑚简体 FZXiShanHu-M13S
方正粗宋简体 FZCuSong-B09S
方正平和简体 FZPingHe-S11S
方正华隶简体 FZHuaLi-M14S
方正瘦金书简体 FZShouJinShu-S10S
方正细倩简体 FZXiQian-M15S
方正中倩简体 FZZhongQian-M16S
方正粗倩简体 FZCuQian-M17S
方正胖娃简体 FZPangWa-M18S
方正宋一简体 FZSongYi-Z13S
方正剪纸简体 FZJianZhi-M23S
方正流行体简体 FZLiuXingTi-M26S
方正祥隶简体 FZXiangLi-S17S
方正粗活意简体 FZCuHuoYi-M25S
方正胖头鱼简体 FZPangTouYu-M24S
方正卡通简体 FZKaTong-M19S
方正艺黑简体 FZYiHei-M20S
方正水黑简体 FZShuiHei-M21S
方正古隶简体 FZGuLi-S12S
方正幼线简体 FZYouXian-Z09S
方正启体简体 FZQiTi-S14S
方正小篆体 FZXiaoZhuanTi-S13T
方正硬笔楷书简体 FZYingBiKaiShu-S15S
方正毡笔黑简体 FZZhanBiHei-M22S
方正硬笔行书简体 FZYingBiXingShu-S16S