本文正在参与「金石计划 . 瓜分6万现金大奖」
代码github库房：github.com/shuirongshu…
运用方法
- 看称号作用图，有没有和自己想要的作用类似的
- 有的话，复制粘贴代码运用
- 也能够自己修改一下
- css作用并不是特别难，仅仅有时分我们或许想不到
- 笔者空闲时刻，会持续更新的哦，点赞关注不走失**
^_^**
留意：一些代码思路，笔者写在代码注释中去了
1_鼠标悬浮文字暗影跳动
作用图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 {
width: 80px;
color: cornflowerblue;
}
h1:hover {
animation: animate 0.5s linear infinite;
}
@keyframes animate {
0%,
25% {
text-shadow: 2px 2px 2px #ff6384;
}
50% {
text-shadow: 2px -2px 2px #ff6384;
}
75% {
text-shadow: -2px 2px 2px #ff6384;
}
100% {
text-shadow: -2px -2px 2px #ff6384;
}
}
</style>
</head>
<body>
<h1>hello</h1>
<!--
一说到暗影，我们常常就会想到盒子的暗影，box-shadow。实际上css3别的供给了文字暗影text-shadow
text-shadow对应特点 text-shadow: h-shadow v-shadow blur color;
水平暗影 垂直暗影 含糊范围 色彩值
本例中，当鼠标悬浮的时分，给文字加上动画。四个方向顺次都呈现文字暗影，就类似跳动的作用了
-->
</body>
</html>
2_鼠标悬浮文字底部呈现下划线并变宽
作用图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 160px;
/* 外盒子相对定位，便于伪元素绝对定位(使下划线在文字的最底下) */
position: relative;
}
h1::before {
content: '';
height: 4px;
background: red;
/* 伪元素默认款式 display: inline;所以需求转成inline-block宽高才会收效 */
display: inline-block;
/* 经过定位使下划线在最低层 */
position: absolute;
bottom: -6px;
width: 0;
/* 加上一个过渡作用，使之丝滑一些 */
transition: width 0.36s;
}
h1:hover::before {
/* 悬浮时分，让下划线伪元素宽度变成100%即可呈现作用 */
width: 100%;
}
</style>
</head>
<body>
<div class="box">
<h1>悬浮下划线</h1>
</div>
<!--
思路：
1. 运用伪元素创立下划线
2. 经过定位让下划线的方位在文字的底部
3. 初始下划线宽度为0
4. 悬浮时更改为100%即呈现作用
-->
</body>
</html>
3_文字色彩突变流光作用
作用图
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/* 加上 -webkit- 留意兼容 */
h1 {
background: -webkit-linear-gradient(135deg,
#0eaf6d,
#ff6ac6 25%,
#147b96 50%,
#e6d205 55%,
#2cc4e0 60%,
#8b2ce0 80%,
#ff6384 95%,
#08dfb4);
/* 文字色彩填充设置为通明 */
-webkit-text-fill-color: transparent;
/* 布景裁剪，即让文字运用布景色 */
-webkit-background-clip: text;
/* 布景图扩大一下，看着柔软一些 */
-webkit-background-size: 200% 100%;
/* 运用动画flowCss 12秒速度 无限循环 线性匀速动画*/
-webkit-animation: flowCss 12s infinite linear;
}
@-webkit-keyframes flowCss {
0% {
/* 移动布景方位 */
background-position: 0 0;
}
100% {
background-position: -400% 0;
}
}
h1:hover {
-webkit-animation: flowCss 4s infinite linear;
}
</style>
</head>
<body>
<h1>文字色彩突变流光作用</h1>
<!-- 思路就是 文字色彩填充为通明、布景裁剪让文字运用布景色、然后设置一个突变布景色
再扩大一下布景，最终经过动画移动布景方位，于是作用就出来了 -->
</body>
</html>
4_打字机作用
作用图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 {
/* 本例12个文字(加标点符号)；有多少个文字，width就是多少个em */
width: 12em;
/* 加上两个动画，一个是打字动画，运用steps让字一个一个的呈现，
留意step和字数保持一致，光标动画也是同理，*/
animation: typingWords 5s steps(12) infinite, cursor 0.5s steps(1) infinite;
/* 要设置不允许换行，且溢出躲藏 */
white-space: nowrap;
overflow: hidden;
/* 运用右边框作为打印的指针光标 */
border-right: 1px solid #000;
}
@keyframes typingWords {
0% {
width: 0;
}
}
@keyframes cursor {
50% {
border-color: transparent;
}
}
</style>
</head>
<body>
<h1>欢迎光临呐，各位访客们。</h1>
<!-- css大佬张鑫旭的完成方法：https://www.zhangxinxu.com/wordpress/2019/01/css-typewriter-effect/ -->
</body>
</html>
5_文字左右旋转晃动作用
作用图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span {
font-size: 48px;
font-weight: 600;
animation: rotate 0.3s ease infinite;
/* 留意，要敞开绝对定位哦 */
position: absolute;
}
/* 鼠标悬浮敞开动画也能够的
span:hover {
animation: rotate 0.3s ease infinite;
} */
@keyframes rotate {
0% {
transform: rotate(0);
}
20% {
transform: rotate(-2deg);
}
60% {
transform: rotate(0);
}
80% {
transform: rotate(2deg);
}
100% {
transform: rotate(0);
}
}
span:nth-child(2) {
margin-left: 108px;
}
span:nth-child(3) {
margin-left: 216px;
}
</style>
</head>
<body>
<span>代码</span>
<span>修仙</span>
<span>之路</span>
</body>
</html>
6_圆圈呼吸分散作用
作用图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 120px;
}
.circle-breath {
background: pink;
box-shadow: 0 0 0 0 rgb(204, 73, 152);
height: 36px;
width: 36px;
border-radius: 50%;
animation: donghua 2.4s infinite;
}
@keyframes donghua {
0% {
transform: scale(0.60);
/* 留意rgba中的a的设置 */
box-shadow: 0 0 0 0 rgba(204, 73, 152, 60%);
}
60% {
transform: scale(1);
box-shadow: 0 0 0 36px rgba(204, 73, 152, 0%);
}
100% {
transform: scale(0.60);
box-shadow: 0 0 0 0 rgba(204, 73, 152, 0%);
}
}
</style>
</head>
<body>
<div class="circle-breath"></div>
<!--
动画中运用布景色暗影，布景色暗影初始通明度为60%，后续为0
调配运用scale进行缩放，便能够到达圆圈呼吸分散作用
-->
</body>
</html>
7_音频波纹加载作用
作用图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
padding: 120px;
}
.music {
width: 175px;
height: 100px;
display: flex;
}
.music span {
width: 6px;
border-radius: 18px;
margin-right: 6px;
}
.music span:nth-child(1) {
/* 时刻递加，参差不齐的作用 */
animation: bar1 2s 0.2s infinite linear;
}
.music span:nth-child(2) {
animation: bar2 2s 0.4s infinite linear;
}
.music span:nth-child(3) {
animation: bar3 2s 0.6s infinite linear;
}
.music span:nth-child(4) {
animation: bar4 2s 0.8s infinite linear;
}
.music span:nth-child(5) {
animation: bar5 2s 1.0s infinite linear;
}
.music span:nth-child(6) {
animation: bar6 2s 1.2s infinite linear;
}
.music span:nth-child(7) {
animation: bar7 2s 1.4s infinite linear;
}
.music span:nth-child(8) {
animation: bar8 2s 1.6s infinite linear;
}
.music span:nth-child(9) {
animation: bar9 2s 1.8s infinite linear;
}
@keyframes bar1 {
0% {
background: #f677b0;
margin-top: 25%;
height: 10%;
}
50% {
background: #f677b0;
height: 100%;
margin-top: 0%;
}
100% {
background: #f677b0;
height: 10%;
margin-top: 25%;
}
}
@keyframes bar2 {
0% {
background: #df7ff2;
margin-top: 25%;
height: 10%;
}
50% {
background: #df7ff2;
height: 100%;
margin-top: 0%;
}
100% {
background: #df7ff2;
height: 10%;
margin-top: 25%;
}
}
@keyframes bar3 {
0% {
background: #8c7ff2;
margin-top: 25%;
height: 10%;
}
50% {
background: #8c7ff2;
height: 100%;
margin-top: 0%;
}
100% {
background: #8c7ff2;
height: 10%;
margin-top: 25%;
}
}
@keyframes bar4 {
0% {
background: #7fd0f2;
margin-top: 25%;
height: 10%;
}
50% {
background: #7fd0f2;
height: 100%;
margin-top: 0%;
}
100% {
background: #7fd0f2;
height: 10%;
margin-top: 25%;
}
}
@keyframes bar5 {
0% {
background: #7ff2d3;
margin-top: 25%;
height: 10%;
}
50% {
background: #7ff2d3;
height: 100%;
margin-top: 0%;
}
100% {
background: #7ff2d3;
height: 10%;
margin-top: 25%;
}
}
@keyframes bar6 {
0% {
background: #7ff2a0;
margin-top: 25%;
height: 10%;
}
50% {
background: #7ff2a0;
height: 100%;
margin-top: 0%;
}
100% {
background: #7ff2a0;
height: 10%;
margin-top: 25%;
}
}
@keyframes bar7 {
0% {
background: #adf27f;
margin-top: 25%;
height: 10%;
}
50% {
background: #adf27f;
height: 100%;
margin-top: 0%;
}
100% {
background: #adf27f;
height: 10%;
margin-top: 25%;
}
}
@keyframes bar8 {
0% {
background: #e7f27f;
margin-top: 25%;
height: 10%;
}
50% {
background: #e7f27f;
height: 100%;
margin-top: 0%;
}
100% {
background: #e7f27f;
height: 10%;
margin-top: 25%;
}
}
@keyframes bar9 {
0% {
background: #ecaa64;
margin-top: 25%;
height: 10%;
}
50% {
background: #ecaa64;
height: 100%;
margin-top: 0%;
}
100% {
background: #ecaa64;
height: 10%;
margin-top: 25%;
}
}
</style>
</head>
<body>
<div class="music">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<!-- 给每一个bar指定margin-top和height的动画的改变
为了作用更好看，让每一个bar的布景色都不一样，就是五彩斑斓了 -->
</body>
</html>
8_四周线条盘绕活动作用
作用图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
padding: 120px;
}
.mainbox {
width: 320px;
height: 320px;
position: relative;
/* 超出躲藏需求加上 */
overflow: hidden;
}
.content {
width: 320px;
height: 320px;
line-height: 320px;
text-align: center;
background-color: #cde;
}
.line {
/* 结合外层元素的相对定位 */
position: absolute;
}
.line:nth-child(1) {
top: 0;
left: 0;
width: 100%;
height: 3px;
/* 加上突变作用，方可形成拖尾作用 */
background: linear-gradient(90deg, transparent, orange);
animation: animate1 8s linear infinite;
}
/* 别离操控其上下左右的定位距离，从而形成线条跟从作用 */
@keyframes animate1 {
0% {
left: -100%;
}
50%,
100% {
left: 100%;
}
}
.line:nth-child(2) {
top: -100%;
right: 0;
width: 3px;
height: 100%;
background: linear-gradient(180deg, transparent, red);
animation: animate2 8s linear infinite;
/* 留意要加上延时触发动画作用，这样线条才会顺次触发 */
animation-delay: 2s;
}
@keyframes animate2 {
0% {
top: -100%;
}
50%,
100% {
top: 100%;
}
}
.line:nth-child(3) {
bottom: 0;
right: 0;
width: 100%;
background: linear-gradient(270deg, transparent, green);
animation: animate3 8s linear infinite;
animation-delay: 4s;
}
@keyframes animate3 {
0% {
right: -100%;
height: 3px;
}
50%,
100% {
height: 2px;
right: 100%;
}
}
.line:nth-child(4) {
bottom: -100%;
left: 0;
width: 3px;
height: 100%;
background: linear-gradient(360deg, transparent, #3a86ff);
animation: animate4 8s linear infinite;
animation-delay: 6s;
}
@keyframes animate4 {
0% {
bottom: -100%;
}
50%,
100% {
bottom: 100%;
}
}
</style>
</head>
<body>
<div class="mainbox">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<div class="content">线条盘绕</div>
</div>
</body>
</html>
9_鼠标悬浮开门关门作用
作用图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
box-sizing: border-box;
padding: 160px 0 0 240px;
}
/* 门容器款式 */
.doorWrap {
width: 320px;
height: 320px;
border: 1px solid #666;
perspective: 500px;
position: relative;
display: flex;
}
/* 左门右门的共有款式 */
.leftDoor,
.rightDoor {
width: 50%;
height: 100%;
background-color: rgb(194, 37, 37);
transition: 1.2s;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #333;
}
/* 设置旋转元素的基点，左边大门以左边为基准点旋转 */
.leftDoor {
transform-origin: left;
}
/* 设置旋转元素的基点，右边大门以右侧为基准点旋转 */
.rightDoor {
transform-origin: right;
}
/* 当鼠标悬浮的时分，设置开门的幅度，左门往左边开 */
.doorWrap:hover .leftDoor {
transform: rotateY(-130deg);
}
/* 右门往右侧开 */
.doorWrap:hover .rightDoor {
transform: rotateY(130deg);
}
/* 内容区的定位层级略微低一些 */
.content {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
background-color: #abf;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="doorWrap">
<div class="leftDoor">左门</div>
<div class="rightDoor">右门</div>
<div class="content">欢迎光临，客官里面请...</div>
</div>
</body>
</html>
10_吃豆人作用
作用图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.pacMan {
display: inline-block;
position: relative;
margin: 120px;
}
/* 运用伪元素创立吃豆人的眼睛 */
.pacMan::before {
content: '';
width: 0.4em;
height: 0.4em;
border-radius: 50%;
background-color: #333;
position: absolute;
top: 6px;
left: 21px;
z-index: 2000;
}
/* mouth1调配mouth2组成吃豆人张嘴闭嘴的动画 */
.mouth1 {
width: 0;
height: 0;
border: 25px solid #E1B204;
border-radius: 50%;
border-right-color: transparent;
animation: upup .32s 0s infinite;
position: relative;
z-index: 3;
}
@keyframes upup {
0% {
transform: rotate(270deg);
}
50% {
transform: rotate(1turn);
}
100% {
transform: rotate(270deg);
}
}
.mouth2 {
width: 0;
height: 0;
border: 25px solid #E1B204;
border-right-color: transparent;
border-radius: 25px;
margin-top: -50px;
animation: downdown .32s 0s infinite;
position: relative;
z-index: 3;
}
@keyframes downdown {
0% {
transform: rotate(90deg);
}
50% {
transform: rotate(0);
}
100% {
transform: rotate(90deg);
}
}
/* 豆子不断移动 */
.beanOne {
background-color: #E1B204;
border-radius: 50%;
width: 10px;
height: 10px;
position: absolute;
transform: translateY(-6px);
top: 25px;
left: 100px;
animation: beanAnimation 1s linear .52s infinite;
}
.beanTwo {
background-color: #E1B204;
border-radius: 50%;
width: 10px;
height: 10px;
position: absolute;
transform: translateY(-6px);
top: 25px;
left: 100px;
animation: beanAnimation 1s linear 1.1s infinite;
}
@keyframes beanAnimation {
75% {
opacity: .72;
}
100% {
transform: translate(-100px, -6px);
}
}
</style>
</head>
<body>
<div class="pacMan">
<div class="eye"></div>
<div class="mouth1"></div>
<div class="mouth2"></div>
<div class="beanOne"></div>
<div class="beanTwo"></div>
</div>
</body>
</html>
11_布景色彩活动作用
作用图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.bg {
margin: 60px;
width: 32%;
height: 48vh;
background: linear-gradient(-45deg, #dae, #f66, #3c9, #09f, #66f);
background-size: 200% 200%;
animation: gradient 8s ease infinite;
}
@keyframes gradient {
0% {
background-position: 0 12%;
}
50% {
background-position: 100% 100%;
}
100% {
background-position: 0 12%;
}
}
</style>
</head>
<body>
<div class="bg"></div>
</body>
</html>
12_小球转圈加载作用
作用图
代码
<!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">
<title>Document</title>
<style>
.wrap {
margin: 120px 0 0 240px;
width: 75px;
height: 75px;
position: relative;
/* transform-origin: 设置的作用调配边框看，作用更加明显 */
/* border: 1px solid #e9e9e9; */
}
.round {
position: absolute;
width: 13px;
height: 13px;
border-radius: 50%;
background-color: rgb(241, 141, 157);
/* 加上动画作用 */
animation: circleRound 2.8s ease infinite;
/* 设置旋转中心，调配.wrap的border看 */
transform-origin: 50% 75px;
}
/* 留意z-index层级联系，顺次递减 */
.round:nth-child(1) {
z-index: 7;
}
/* 留意动画拖延animation-delay播映，顺次递加 */
/* 至于小圆球则越来越小 */
.round:nth-child(2) {
height: 12px;
width: 12px;
background-color: rgb(199, 136, 185);
animation-delay: .2s;
z-index: 6;
}
.round:nth-child(3) {
height: 11px;
width: 11px;
background-color: rgb(153, 69, 223);
animation-delay: .4s;
z-index: 5;
}
.round:nth-child(4) {
height: 10px;
width: 10px;
background-color: rgb(69, 141, 223);
animation-delay: .6s;
z-index: 4;
}
.round:nth-child(5) {
height: 9px;
width: 9px;
background-color: rgb(69, 223, 203);
animation-delay: .8s;
z-index: 3;
}
.round:nth-child(6) {
height: 8px;
width: 8px;
background-color: rgb(100, 223, 69);
animation-delay: 1s;
z-index: 2;
}
.round:nth-child(7) {
height: 7px;
width: 7px;
background-color: rgb(223, 200, 69);
animation-delay: 1.2s;
z-index: 1;
}
@keyframes circleRound {
to {
transform: rotate(1turn);
}
}
</style>
</head>
<body>
<div class="wrap">
<div class="round"></div>
<div class="round"></div>
<div class="round"></div>
<div class="round"></div>
<div class="round"></div>
<div class="round"></div>
<div class="round"></div>
</div>
</body>
</html>
13_钟摆作用
作用图
代码
<!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">
<title>Document</title>
<style>
/* 画一条钟摆线条 */
.line {
margin: 24px 0 0 320px;
width: 6px;
height: 320px;
background: #baf;
border-radius: 8px;
/* 钟摆动画周期两秒、匀速运动、无限循环 */
animation: pendulum 3s linear infinite;
/* 旋转以上方中心为中心进行旋转，由于默认是中心中心旋转 */
transform-origin: top;
/* 留意由于钟摆的小球是运用伪元素画的，故这儿要加上定位 */
position: relative;
}
/* 运用伪元素画钟摆小球，这样在旋转的时分，小球就一致跟着钟摆线了 */
.line::after {
content: '';
width: 32px;
height: 32px;
border-radius: 50%;
background-color: #faa;
/* 伪元素调配定位方便调整小球的方位 */
position: absolute;
bottom: 0;
left: -12px;
}
/* 钟摆动画rotate旋转起来 */
@keyframes pendulum {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(45deg);
}
50% {
transform: rotate(0deg);
}
75% {
transform: rotate(-45deg);
}
100% {
transform: rotate(0deg);
}
}
</style>
</head>
<body>
<div class="line"></div>
</body>
</html>
14_文字烟雾消散作用
作用图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 主要是text-shadow和transform调配动画的巧妙运用 */
.wrap {
width: 600px;
height: 480px;
box-sizing: border-box;
padding: 120px;
background-color: #000;
color: transparent;
display: flex;
}
h3 {
text-shadow: 0 0 0 #fff;
animation: smoky 6s infinite;
}
@keyframes smoky {
60% {
text-shadow: 0 0 40px #fff;
}
100% {
text-shadow: 0 0 20px #fff;
/* 这儿是要点 */
transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skew(70deg) scale(1.5);
opacity: 0;
}
}
h3:nth-child(1) {
animation-delay: 1s;
}
h3:nth-child(2) {
animation-delay: 1.4s;
}
h3:nth-child(3) {
animation-delay: 1.8s;
}
h3:nth-child(4) {
animation-delay: 2.2s;
}
h3:nth-child(5) {
animation-delay: 2.6s;
}
</style>
</head>
<body>
<div class="wrap">
<h3>代码</h3>
<h3>修仙</h3>
<h3>之路</h3>
<h3>道阻</h3>
<h3>且长...</h3>
</div>
</body>
</html>
15_水平左右抖动作用
作用图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
box-sizing: border-box;
padding: 120px;
}
.target {
width: 48px;
height: 48px;
line-height: 48px;
text-align: center;
font-weight: bold;
color: red;
background: #baf;
transform-origin: bottom;
animation: shaking 1.2s ease-in-out infinite;
/* 初始暂停播映，后续经过js操控播映 */
animation-play-state: paused;
}
/* 经过translate3d的x轴移动去操控水平移动抖动作用 */
@keyframes shaking {
10%,
90% {
transform: translate3d(-1.2px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
70% {
transform: translate3d(-4.8px, 0, 0);
}
40%,
60% {
transform: translate3d(4.8px, 0, 0);
}
50% {
transform: translate3d(-4.8px, 0, 0);
}
}
</style>
</head>
<body>
<div class="target">^_^</div>
<br>
<button class="start">动画开始</button>
<button class="pause">动画暂停</button>
<script>
// js去设置animationPlayState特点值从而操控动画播映
let startBtn = document.querySelector('.start')
let pauseBtn = document.querySelector('.pause')
let target = document.querySelector('.target')
startBtn.onclick = () => {
target.style.animationPlayState = 'running'
}
pauseBtn.onclick = () => {
target.style.animationPlayState = 'paused'
}
</script>
</body>
</html>
16_垂直方向坠落弹跳作用
作用图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
box-sizing: border-box;
padding: 120px;
}
.target {
background: #666;
width: 108px;
height: 60px;
border-radius: 60px;
color: aliceblue;
font-weight: bolder;
line-height: 60px;
text-align: center;
}
.animationClass {
animation: 1.2s ease 0s infinite backwards bounce;
}
/* 主要是经过操控translateY的值来操作y轴的距离完成弹跳作用 */
@keyframes bounce {
0% {
transform: translateY(-64px);
animation-timing-function: ease-in;
opacity: 1;
}
24% {
opacity: 1;
}
40% {
transform: translateY(-32px);
animation-timing-function: ease-in;
}
62% {
transform: translateY(-16px);
animation-timing-function: ease-in;
}
82% {
transform: translateY(-8px);
animation-timing-function: ease-in;
}
92% {
transform: translateY(-4px);
animation-timing-function: ease-in;
}
25%,
55%,
75%,
90% {
transform: translateY(0);
animation-timing-function: ease-out;
}
100% {
transform: translateY(0);
animation-timing-function: ease-out;
opacity: 1;
}
}
</style>
</head>
<body>
<div class="target">O__O</div>
<br>
<button class="start">动画开始</button>
<button class="end">动画完毕</button>
<script>
let startBtn = document.querySelector('.start')
let endBtn = document.querySelector('.end')
let targetBox = document.querySelector('.target')
// 经过dom的classList的API去操控动画的开始和完毕(增加类移除类)
startBtn.onclick = () => {
targetBox.classList.add('animationClass')
}
endBtn.onclick = () => {
targetBox.classList.remove('animationClass')
}
</script>
</body>
</html>
17_仿figma加载中盒子转圈作用
作用图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
padding: 120px;
}
.borderDom {
position: relative;
width: 18px;
height: 10px;
border-radius: 10px;
border: 2px solid #333;
animation: oneAnimation 4s cubic-bezier(.12, 0, .39, 0) infinite;
}
/* 中心的线运用定位调整到中心方位 */
.middleLine {
position: absolute;
left: 8px;
width: 2px;
height: 10px;
background-color: #333;
animation: twoAnimation 4s cubic-bezier(.12, 0, .39, 0) infinite;
}
/* 外边框运用X轴方向的缩放 */
@keyframes oneAnimation {
0% {
transform: scaleX(.5);
}
5% {
transform: scaleX(1);
}
10% {
transform: scaleX(.5);
}
15% {
transform: scaleX(1);
}
20% {
transform: scaleX(.5);
}
25% {
transform: scaleX(1);
}
75% {
transform: scaleX(1);
}
80% {
transform: scaleX(.5);
}
85% {
transform: scaleX(1);
}
90% {
transform: scaleX(.5);
}
95% {
transform: scaleX(1);
}
100% {
transform: scaleX(.5);
}
}
/* 中心线运用translate移动到达作用 */
@keyframes twoAnimation {
0% {
transform: translate(-9px);
}
5% {
transform: translate(0);
}
10% {
transform: translate(9px);
}
10.1% {
transform: translate(-9px);
}
15% {
transform: translate(0);
}
20% {
transform: translate(9px);
}
20.1% {
transform: translate(-9px);
}
25% {
transform: translate(0);
}
75% {
transform: translate(0);
}
80% {
transform: translate(9px);
}
80.1% {
transform: translate(-9px);
}
85% {
transform: translate(0);
}
90% {
transform: translate(9px);
}
90.1% {
transform: translate(-9px);
}
95% {
transform: translate(0);
}
100% {
transform: translate(9px);
}
}
</style>
</head>
<body>
<div class="borderDom">
<div class="middleLine"></div>
</div>
</body>
</html>
18_文字横向伸展含糊淡入淡出作用
作用图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.enter {
margin-top: 120px;
text-align: center;
/* 贝塞尔曲线动画 */
animation: enterenter 1.8s infinite cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes enterenter {
0% {
/* 加上文字间距 */
letter-spacing: 1em;
/* Z轴变换 */
transform: translateZ(300px);
/* filter: blur(); 像素含糊作用 */
filter: blur(12px);
/* 通明度也要改变 */
opacity: 0;
}
100% {
transform: translateZ(12px);
filter: blur(0);
opacity: 1;
}
}
.leave {
text-align: center;
animation: leaveleave 1.8s infinite cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes leaveleave {
0% {
transform: translateZ(0);
filter: blur(0.01);
}
100% {
letter-spacing: 1em;
transform: translateZ(300px);
filter: blur(12px) opacity(0%);
}
}
</style>
</head>
<body>
<h2 class="enter">早上好，程序猿兽们</h2>
<br>
<h2 class="leave">晚上好，程序猿兽们</h2>
</body>
</html>
19_四个方向盒子旋转移动进入作用
作用图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
overflow: hidden;
}
.target1 {
width: 72px;
height: 72px;
background-color: #baf;
/* 左边翻滚旋转进入 */
animation: leftEnter 1.5s infinite ease-out both;
position: absolute;
left: 45%;
top: 30%;
}
@keyframes leftEnter {
0% {
transform: translateX(-1000px) rotate(-540deg);
opacity: 0;
}
100% {
transform: translateX(0) rotate(0deg);
opacity: 1;
}
}
.target2 {
width: 72px;
height: 72px;
background-color: #abf;
/* 右侧翻滚旋转进入 */
animation: rightEnter 1.5s infinite ease-out both;
position: absolute;
left: 45%;
top: 40%;
}
@keyframes rightEnter {
0% {
transform: translateX(1000px) rotate(540deg);
opacity: 0;
}
100% {
transform: translateX(0) rotate(0deg);
opacity: 1;
}
}
.target3 {
width: 72px;
height: 72px;
background-color: pink;
/* 上方翻滚旋转进入 */
animation: topEnter 1.5s infinite ease-out both;
position: absolute;
left: 45%;
top: 50%;
}
@keyframes topEnter {
0% {
transform: translateY(-800px) rotate(540deg);
opacity: 0;
}
100% {
transform: translateX(0) rotate(0deg);
opacity: 1;
}
}
.target4 {
width: 72px;
height: 72px;
background-color: rgb(211, 140, 233);
/* 下方翻滚旋转进入 */
animation: bottomEnter 1.5s infinite ease-out both;
position: absolute;
left: 45%;
top: 20%;
}
@keyframes bottomEnter {
0% {
transform: translateY(1200px) rotate(540deg);
opacity: 0;
}
100% {
transform: translateX(0) rotate(0deg);
opacity: 1;
}
}
</style>
</head>
<body>
<div class="target1"></div>
<div class="target2"></div>
<div class="target3"></div>
<div class="target4"></div>
</body>
</html>
20_按钮点击波纹作用
作用图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
padding: 120px;
background-color: #999;
}
button {
margin: 8px;
width: 120px;
height: 48px;
background-color: #faa;
color: #fff;
border: none;
border-radius: 12px;
cursor: pointer;
/* 敞开定位是为了给波纹动画元素运用 */
position: relative;
/* 必须加上超出躲藏，注释掉今后作用很明显 */
overflow: hidden;
/* hover过渡一下 */
transition: all 0.3s;
}
button:hover {
box-shadow: 0 0 18px rgba(255, 255, 255, 0.36);
}
.btn2 {
background-color: violet;
}
.btn3 {
background-color: rgb(231, 116, 164);
}
.btn4 {
background-color: rgb(116, 204, 231);
}
.btn5 {
background-color: rgb(54, 134, 58);
}
.btn6 {
background-color: rgb(224, 126, 45);
}
.ripple {
position: absolute;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.48);
transform: scale(0);
animation: ripple 240ms linear;
}
@keyframes ripple {
to {
transform: scale(2.4);
opacity: 0.12;
}
}
</style>
</head>
<body>
<button class="targetBtn">点击波纹作用</button>
<button class="targetBtn btn2">点击波纹作用</button>
<button class="targetBtn btn3">点击波纹作用</button>
<button class="targetBtn btn4">点击波纹作用</button>
<button class="targetBtn btn5">点击波纹作用</button>
<button class="targetBtn btn6">点击波纹作用</button>
<script>
// 创立波纹函数，只需一点击就创立一个波纹
function createRipple(event) {
const button = event.target; // 获取事情目标button按钮
const circle = document.createElement("div"); // 创立一个div标签用于表示一个波纹（波纹就是一个圆）
const diameter = Math.max(button.clientWidth, button.clientHeight); // 取dom宽度和高度中的一个最大值，以最大值做直径
const radius = diameter / 2; // 直径除以2即为半径 （若不理解这几行，可注释掉overflow: hidden;再点击按钮即明白）
circle.style.width = circle.style.height = `${diameter}px`; // 以直径作为宽高
circle.style.left = `${event.clientX - button.offsetLeft - radius}px`; // 设置定位的方位
circle.style.top = `${event.clientY - button.offsetTop - radius}px`;
circle.classList.add("ripple"); // classList加上类名既有动画作用了
// 若有这个波纹动画圆dom今后，就移除这个dom再追加。若没有直接追加
let ripple = button.querySelector('.ripple')
if (ripple) {
ripple.remove();
}
button.appendChild(circle); // 将这个波纹动画圆作为子元素追加到父元素button上（这样父元素相对定位，子元素绝对定位就收效了）
}
// 1. 获取将要点击的按钮dom数组
const targetBtnArr = document.querySelectorAll('.targetBtn')
// 2. 给数组中的每一项，即要点击的按钮dom绑定点击监听事情
for (let i = 0; i < targetBtnArr.length; i++) {
let targetBtn = targetBtnArr[i]
targetBtn.addEventListener("click", createRipple);
}
</script>
</body>
</html>
21_鼠标悬浮按钮边框线条动画作用
作用图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background: #faa;
padding: 120px;
}
button {
display: inline-block;
border: none;
color: #fff;
cursor: pointer;
margin: 12px 18px;
background: rgb(201, 108, 234);
position: relative;
}
span {
display: block;
padding: 18px 60px
}
button::before,
button::after {
content: "";
width: 0;
height: 2px;
position: absolute;
transition: all .2s linear;
background: #fff
}
span::before,
span::after {
content: "";
width: 2px;
height: 0;
position: absolute;
transition: all .2s linear;
background: #fff
}
button:hover::before,
button:hover::after {
width: 100%
}
button:hover span::before,
button:hover span::after {
height: 100%
}
.btn1::before,
.btn1::after {
transition-delay: .2s
}
.btn1 span::before,
.btn1 span::after {
transition-delay: 0s
}
.btn1::before {
right: 0;
top: 0
}
.btn1::after {
left: 0;
bottom: 0
}
.btn1 span::before {
left: 0;
top: 0
}
.btn1 span::after {
right: 0;
bottom: 0
}
.btn1:hover::before,
.btn1:hover::after {
transition-delay: 0s
}
.btn1:hover span::before,
.btn1:hover span::after {
transition-delay: .2s
}
.btn2::before,
.btn2::after {
transition-delay: 0s
}
.btn2 span::before,
.btn2 span::after {
transition-delay: .2s
}
.btn2::before {
right: 0;
top: 0
}
.btn2::after {
left: 0;
bottom: 0
}
.btn2 span::before {
left: 0;
top: 0
}
.btn2 span::after {
right: 0;
bottom: 0
}
.btn2:hover::before,
.btn2:hover::after {
transition-delay: .2s
}
.btn2:hover span::before,
.btn2:hover span::after {
transition-delay: 0s
}
.btn3::after {
left: 0;
bottom: 0;
transition-delay: .6s
}
.btn3 span::after {
transition-delay: .4s;
right: 0;
bottom: 0
}
.btn3::before {
right: 0;
top: 0;
transition-delay: .2s
}
.btn3 span::before {
transition-delay: 0s;
left: 0;
top: 0
}
.btn3:hover::after {
transition-delay: 0s
}
.btn3:hover span::after {
transition-delay: .2s
}
.btn3:hover::before {
transition-delay: .4s
}
.btn3:hover span::before {
transition-delay: .6s
}
.btn4::after {
right: 0;
bottom: 0;
transition-duration: .4s
}
.btn4 span::after {
right: 0;
bottom: 0;
transition-duration: .4s
}
.btn4::before {
left: 0;
top: 0;
transition-duration: .4s
}
.btn4 span::before {
left: 0;
top: 0;
transition-duration: .4s
}
.btn5::after {
left: 0;
bottom: 0;
transition-duration: .4s
}
.btn5 span::after {
right: 0;
top: 0;
transition-duration: .4s
}
.btn5::before {
right: 0;
top: 0;
transition-duration: .4s
}
.btn5 span::before {
left: 0;
bottom: 0;
transition-duration: .4s
}
.btn6::before {
left: 50%;
top: 0;
transition-duration: .4s
}
.btn6::after {
left: 50%;
bottom: 0;
transition-duration: .4s
}
.btn6 span::before {
left: 0;
top: 50%;
transition-duration: .4s
}
.btn6 span::after {
right: 0;
top: 50%;
transition-duration: .4s
}
.btn6:hover::before,
.btn6:hover::after {
left: 0
}
.btn6:hover span::before,
.btn6:hover span::after {
top: 0
}
</style>
</head>
<body>
<main>
<button class="btn1"><span>悬浮上左、下右</span></button>
<button class="btn2"><span>悬浮右上、左下</span></button>
<button class="btn3"><span>悬浮之一圈线条</span></button>
<button class="btn4"><span>悬浮右下角和左上角两个方向延伸</span></button>
<button class="btn5"><span>悬浮右上角和左下角两个方向延伸</span></button>
<button class="btn6"><span>悬浮四个方向中心点往两端延伸</span></button>
</main>
</body>
</html>
22_灯泡开关作用
作用图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* :root大局css变量调配var()函数运用 */
:root {
--light-color: #fff
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
}
.container {
width: 100%;
height: 100%;
display: flex;
}
.light-container {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #333;
}
.light {
position: absolute;
width: 80px;
height: 80px;
border-radius: 50%;
background-color: var(--light-color);
transition: all 0.24s;
}
.light::before {
content: '';
position: absolute;
width: 35px;
height: 80px;
border-radius: 10px;
background: var(--light-color);
left: 27.5%;
top: -50px;
border-top: 30px solid black;
}
.light span:nth-child(1) {
position: absolute;
width: 30px;
height: 30px;
background: transparent;
box-shadow: 20px 20px 0 10px var(--light-color);
border-bottom-right-radius: 40px;
left: -4px;
top: -16px;
transform: rotate(342deg);
}
.light span:nth-child(2) {
position: absolute;
width: 30px;
height: 30px;
background: transparent;
box-shadow: -20px 20px 0 10px var(--light-color);
border-bottom-left-radius: 40px;
right: -3.4px;
top: -16px;
transform: rotate(16deg);
}
.wire {
width: 4px;
height: 400px;
background-color: #8f8e8e;
top: -18%;
position: absolute;
transition: all 0.24s;
}
.light::after {
position: absolute;
content: '';
width: 140px;
height: 140px;
background: var(--light-color);
border-radius: 50%;
top: 50%;
left: 0;
filter: blur(40px);
transform: translate(-18%, -40px);
box-shadow: 0 0 10px var(--light-color),
0 0 30px var(--light-color),
0 0 60px var(--light-color),
0 0 120px var(--light-color),
0 0 200px var(--light-color),
;
}
button {
position: absolute;
bottom: 240px;
right: 240px;
width: 120px;
height: 36px;
}
</style>
</head>
<body>
<div class="container">
<div class="light-container">
<div class="wire"></div>
<div class="light">
<span></span>
<span></span>
</div>
</div>
</div>
<button>开关按钮</button>
<script>
let switchOn = true
let btn = document.querySelector('button')
let light = document.querySelector('.light')
let wire = document.querySelector('.wire')
btn.onclick = () => {
switchOn = !switchOn
if (switchOn) {
document.documentElement.style.setProperty('--light-color', '#fff')
wire.style.background = '#8f8e8e'
document.styleSheets[0].addRule('.light::before', 'border-top: 30px solid #000');
} else {
document.documentElement.style.setProperty('--light-color', '#333')
wire.style.background = '#333'
document.styleSheets[0].addRule('.light::before', 'border-top: 30px solid #333');
}
}
// 运用js动态给伪元素设置款式，参见文章：http://t.zoukankan.com/kunmomo-p-12358005.html
// 别的款式表也是一个目标，也能够打印 document.querySelector('style') 可拜访其上的css特点
</script>
</body>
</html>
23_鼠标悬浮手风琴款式展开图标作用图
作用图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
padding: 180px;
background-color: #ddd;
}
.item {
box-sizing: border-box;
display: inline-flex;
align-items: center;
height: 60px;
/* 手风琴作用就是鼠标悬浮宽度过渡 */
width: 60px;
margin: 4px 8px;
/* 超出躲藏，由于要把伪元素文字遮挡住 */
overflow: hidden;
background: #fff;
border-radius: 30px;
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.24);
transition: all 0.5s;
}
.item:hover {
width: 180px;
border: none;
}
/* 悬浮加布景色 */
.first:hover .icon {
background-color: pink;
}
.second:hover .icon {
background-color: #e9e9e9;
}
.third:hover .icon {
background-color: pink;
}
.fouth:hover .icon {
background-color: #e9e9e9;
}
.icon {
width: 60px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 30px;
font-size: 28px;
position: relative;
transition: all 0.5s;
/* 实在元素阻挠鼠标事情，伪元素自动鼠标事情 */
pointer-events: none;
}
/* 经过伪元素增加内容介绍文字 */
.item:nth-child(1) .icon::after {
position: absolute;
content: '我是红桃';
/* 宽度跟着内容自适应 */
width: fit-content;
/* 文字不换行 */
word-break: keep-all;
/* 设置伪元素文字大小为中等大小 */
font-size: medium;
left: 72px;
/* 实在元素阻挠鼠标事情，伪元素自动鼠标事情 */
pointer-events: auto;
cursor: pointer;
}
.item:nth-child(2) .icon::after {
position: absolute;
content: '我是黑桃';
width: fit-content;
word-break: keep-all;
font-size: medium;
left: 72px;
pointer-events: auto;
cursor: pointer;
}
.item:nth-child(3) .icon::after {
position: absolute;
content: '我是方块';
width: fit-content;
word-break: keep-all;
font-size: medium;
left: 72px;
pointer-events: auto;
cursor: pointer;
}
.item:nth-child(4) .icon::after {
position: absolute;
content: '我是梅花';
width: fit-content;
word-break: keep-all;
font-size: medium;
left: 72px;
pointer-events: auto;
cursor: pointer;
}
/* 鼠标悬浮加文字下划线（给伪元素增加hover款式） */
.icon:hover::after {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="item first">
<div onclick="clickAfter('红桃')" style="color: #DD3B32;" class="icon">♥</div>
</div>
<div class="item second">
<div onclick="clickAfter('黑桃')" style="color: #1A1A1A;" class="icon">♠</div>
</div>
<div class="item third">
<div onclick="clickAfter('方块')" style="color: #FB1C17;" class="icon">♦</div>
</div>
<div class="item fouth">
<div onclick="clickAfter('梅花')" style="color: #090B0A;" class="icon">♣</div>
</div>
<script>
/**
* 留意伪元素也能够绑定事情
* 只需：实在元素 pointer-events: none;
* 伪元素 pointer-events: auto;
* 参见文章：https://www.cnblogs.com/letgofishing/p/15987190.html
* */
function clickAfter(who) {
console.log(who);
}
</script>
</body>
</html>
24_文字按顺序弹跳作用
作用图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.dance {
display: flex;
align-items: center;
justify-content: center;
font-size: 6rem;
font-weight: bold;
white-space: nowrap;
cursor: pointer;
margin-top: 120px;
}
.word {
/* alternate 轮番反向播映 A--B--A--B... 必须要加 */
animation: dance 0.72s cubic-bezier(0.05, 0, 0.2, 1) infinite alternate;
display: inline-block;
transform: translate3d(0, 0, 0);
font-size: 6rem;
text-decoration: underline;
color: #75b9ff;
margin-right: 1px;
}
.word:nth-child(1) {
animation-delay: 0s;
}
.word:nth-child(2) {
animation-delay: 0.0333333333s;
}
.word:nth-child(3) {
animation-delay: 0.1333333333s;
}
.word:nth-child(4) {
animation-delay: 0.2333333333s;
}
.word:nth-child(5) {
animation-delay: 0.3333333333s;
}
.word:nth-child(6) {
animation-delay: 0.4333333333s;
}
.word:nth-child(7) {
animation-delay: 0.5333333333s;
}
.word:nth-child(8) {
animation-delay: 0.6333333333s;
}
.word:nth-child(9) {
animation-delay: 0.7333333333s;
}
.word:nth-child(10) {
animation-delay: 0.8333333333s;
}
.word:nth-child(11) {
animation-delay: 0.9333333333s;
}
@keyframes dance {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(0, -0.54em, 0);
}
}
</style>
</head>
<body>
<a class="dance" href="http://ashuai.work/welcome" target="_blank">
<span class="word">a</span>
<span class="word">s</span>
<span class="word">h</span>
<span class="word">u</span>
<span class="word">a</span>
<span class="word">i</span>
<span class="word">.</span>
<span class="word">w</span>
<span class="word">o</span>
<span class="word">r</span>
<span class="word">k</span>
</a>
</body>
</html>
25_突变进度条
作用图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: #eee;
padding: 120px;
}
.progress {
width: 240px;
height: 15px;
border-radius: 20px;
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.22));
background-color: #fff;
z-index: 1;
}
/* 运用伪元素制作翻滚条 */
.progress::after {
content: '';
position: absolute;
left: 0;
right: 90%;
bottom: 0;
top: 0;
/* 布景色线性突变 */
background: linear-gradient(to right, #7abcff, 0%, #00bcd4 44%, #2196f3 100%);
border-radius: 20px;
box-shadow: 0 14px 28px rgba(33, 150, 243, 0), 0 10px 10px rgba(9, 188, 215, 0.08);
animation: loading 4s linear infinite;
/* 滤镜设置色调旋转 */
filter: hue-rotate(90deg);
}
@keyframes loading {
70% {
filter: hue-rotate(0);
}
100% {
right: 0;
filter: hue-rotate(-90deg);
}
}
</style>
</head>
<body>
<div class="progress"></div>
</body>
</html>
26_文字含糊顺次呈现
作用图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
padding: 120px;
background-color: #666;
}
.box {
font-size: 48px;
/* 调整一下对比度，对比度越高，越“刺眼” */
filter: contrast(24);
position: relative;
color: #eee;
user-select: none;
}
.word {
filter: blur(0);
animation: changeWord 6s infinite ease-in-out;
position: absolute;
left: 0;
top: 0;
}
.word1 {
animation-delay: -1.5s;
}
.word2 {
animation-delay: -3s;
}
.word3 {
animation-delay: -4.5s;
}
.word4 {
animation-delay: -6s;
}
@keyframes changeWord {
0%,
10%,
100% {
filter: blur(0);
opacity: 1;
}
70%,
80% {
filter: blur(64px);
opacity: 0;
}
}
</style>
</head>
<body>
<!--
思路：
1. 将文字都定位在一块（叠在一同）
2. 经过动画延迟顺次进场
3. 经过含糊和通明度做“转场切换”
-->
<div class="box">
<div class="word word1">上午看需求文档</div>
<div class="word word2">下午静心写代码</div>
<div class="word word3">晚上犯难改bug</div>
<div class="word word4">半夜失眠睡不着</div>
</div>
</body>
</html>
27_鼠标悬浮探照灯作用
作用图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
box-sizing: border-box;
padding: 120px;
background-color: #555;
}
.searchlight {
width: 400px;
height: 200px;
line-height: 200px;
text-align: center;
border: 1px solid #ccc;
position: relative;
/* 躲藏额定的光晕作用，注释掉作用明显 */
overflow: hidden;
cursor: cell;
}
.searchlight span {
position: relative;
color: #555;
font-weight: 700;
}
.searchlight::before {
position: absolute;
content: '';
/* top: 50%;
left: 50%; */
left: var(--x);
top: var(--y);
/* 居中很重要 */
transform: translate(-50%, -50%);
/* 初始为0，鼠标悬浮hover今后，宽度更改增加 */
width: 0;
height: 0;
/* 好用的css突变网站：https://cssgradient.io/ */
background: radial-gradient(circle closest-side, rgba(255, 255, 255, 0.72) 4%, transparent);
opacity: 0;
transition: all 0.5s;
}
/* 某个元素悬浮时，其对应的伪元素的款式对应改变 */
.searchlight:hover::before {
opacity: 1;
width: 400%;
height: 200%;
}
</style>
</head>
<body>
<!--
鼠标移动探照灯作用思路：
1. 布景色和文字色彩一致（暗色系），这样就看不出来了
2. 经过伪元素写一个探照光晕作用（调配css突变）
3. 调配鼠标移动事情去更改探照光晕的方位
4. 加点过渡动画
5. 文字的层级要留意一下
-->
<div class="searchlight"><span> 哎呀，你干嘛呦...</span></div>
<script>
let searchlight = document.querySelector('.searchlight')
searchlight.addEventListener('mousemove', (e) => {
let x = e.offsetX
let y = e.offsetY
/**
* 留意，css变量是.searchlight的伪元素在运用
* 但是我们能够直接给.searchlight设置
* 伪元素能够运用其对应真实dom元素的css变量
* */
searchlight.style.setProperty('--x', x + 'px')
searchlight.style.setProperty('--y', y + 'px')
})
</script>
</body>
</html>
28_文字光标来回刷作用
作用图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #666;
width: 100%;
height: 100vh;
text-align: center;
/* 弹性盒 */
display: flex;
}
.content {
font-size: 72px;
color: #fff;
font-weight: 700;
position: relative;
margin: auto;
}
.content::before {
content: "代码修仙之路 aoligei!";
color: #baf;
width: 72px;
border-right: 1px solid #baf;
/* 不允许换行且超出躲藏 */
overflow: hidden;
white-space: nowrap;
/* 定位并设置动画 */
position: absolute;
left: 0;
top: 0;
animation: donghua 2.4s ease infinite;
/* 让动画来回运动 */
animation-direction: alternate;
/* 伪元素文字增加滤镜发光作用 */
filter: drop-shadow(0 0 72px #baf);
}
@keyframes donghua {
0% {
width: 0;
}
100% {
width: 100%;
}
}
</style>
</head>
<body>
<div class="content">
代码修仙之路 aoligei!
</div>
<!--
思路：
dom元素中是一份文字，然后再运用伪元素再创立相同的文字
初始情况下只展现一个文字，剩下的躲藏，经过边框的方式创立
一个“光标刷子”，然后加上动画，并增加光影作用即可
-->
</body>
</html>
29_输入框校验不经过左右抖动作用
作用图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: #666;
}
.inputBox {
margin: 120px;
}
/* 左右移动，即为抖动 */
@keyframes donghua {
0% {
transform: translateX(0);
}
25% {
transform: translateX(0.5rem);
}
50% {
transform: translateX(0);
}
75% {
transform: translateX(-0.5rem);
}
100% {
transform: translateX(0);
}
}
input {
outline: none;
}
/* :invalid 选择器用于在表单元素中的值是不合法时设置指定款式（校验不经过指定款式） */
input:invalid {
color: red;
animation: donghua 0.2s ease-in-out 2;
}
</style>
</head>
<body>
<div class="inputBox">
<!-- pattern 特点可经过设置正则去验证输入框的字段 -->
<input type="text" placeholder="请输入数字" pattern="[0-9]*">
</div>
<!--
思路：
当校验不经过期input:invalid时，触发动画，动画操控输入框左右的方位
来回水平移动几次，留意原生js标签的pattern特点
别的，经过这个思路，能够进一步将这个作用封装成自定义指令哦
-->
</body>
</html>
30_文本逐字展现作用
作用图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
background-color: #baf;
font-size: 24px;
box-sizing: border-box;
padding: 12px;
}
</style>
</head>
<body>
<p></p>
<script>
let str = `先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。
诚宜倒闭圣听，以光先帝遗德，恢弘志士之气，不宜自暴自弃，引喻失义，以塞忠谏之路也。宫中府中，俱为一体；陟罚臧否，不宜异同。
若有违法乱纪及为忠善者，宜付有司论其刑赏，以昭陛下黎明之理，不宜偏私，使内外异法也。
侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。
将军向宠，性行淑均，通畅军事，试用于昔日，先帝称之曰能，是以众议举宠为督。愚以为营中之事，悉以咨之，必能使行阵友善，优劣得所。
`
let i = 0
let pNode = document.querySelector('p')
/**
* requestAnimationFrame版本
* */
function fn() {
if (i < str.length - 1) {
pNode.innerHTML = pNode.innerHTML + str[i]
i = i + 1
window.requestAnimationFrame(fn)
}
}
window.requestAnimationFrame(fn)
/**
* setInterval版本
* */
// let timer = setInterval(() => {
// if (i < str.length - 1) {
// pNode.innerHTML = pNode.innerHTML + str[i]
// i = i + 1
// } else {
// clearInterval(timer)
// }
// }, 17);
</script>
</body>
</html>
