LiarTrump字母翻转——CSS3前端小动画
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秒的位置开始的。
尾声
通过这些，大家应该能够彻底理解这些代码了，我相信也能自己写出来一份了，俗话说的好，授人以鱼不如授人以渔，我这是鱼给了，网子也给了，还告诉你们哪里有鱼了，同时也希望大家能告诉我我这个网子哪里破了（写的不好的地方），或者也能分享点儿打鱼方法上来，不胜感激！！请不吝赐教