LiarTrump字母翻转——CSS3前端小动画
- 效果展示
-
- LiarTrump
- 模板下载地址
-
- 1.说明
- 2.LiarTrump字母翻转下载
- 代码实现
-
- 1.LiarTrump翻转字母
- 相关方法的介绍
-
- 1.style标签
- 2.选择器
- 3.@keyframes 规则
- 4.animation-delay
- 尾声
效果展示
LiarTrump
模板下载地址
1.说明
模板我上传到CSDN资源了，不需要积分就可以下载的，大家随便去，模板把html，css分开了，好歹标准些，别从我这直接复制，很丑，哈哈，符合规范一些，去下载一个，再次声明不要积分的(发生了点儿我不知道的情况,没传过资源,不知道为什么,我设置的是0积分,可是他自己涨上去了…)。
2.LiarTrump字母翻转下载
LiarTrump字母翻转下载
代码实现
这整段代码都写在了html里，是为了让大家复制并且自己演示一下，但是千万不要直接用（你们也可以自己分开，很容易的- -），太不正规了，想要资源的去上面链接下载，不要积分的
之所以先扔个代码，主要是有人他就是来看代码的，基础知识、涉及到的点不需要看，哈哈，关于每行怎么写的详细的分析我会在后面写，尽量把每个人当作小白，让你们搞懂这段代码
1.LiarTrump翻转字母
<html lang="en">
<head>
<meta charset="UTF-8">
<title>g55zhw_CSS3title>
<style> body { background-color: #8C8C8C; text-align: center; } .words { font-size: 50px; font-family: "Times New Roman", sans-serif; } .words > span { display: inline-block; animation: method 3s infinite linear; } @keyframes method { 50% { transform: rotateX(360deg); } 100% { transform: rotateX(360deg); } } .words > span:nth-child(3n + 0) { color: white; } .words > span:nth-child(3n + 1) { color: #8B0000; } .words > span:nth-child(1) { animation-delay: 0.2s; } .words > span:nth-child(2) { animation-delay: 0.4s; } .words > span:nth-child(3) { animation-delay: 0.6s; } .words > span:nth-child(4) { animation-delay: 0.8s; } .words > span:nth-child(5) { animation-delay: 1.0s; } .words > span:nth-child(6) { animation-delay: 1.2s } .words > span:nth-child(7) { animation-delay: 1.4s } .words > span:nth-child(8) { animation-delay: 1.6s } .words > span:nth-child(9) { animation-delay: 1.8s } .words > span:nth-child(10) { animation-delay: 2s } style>
head>
<body>
<div>
<div class="words">
<span><img src="bug.jpg" alt="not found" width="100" height="100"/>span>
<span>Lspan>
<span>ispan>
<span>aspan>
<span>rspan>
<span>Tspan>
<span>rspan>
<span>uspan>
<span>mspan>
<span>pspan>
div>
<p>Don't believe Trump!!p>
div>
body>
html>
相关方法的介绍
这里我会向大家介绍上面一些方法的使用，主要对象是和我差不多的小白，所以高手请自动忽略（ps：这一篇非常非常基础，大家理解为假期完了来凑数的吧，哈哈哈），不过说错的地方依旧需要指点的，请在评论区批评指正，谢谢。
1.style标签
<style> body { background-color: #8C8C8C; text-align: center; } .words { font-size: 50px; font-family: "Times New Roman", sans-serif; } .words > span { display: inline-block; animation: method 3s infinite linear; } @keyframes method { 50% { transform: rotateX(360deg); } 100% { transform: rotateX(360deg); } } .words > span:nth-child(3n + 0) { color: white; } .words > span:nth-child(3n + 1) { color: #8B0000; } .words > span:nth-child(1) { animation-delay: 0.2s; } .words > span:nth-child(2) { animation-delay: 0.4s; } .words > span:nth-child(3) { animation-delay: 0.6s; } .words > span:nth-child(4) { animation-delay: 0.8s; } .words > span:nth-child(5) { animation-delay: 1.0s; } .words > span:nth-child(6) { animation-delay: 1.2s } .words > span:nth-child(7) { animation-delay: 1.4s } .words > span:nth-child(8) { animation-delay: 1.6s } .words > span:nth-child(9) { animation-delay: 1.8s } .words > span:nth-child(10) { animation-delay: 2s } style>
这一段是本篇代码的核心（除了这个也没其他的东西了- -|||），在一般的html页面里，大家是不会见到这一段的，我也主要是为了看着方便，给写在一起了，一般情况是需要将这些配置放在css里，然后通过这段代码引入的：
<link rel="stylesheet" href="../css/style.css">
style标签里面规定了很多很多的属性，感兴趣的可以自己去查一查，我这里主要介绍一下我使用的属性（由于属性不多，所以我得水一水，无论啥属性，都拿上来说一说，美其名曰：“详细”！！！）。
2.选择器
<style> body { } .words { } .words > span { } .words > span:nth-child(***) { } style>
const 这里面我主要用了这四种选择器。
| 序号 | 选择器 | 应用 | 说明 | 备注 |
|---|---|---|---|---|
| ① | element | body | 选择所有元素 | |
| ② | .class | .words | 选择所有class="words"的元素 | |
| ③ | element>element | .words > span | 选择所有父级是 class=“words” 元素的 元素 | 例：div>p 选择所有父级是 元素的
元素 |
| ④ | :nth-child(n) | .words > span:nth-child(1) | 选择每个（所有父级是 class=“words” 元素的 元素）的元素是其父级的第一个子元素 | 例：p:nth-child(1) 选择每个p元素是其父级的第一个子元素 |
3.@keyframes 规则
<style> @keyframes flip { 100% { transform: rotateX(360deg); } } style>
keyframes可以创建一些简单的动画，这些动画只需要CSS就可以完成，缺点就是太过单调，不过在某些时候还是挺好用的。
创建动画是通过逐步改变从一个CSS样式设定到另一个。在动画过程中，可以更改CSS样式的设定多次。指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。0％是开头动画，100％是当动画完成。
比如我这儿就是只插入了一个关键帧，100%，即是限定了结束那一帧的状态。
还有一些其他的方法，稍微基础点儿的比如有移动，给大家举个例子：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>g55zhw_CSS3title>
<style> body { background-color: white; } .huaji > span { animation:method 6s infinite; position:relative; } @keyframes method { 0% { top:400px;left:400px;} 10% { top:100px;left:100px;} 20% { top:100px;left:700px;} 30% { top:700px;left:700px;} 40% { top:700px;left:100px;} 50% { top:200px;left:200px;} 60% { top:200px;left:600px;} 70% { top:600px;left:600px;} 80% { top:600px;left:200px;} 90% { top:400px;left:800px;} 100% { top:400px;left:400px;} } style>
head>
<body>
<div>
<div class="huaji">
<span><img src="huaji.jpg" alt="not found" width="100" height="100"/>span>
div>
div>
body>
html>
效果：
4.animation-delay
animation-delay 属性定义动画什么时候开始；animation-delay 值单位可以是秒（s）或毫秒（ms）。
比如我如果设置上面的滑稽脸延迟时间是-2秒，那么我们立刻就能看到他开始动，并且是从他的2秒的位置开始的。
尾声
通过这些，大家应该能够彻底理解这些代码了，我相信也能自己写出来一份了，俗话说的好，授人以鱼不如授人以渔，我这是鱼给了，网子也给了，还告诉你们哪里有鱼了，同时也希望大家能告诉我我这个网子哪里破了（写的不好的地方），或者也能分享点儿打鱼方法上来，不胜感激！！请不吝赐教
