H5+CSS前端特效源代码：可旋转动态日文片假名

最新推荐文章于 2021-12-14 00:47:57 发布
最新推荐文章于 2021-12-14 00:47:57 发布
阅读量4.6w 收藏 3
点赞数
分类专栏： H5 css 笔记 文章标签： css html 3d
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51684972/article/details/109323312
版权
本文介绍了如何使用H5和CSS创建一个动态3D旋转的日文片假名特效，包括效果展示、HTML结构和关键CSS代码的详细讲解。
摘要由CSDN通过智能技术生成

H5+CSS前端特效源代码：可旋转日文片假名

1.效果展示

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

2.H5部分

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <title>日语五十音图</title>
  </head>
  <body>
    <!-- 粉笔图案模式（pattern）定义, 来自： -->
    <!-- https://codepen.io/shshaw/pen/jmMpmd -->
    <svg style="display: none">
      <filter id="chalk">
        <feTurbulence
          result="T"
          numOctaves="3"
          seed="0"
          type="fractalNoise"
          baseFrequency=".4"
        />
        <feOffset dy="-2" dx="-2" />
        <feDisplacementMap
          in2="T"
          scale="5"
          xChannelSelector="R"
          yChannelSelector="G"
          in="SourceGraphic"
        />
      </filter>
    </svg>
    <!-- 粉笔图案模式（pattern）定义结束 -->
    <main>
      <!-- 五十音图容器 -->
      <div class="jp-grid">
        <!-- 行元素 -->
        <div class="row">
          <!-- 发音单元格 -->
          <div class="pro-card-wrapper">
            <!-- 控制前、后翻转 -->
            <div class="pro-card">
              <!-- 平假名 -->
              <div class="hiragana">
                <div class="character">あ</div>
                <div class="romaji">a</div>
              </div>
              <!-- 片假名 -->
              <div class="katakana">
                <div class="character">ア</div>
                <div class="romaji">a</div>
              </div>
            </div>
          </div>
          <div class="pro-card-wrapper">
            <div class="pro-card">
              <div class="hiragana">
                <div class="character">い</div>
                <div class="romaji">i</div>
              </div>
              <div class="katakana">
                <div class="character">イ</div>
                <div class="romaji">i</div>
              </div>
            </div>
          </div>
          <div class="pro-card-wrapper">
            <div class="pro-card">
              <div class="hiragana">
                <div class="character">う</div>
                <div class="romaji">u</div>
              </div>
              <div class="katakana">
                <div class="character">ウ</div>
                <div class="romaji">u</div>
              </div>
            </div>
          </div>
          <div class="pro-card-wrapper">
            <div class="pro-card">
              <div class="hiragana">
                <div class="character">え</div>
                <div class="romaji">e</div>
              </div>
              <div class="katakana">
                <div class="character">エ</div>
                <div class="romaji">e</div>
              </div>
            </div>
          </div>
          <div class="pro-card-wrapper">
            <div class="pro-card">
              <div class="hiragana">
                <div class="character">お</div>
                <div class="romaji">o</div>
              </div>
              <div class="katakana">
                <div class="character">オ</div>
                <div class="romaji">o</div>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="pro-card-wrapper">
            <div class="pro-card">
              <div class="hiragana">
                <div class="character">か</div>
                <div class="romaji">ka</div>
              </div>
              <div class="katakana">
                <div class="character">カ</div>
                <div class="romaji">ka</div>
              </div>
            </div>
          </div>
          <div class="pro-card-wrapper">
            <div class="pro-card">
              <div class="hiragana">
                <div class="character">き</div>
                <div class="romaji">ki</div>
              </div>
              <div class="katakana">
                <div class="character">キ</div>
                <div class="romaji">ki</div>
              </div>
            </div>
          </div>
          <div class="pro-card-wrapper">
            <div class="pro-card">
              <div class="hiragana">
                <div class="character">く</div>
                <div class="romaji">ku</div>
              </div>
              <div class="katakana">
                <div class="character">ク</div>
                <div class="romaji">ku</div>
              </div>
            </div>
          </div>
          <div class="pro-card-wrapper">
            <div class="pro-card">
              <div class="hiragana">
                <div class="character">け</div>
                <div class="romaji">ke</div>
              </div>
              <div class="katakana">
                <div class="character">ケ</div>
                <div class="romaji">ke</div>
              </div>
            </div>
          </div>
          <div class="pro-card-wrapper">
            <div class="pro-card">
              <div class="hiragana">
                <div class="character">こ</div>
                <div class="romaji">ko</div>
              </div>
              <div class="katakana">
                <div class="character">コ</div>
                <div class="romaji">ko</div>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="pro-card-wrapper">
            <div class="pro-card">
              <div class="hiragana">
                <div class="character">さ</div>
                <div class="romaji">sa</div>
              </div>
              <div class="katakana">
                <div class="character">サ</div>
                <div class="romaji">sa</div>
              </div>
            </div>
          </div>
          <div class="pro-card-wrapper">
            <div class="pro-card">
              <div class="hiragana">
                <div class="character">し</div>
                <div class="romaji">shi</div>
              </div>
              <div class="katakana">
                <div class="character">シ</div>
                <div class="romaji">shi</div>
              </div>
            </div>
          </div>
          <div class="pro-card-wrapper">
            <div class="pro-card">
              <div class="hiragana">
                <div class="character">す</div>
                <div class="romaji">su</div>
              </div>
              <div class="katakana">
                <div class="character">ス</div>
                <div class="romaji">su</div>
              </div>
            </div>
          </div>
          <div class="pro-card-wrapper">
            <div class="pro-card">
              <div class="hiragana">
                <div class="character">せ</div>
                <div class="romaji">se</div>
              </div>
              <div class="katakana">
                <div class="character">セ</div>
                <div class="romaji">se</div>
              </div>
            </div>
          </div>
          <div class="pro-card-wrapper">
            <div class="pro-card">
              <div class="hiragana">
                <div class="character">そ</div>
                <div class="romaji">so</div>
              </div>
              <div class="katakana">
                <div class="character">ソ</div>
                <div class="romaji">so</div>
              </div>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="pro-card-wrapper">
            <div class="pro-card">
              <div class="hiragana">
                <div class="character">た</div>
                <div class="romaji">ta</div>
              </div>
              <div class="katakana">
                <div class="character">タ</div>
                <div class="romaji">ta</div>
              </div>
            </div>
          </div>
          <div class="pro-card-wrapper">
            <div class="pro-card">
              <div class="hiragana">
                <div class="character">ち</div>
                <div class="romaji">chi</div>
              </div>
              <div class="katakana">
                <div class="character">チ</div>
                <div class="romaji">chi</div>
              </div>
            </div>
          </div>
          <div class="pro-card-wrapper">
            <div class="pro-card">
              <div class="hiragana">
                <div class="character">つ</div>
                <div class="romaji">tsu</div>
              </div>
              <div class="katakana">
                <div class="character">ツ</div>
                <div cla
