鳕鱼天空

This is Mr Wang's Tech Blog.

硬币旋转翻面的view小程序实现

.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定义字体名称font-family 正确字体英文名称写法(大全)

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

CSS var() 函数 伪代码 变量(包含微信小程序写法)

通过动态绑定style,声明css变量"--bgColor",把变量”color”赋给“--bgColor”

HTML:

<div ref="chart-circle" class="chart-circle" :style="{ '--bgColor': color }"></div>

微信小程序:

<view  class="chart-circle" style="--bgColor:{{color}}"></view>
.chart-circle {
  width: 80px;
  height: 80px;
  position: relative;
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--bgColor);
  }
}

w3shool中演示