css卡片点击立体翻转效果代码

代码语言:html

所属分类:其他

代码描述:css卡片点击立体翻转效果代码

代码标签: 立体 翻转 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
@font-face {
  font-family: 'Novecento';
  src: url(data:application/x-font-woff;charset=utf-8;base64,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.........完整代码请登录后点击上方下载按钮下载查看

网友评论0