最低0.47元/天 解锁文章
三郎君
关注
专栏目录
001 Nexus5X 刷 kali NetHunter 保姆教程
m0_46988126的博客
07-05 268
Nexus 5X 刷 kali Nethunter 保姆级教程
html个人中心布局,html5前端开发笔记-个人中心
weixin_39616056的博客
05-30 3099
简单的css自适应PC端移动端一开始的想法就是模仿手机APP 的页面进行布局，首先得有个头部，然后是主题部分，然后加上2个按钮，分别是编辑和退出登录。先布出基本结构。代码如下：个人中心个人中心 姓名：性别：手机：学校：个人简介：这个地方文字超出范围之外会自动把容器div撑开，注意不是中文字符的话需要加CCS属性word-wrap:break-word...
如何让日文网页现实片假名！
Jyuhua的专栏
07-05 2845
对于学日语的人来说，如果能给网页上的汉字标注片假名，实在是方便之极。这已经有人实现了，曾在“沪江英语”论坛上看到这样的方法，具体作者没能记住，在此表示歉意，具体方法很简单，“一步到位”到位：在待访问的网页地址前面加上http://trans.hiragana.jp/ruby/，比如：http://trans.hiragana.jp/ruby/http://map.yahoo.co.jp/addre
移动端H5前端设计项目源码
04-08
移动端H5前端设计项目源码
html樱花飘落特效js
existent
06-13 13万+
引入 <!-- 樱花特效引入 --> <script src="./sakura.js"></script> 或者 js源码 //樱花 sakura var stop, staticx; var img = new Image(); img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUgAAAEwCAYAAADVZeifAAAACXBIWXMAAACYAAAAmAGiyIKYAAAHG2lUWHRY
MySQL 5x 安装攻略
孤独是因为思念谁
04-02 5514
这里以 mysql-noinstall-5.0.13 在 xp 下的安装为例，安装路径自行修改。下载 mysql-noinstall-5.0.13.zip下载 mysql-administrator.zip下载 mysql-query-browser.zip解压 到 C:/mysql-5.0.13在 C:/mysql-5.0.13 下创建文本文件 my.ini输入如下内容并保存：（注意斜杆
源代码：网站制作五十音图.rar
09-24
标题中的“源代码：网站制作五十音图.rar”表明这是一个包含源代码的压缩文件，用于创建一个展示日本五十音图的网站。五十音图是学习日语的基础，它包括平假名（平仮名）和片假名（片仮名），共100个音节。这个项目...
前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)
qq_36609655的博客
07-02 1万+
第1章Html   Html：超级文本标记语言（HyperText Markup Language），在浏览器上运行的一种标记语言。 就是给文本加上含有语义的标签。 接下来应该学习更多具体语义标签： 一、结构（固定的结构）   &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;bod...
flashcards:学习平假名+片假名。 内置w React
03-30
假名抽认卡 用于研究平假名和片假名的React应用程序。 利用功能组件+挂钩。...键盘可访问 去做 将暗模式保存到本地存储 重置所有按钮的按钮 检测机器暗模式偏好 地方发展 在本地克隆项目 npm install npm start
五十音图_微信小程序模板js代码前台前端H5页面源码.rar
最新发布
08-09
描述部分与标题一致，"五十音图_微信小程序模板js代码前台前端H5页面源码.rar" 暗示这是一份用于创建微信小程序的源代码，特别的是，它设计用于展示或教授日语的五十音图。源码可能包含了用JavaScript编写的前端逻辑...
Spring Boot 分布式 Session 入门
weixin_42073629的博客
04-15 2634
1. 概述 艿艿信奉的话很多，其中很重要的一条：在考虑高性能之前，一定要做高可用。很多时候，我们常常陷入追求一个功能或者系统的高性能，却忽略了高可用。 为什么在这篇文章的开头提到这个段呢？对于任何系统，无论多小的访问量，一定要做系统的高可用。那么在我们部署生产环境下的 Tomcat 等 Web 容器的时候，一定是需要部署多个节点。此时，Session 的一致性就成为一个问题。为什么呢？ S...
c++中vector向量几种情况的总结（向量指针，指针的向量）
热门推荐
s9434的博客
04-03 54万+
1.标准库vector类型 vector 是同一种类型的对象的集合，每个对象都有一个对应的整数索引值。标准库将负责管理与存储元素相关的内存。我们把 vector 称为容器，是因为它可以包含其他对象。一个容器中的所有对象都必须是同一种类型的。 用 vector之前，必须包含相应的头文件。 #include using std::vector; vector 是一个类模板（class te
【无标题】
weixin_44782100的博客
12-14 5万+
data:video/quicktime;base64,AAAAFGZ0eXBxdCAgAAAAAHF0ICAAAAAId2lkZQAGlrNtZGF0ANAABwD6Fy4ocRBRPiZd074MHd0MFypsSz7xD38Ig92TTE4RyGI5mQ7N0qgN7kzPkM3LJ2MgTxDycO4TyNYnAhSuz6bYxSE2d3bxw1iSCbYhN6bqQQiCJrcQHUIU0eydv/V7HBvDUsPUX/GD3CH4a53GkAVrqVEn+D7+OA8hMzcBth46lNJr
【考研】数据结构复习
weixin_43983431的博客
07-17 733
一、线性表 1、线性表的顺序表示 （1）定义 静态分配 #define MaxSize 50 typedef struct{ ElemType data[MaxSize]; int length; }SqList; 动态分配 #define InitSize 100 typedef struct{ ElemType *data; // 指示动态分配数组的指针 int MaxSize,length; }SqList; // 初始动态分配 L.data=(ElemT
signature=0fdde99449705347b1bc3148e0519684,yarn.lock · mirrors_yeoman/generator-generator - Gitee.co...
weixin_35661054的博客
05-29 7万+
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.# yarn lockfile v1"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.0.0-beta.35":version "7.5.5"resolved "https://registry.yarnpkg.com/@...
数据库资源集合
qq_40907977的博客
12-15 1万+
面试题 ： Linux运维必会的MySQL企业面试题大全 推荐 ：&nbsp;http://blog.51cto.com/xiaogongju/2068526 mysql面试一百道题 ： &nbsp;http://blog.51cto.com/xiaogongju/2114122 去 BAT 面试，总结了这 55 道 MySQL 面试题！ &nbsp; &nbsp; :&nbsp;https://...
webstorm注册码
lzh657083979的博客
10-31 2315
UserName：William===== LICENSE BEGIN ===== 45550-12042010 00001SzFN0n1bPII7FnAxnt0DDOPJA INauvJkeVJBuE5bqLEznccE4tet6tr RiyoMxDK8oDY93tx!ipPyGmqYYeWxS ===== LICENSE END =====WebStorm 2017破解（JetBrai
用户个人中心页面html5源码,橙色的商城个人中心全部页面模板html源码
weixin_39647471的博客
05-31 4972
(导航链接未设置，不能金币下载)包括登录、注册、安全设置以及购物、产品、我的钱包等页面模板html下载资源下载此资源下载价格为4D币，请先登录资源文件列表codedown123-0802-35/.project,1143codedown123-0802-35/css/amazeui.min.css,280625codedown123-0802-35/css/jd.css,1157cod...
用java编写从键盘练习输入日文片假名的应用程序。
05-15
以下是一个简单的Java程序，可以从键盘输入日文片假名： ```java import java.util.Scanner; public class JapaneseKanaInput { public static void main(String[] args) { Scanner scanner = new Scanner...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值