使用CSS3动画做了四个小案例
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
目录
😊作者简介：一名大一在校生，web前端开发专业
🤡 个人主页：几何小超
🐼座右铭：懒惰受到的惩罚不仅仅是自己的失败，还有别人的成功。
🎅**学习目标: 坚持每一次的学习打卡，学好前端
1.背景动画
2.逼真的水滴动图
1.背景动画
先来给大家展示一下效果视频
这里可以说一下电脑自带的录屏快捷键是win+alt+r
这块我就直接加图片了，不过你可以尝试运行一下就可以看到效果
下面我们来介绍一下如何让背景来动起来
架构的话不需要写或者为了跟我一样可以写一个h1试一试
<h1>动画背景(Animate Background)</h1>
然后搭建css的内嵌样式
第一步为了让我们文字来移动到我们正中间可以舍弃之前的套路布局来使用flex布局
display: flex;
justify-content: center;
align-items: center;
CSS 弹性盒子布局是 CSS 的模块之一，定义了一种针对用户界面设计而优化的 CSS 盒子模型。在弹性布局模型中，弹性容器的子元素可以在任何方向上排布，也可以“弹性伸缩”其尺寸，既可以增加尺寸以填满未使用的空间，也可以收缩尺寸以避免父元素溢出。子元素的水平对齐和垂直对齐都能很方便的进行操控。通过嵌套这些框（水平框在垂直框内，或垂直框在水平框内）可以在两个维度上构建布局。
然后我们可以来设置她的高可以使用vh，(是指可视窗口的高度。假如高度是1200px的话。那10vh就是120px)
我这块来使用这个设置一下她的可视窗口的高度和一些基本的样式
height: 200vh;
font-size: 30px;
color: #fff;
background-image: -webkit-linear-
gradient(125deg,#2c3e50,#27ae60,#2980b9,#e74c3c,#8e44ad);
background-size: 400%;background-size：400%是指放大四百倍这样的话会跟着游览器一起放大这个倍数，为之后背景动画提供基础
下一步我们就来添加动画效果
@keyframes bgmove{
from{
background-position: 0% 50%;
}
50%{
background-position: 100% 50%;
}
to{
background-position: 0% 50%;
}
}改变他的路径位置产生动画效果
然后我们只需要在谁作动画的身上来去添加这么一个属性
animation: bgmove 20s infinite;
第一个是名字，第二个是持续的时间 第三个是无线的循环动画
下面演示全代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
display: flex;
justify-content: center;
align-items: center;
height: 200vh;
font-size: 30px;
color: #fff;
background-image: -webkit-linear-gradient(125deg,#2c3e50,#27ae60,#2980b9,#e74c3c,#8e44ad);
background-size: 400%;
animation: bgmove 20s infinite;
}
@keyframes bgmove{
from{
background-position: 0% 50%;
}
50%{
background-position: 100% 50%;
}
to{
background-position: 0% 50%;
}
}
</style>
</head>
<body>
<h1>动画背景(Animate Background)</h1>
</body>
</html>2.逼真的水滴动图
接下来我们就一起来制作这个动画
首先我先推荐二个网站
Palettes | Flat UI Colors 🎨 280 handpicked colors ready for COPY & PASTE这是一款调色板的工具，里面有很多类型的风格的样式版
花式边框半径生成器 (9elements.github.io)：可以是可以自由调节边框的网址，调节完成复制下来就行
首先架构方面我们就直接写一个div给类名water就行
<div class="water"></div>
之后我们在清除一下默认边距
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}box-sizing是css3盒子模型，加了这个盒子内边距是算在里面计算的，就不会掉下去之类的了，总之非常好用
然后呢还是给我们的body添加视口宽度和高度，我这里就给个一百吧
body{
width: 100vw;
height: 100vh;
display: flex;
background-color: #00a8ff;
justify-content: center;
}这里也是使用我们的弹性布局，让我们的盒子在中间显示
然后重点来了，我们需要去调节一下水滴的阴影效果来实现立体感
.water{
margin-top: 200px;
width: 300px;
height: 300px;
border: 1px solid #000;
border-radius: 72% 28% 64% 36% / 12% 17% 83% 88%;
box-shadow: inset 10px 20px 30px rgba(0,0,0,0.5),
10px 10px 20px rgba(0,0,0,0.3),
15px 15px 30px rgba(0,0,0,0.05),
inset -10px -10px 15px rgba(255,255,255,0.8);
}box-shadow：
box-shadow: none | inset（可选值，不设置，为外投影，设置，为内投影） x-offset（阴影水平偏移量，正方向为right） y-offset（阴影垂直偏移量，正方向为bottom） blur-radius（阴影模糊半径，为正，0为无模糊效果，值越大，越模糊） spread-radius（阴影扩展半径，可正可负） color
属性值描述:
1.阴影类型：此参数可选，默认的投影方式是外阴影；如果取其唯一值“inset”,就是将外阴影变成内阴影
2.X-offset:是指阴影水平偏移量,其值可正可负，正值，则阴影在对象的右边，负值，阴影在对象的左边
3. Y-offset:是指阴影的垂直偏移量，其值也可以是正负值，正值，阴影在对象的底部，负值时，阴影在对象的顶部
4.阴影模糊半径：此参数是可选，只能为正值，如果其值为0时，表示阴影不具有模糊效果，值越大阴影的边缘就越模糊
5. 阴影扩展半径：此参数可选，其值可为正负值，正值，则整个阴影都延展扩大，反之，则缩小
6.阴影颜色：此参数可选，不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样，特别是在webkit内核下的safari和chrome浏览器将无色，也就是透明，建议不要省略此参数。
注：多层阴影，最内层优先级最高，之后依次降低。使用逗号“，”隔开。
然后呢为了更体现我们的感觉可以往里面使用伪元素来添加两个不同的水滴
.water::after{
content: '';
width: 20px;
height: 20px;
position: absolute;
top: 240px;
left: 47%;
background-color:rgba(255,255,255,0.8);
border-radius: 9% 91% 35% 65% / 51% 17% 83% 49%;
}
.water::before{
content: '';
width: 10px;
height: 10px;
position: absolute;
top: 230px;
left: 45%;
background-color:rgba(255,255,255,0.8);
border-radius: 53% 47% 46% 54% / 99% 0% 100% 1% ;
}这块的边框我是自己在软件上面拉好后直接复制下来，你们也可以自己去实现自己喜欢的效果
然后就是动画效果，改变他的边框效果即可，然后在把动画加到water里面去
@keyframes move{
25%{
border-radius: 11% 89% 65% 35% / 64% 32% 68% 36% ;
}
50%{
border-radius: 60% 40% 65% 35% / 64% 32% 68% 36%;
}
to{
border-radius: 73% 27% 65% 35% / 64% 67% 33% 36%;
}
}下面是源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100vw;
height: 100vh;
display: flex;
background-color: #00a8ff;
justify-content: center;
}
.water{
margin-top: 200px;
width: 300px;
height: 300px;
border: 1px solid #000;
border-radius: 72% 28% 64% 36% / 12% 17% 83% 88%;
box-shadow: inset 10px 20px 30px rgba(0,0,0,0.5),
10px 10px 20px rgba(0,0,0,0.3),
15px 15px 30px rgba(0,0,0,0.05),
inset -10px -10px 15px rgba(255,255,255,0.8);
animation: move 3s linear infinite alternate;
}
.water::after{
content: '';
width: 20px;
height: 20px;
position: absolute;
top: 240px;
left: 47%;
background-color:rgba(255,255,255,0.8);
border-radius: 9% 91% 35% 65% / 51% 17% 83% 49%;
}
.water::before{
content: '';
width: 10px;
height: 10px;
position: absolute;
top: 230px;
left: 45%;
background-color:rgba(255,255,255,0.8);
border-radius: 53% 47% 46% 54% / 99% 0% 100% 1% ;
}
@keyframes move{
25%{
border-radius: 11% 89% 65% 35% / 64% 32% 68% 36% ;
}
50%{
border-radius: 60% 40% 65% 35% / 64% 32% 68% 36%;
}
to{
border-radius: 73% 27% 65% 35% / 64% 67% 33% 36%;
}
}
</style>
</head>
<body>
<div class="water"></div>
</body>
</html>有兴趣的小伙伴可以自己试试看，下一章节我在来介绍好玩的css3动画模型一起分享
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |