CSS动画的毕业设计
CSS动画的毕业设计
| 用CSS动画写一个七龙珠，据说善良的程序员可以看到龙神，并许愿成功 |
|---|
动画的基本属性和参数
W3C的说法过于笼统，比较难以理解。大家可以简单的记忆为：
我 @keyframes 一个动画，动画的名字叫 play,现在我想让谁动，就把play交给谁。
我把play递给了img，img伸出双手接住了我的play，animation 就是img的双手。
img接过play以后，想了一会儿(延迟)，甩了一下，产生了速度(ease-in-out),他发疯似的一直甩(infinite),甩累了，不动了(forwards)
例如：
@keyframes darken {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
我定义了一个动画，让透明度由0变为1
animation: color 2s infinite;
我开始调用这个动画，效果如下:
可以看出动画十分突兀，喜欢美感的程序员会把from–to替换成百分比，如下：
0%{opacity: 0}
50%{opacity: 1}
100%{opacity: 0}
}
这样动画就柔和很多了
接下来让我们用刚刚学到的新知识做一个小案例吧
老样子，先给源码
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>七龙珠召唤神龙title>
<style>* {box-sizing: border-box;}html {height: 100%;background: #f4daab;}.overlay {position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 0;background: #000000;opacity: 0;}#animate:checked + label .overlay {animation: darken linear 1s 2.8s forwards;}img{position:fixed;top:-300px;left:0;right:0;margin:auto;z-index: 130;}#animate:checked+label+img{transform: translateY(400px);transition: all 1s 3s;}#animate {display: none;}body {height: 100%;display: flex;align-items: center;justify-content: center;overflow: hidden;background: #f4daab;}.beam {position: absolute;top: 50%;bottom: 50%;left: 50%;transform: translatex(-50%);width: 8%;background: #ffffff;z-index: 110;border-radius: 50% 50% 0 0;box-shadow: 0px 0px 35px 7px rgba(255, 245, 145, 0);}.beam:before {content: "";position: absolute;bottom: 0;left: 0;transform: translatey(50%);width: 100%;padding-top: 0;border-radius: 50%;background: #ffffff;opacity: 0;box-shadow: 0px 0px 35px 7px white;}#animate:checked + label .beam {animation: shoot-beam linear 0.3s 2.8s forwards, beam-pulse linear 0.1s 2.8s infinite;}#animate:checked + label .beam:before {animation: shoot-beam-base linear 0.1s 2.8s forwards;}.dragon-balls {width: 60px;height: 60px;transform: scale(1.5);}#animate:checked + label .dragon-balls {animation: zoom-out linear 0.3s 2.8s forwards;}.ball {cursor: pointer;position: absolute;display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;border-radius: 50%;z-index: 1;box-shadow: 0px 0px 0px 0px #fff591;}#animate:checked + label .ball {animation: outside-glow linear 0.1s infinite;}.ball:after {content: "";position: absolute;width: 100%;height: 100%;border-radius: 50%;background: linear-gradient(45deg, #fa391a 5%, #fe601a 20%, #f9ae5d 65%);z-index: 0;}.ball:before {content: "";bottom: -0.18em;right: 0.5em;position: absolute;width: 150%;height: 50%;background: linear-gradient(to right, rgba(252, 141, 45, 0) 0%, #fc8d2d 100%);border-radius: 20% 50% 50% 20%;opacity: 0.65;z-index: 0;}.ball .reflections {position: absolute;width: 100%;height: 100%;border-radius: 50%;overflow: hidden;z-index: 2;}.ball .reflection {position: absolute;border-radius: 50%;}.ball .reflection:nth-child(1) {width: 77%;height: 77%;top: -2%;right: -2%;opacity: 0.7;background: linear-gradient(45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 80%, white 100%);}.ball .reflection:nth-child(2) {width: 50%;height: 50%;top: 8%;right: 8%;opacity: 0.7;background: linear-gradient(45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.5) 80%, white 100%);}.stars {position: absolute;margin-top: -0.3em;margin-left: -0.1em;z-index: 1;}.star {position: absolute;display: inline-block;width: 0;height: 0;border-right: 0.3em solid transparent;border-bottom: 0.7em solid #fa391a;border-left: 0.3em solid transparent;/* Controlls the size of the stars. */font-size: 6px;}.star:before, .star:after {content: "";display: block;width: 0;height: 0;position: absolute;top: 0.6em;left: -1em;border-right: 1em solid transparent;border-bottom: 0.7em solid #fa391a;border-left: 1em solid transparent;transform: rotate(-35deg);}.star:after {transform: rotate(35deg);}.ball.one {left: -5em;top: 0;z-index: 6;transform: scale(0.98);}.ball.two {left: -3em;top: 2.5em;z-index: 7;}.ball.two .star:nth-child(1) {margin-left: -1.4em;}.ball.two .star:nth-child(2) {margin-left: 1.4em;}.ball.three {left: 2.2em;top: 1.5em;z-index: 5;transform: scale(0.98);}.ball.three .star:nth-child(1) {margin-top: -1.6em;}.ball.three .star:nth-child(2) {margin-top: 0.5em;margin-left: -1.5em;}.ball.three .star:nth-child(3) {margin-top: 0.5em;margin-left: 1.5em;}.ball.four {left: -.8em;top: -1.4em;z-index: 4;transform: scale(0.96);}.ball.four .star:nth-child(1) {margin-top: -1.7em;margin-left: -1.4em;}.ball.four .star:nth-child(2) {margin-top: -1.7em;margin-left: 1.4em;}.ball.four .star:nth-child(3) {margin-top: 1.1em;margin-left: -1.4em;}.ball.four .star:nth-child(4) {margin-top: 1.1em;margin-left: 1.4em;}.ball.five {left: 4em;top: -1em;z-index: 3;transform: scale(0.96);}.ball.five .star:nth-child(1) {margin-top: -0.2em;}.ball.five .star:nth-child(2) {margin-top: -2em;margin-left: 1.6em;}.ball.five .star:nth-child(3) {margin-top: 1.6em;margin-left: -1.6em;}.ball.five .star:nth-child(4) {margin-top: 1.6em;margin-left: 1.6em;}.ball.five .star:nth-child(5) {margin-top: -2em;margin-left: -1.6em;}.ball.six {left: 1em;top: -3.7em;z-index: 2;transform: scale(0.9);}.ball.six .star:nth-child(1) {margin-top: -0.2em;}.ball.six .star:nth-child(2) {margin-top: -1.3em;margin-left: 2.2em;}.ball.six .star:nth-child(3) {margin-top: 1.6em;margin-left: -1.6em;}.ball.six .star:nth-child(4) {margin-top: 1.6em;margin-left: 1.6em;}.ball.six .star:nth-child(5) {margin-top: -1.3em;margin-left: -2.2em;}.ball.six .star:nth-child(6) {margin-top: -2.8em;}.ball.seven {left: -3.8em;top: -3.8em;z-index: 1;transform: scale(0.88);}.ball.seven .star:nth-child(1) {margin-top: -0.2em;}.ball.seven .star:nth-child(2) {margin-top: -0.2em;margin-left: 2.5em;}.ball.seven .star:nth-child(3) {margin-top: 2em;margin-left: -1.4em;}.ball.seven .star:nth-child(4) {margin-top: 2em;margin-left: 1.4em;}.ball.seven .star:nth-child(5) {margin-top: -0.2em;margin-left: -2.6em;}.ball.seven .star:nth-child(6) {margin-left: -1.4em;margin-top: -2.5em;}.ball.seven .star:nth-child(7) {margin-left: 1.4em;margin-top: -2.5em;}.ball .glow {position: absolute;width: 0;height: 0;background: radial-gradient(ellipse at center, #fff591 0%, rgba(255, 245, 145, 0.99) 1%, rgba(255, 245, 145, 0.5) 50%, rgba(254, 252, 234, 0) 100%);z-index: 10;border-radius: 50%;box-shadow: 0px 0px 50px 1px rgba(255, 245, 145, 0.5);}#animate:checked + label .ball .glow {animation: inside-glow linear 1.5s 2s forwards, inside-glow-pulse linear 0.1s 3s infinite;}@keyframes outside-glow {start {box-shadow: 0px 0px 0px 0px #fff591;}50% {box-shadow: 0px 0px 35px 7px #fff591;}100% {box-shadow: 0px 0px 0px 0px #fff591;}}@keyframes inside-glow {10% {width: 105%;height: 105%;}20% {width: 30%;height: 30%;}30% {width: 107%;height: 107%;}40% {width: 60%;height: 60%;}50% {background: radial-gradient(ellipse at center, #fff591 0%, rgba(255, 245, 145, 0.99) 1%, rgba(255, 245, 145, 0.5) 50%, rgba(254, 252, 234, 0) 100%);width: 115%;height: 115%;}58% {width: 300%;height: 300%;}100% {width: 300%;height: 300%;}}@keyframes inside-glow-pulse {0% {transform: scale(1);}50% {transform: scale(1.2);}100% {transform: scale(1);}}@keyframes zoom-out {100% {transform: scale(0.2);}}@keyframes shoot-beam {10% {box-shadow: 0px 0px 35px 7px rgba(255, 245, 145, 0);}100% {top: -20%;width: .8%;}}@keyframes shoot-beam-base {100% {opacity: 1;padding-top: 100%;}}@keyframes beam-pulse {0% {box-shadow: 0px 0px 20px 1px #fff591;}50% {box-shadow: 0px 0px 20px 5px #fff591;}100% {box-shadow: 0px 0px 20px 1px #fff591;}}@keyframes darken {0% {opacity: 0;}100% {opacity: 0.6;}}
style>
head>
<body><input type="checkbox" name="checkbox" id="animate">
<label for='animate'><div class='overlay'>div><div class='beam'>div><div class='dragon-balls'><div class='ball one'><div class='glow'>div><div class='stars'><div class='star'>div>div><div class='reflections'><div class='reflection'>div><div class='reflection'>div>div>div><div class='ball two'><div class='glow'>div><div class='stars'><div class='star'>div><div class='star'>div>div><div class='reflections'><div class='reflection'>div><div class='reflection'>div>div>div><div class='ball three'><div class='glow'>div><div class='stars'><div class='star'>div><div class='star'>div><div class='star'>div>div><div class='reflections'><div class='reflection'>div><div class='reflection'>div>div>div><div class='ball four'><div class='glow'>div><div class='stars'><div class='star'>div><div class='star'>div><div class='star'>div><div class='star'>div>div><div class='reflections'><div class='reflection'>div><div class='reflection'>div>div>div><div class='ball five'><div class='glow'>div><div class='stars'><div class='star'>div><div class='star'>div><div class='star'>div><div class='star'>div><div class='star'>div>div><div class='reflections'><div class='reflection'>div><div class='reflection'>div>div>div><div class='ball six'><div class='glow'>div><div class='stars'><div class='star'>div><div class='star'>div><div class='star'>div><div class='star'>div><div class='star'>div><div class='star'>div>div><div class='reflections'><div class='reflection'>div><div class='reflection'>div>div>div><div class='ball seven'><div class='glow'>div><div class='stars'><div class='star'>div><div class='star'>div><div class='star'>div><div class='star'>div><div class='star'>div><div class='star'>div><div class='star'>div>div><div class='reflections'><div class='reflection'>div><div class='reflection'>div>div>div>div>
label>
<img src="https://img-blog.csdnimg.cn/20200831210809470.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTgyMDQ0NA==,size_16,color_FFFFFF,t_70#pic_center" alt="">
body>
html>
纯CSS页面，我省略了注释部分，如有疑问，请评论在下方，随时答疑。如果是图片路径遇到了问题，把这张图片转存👇
最后推荐大家阅读我的“ 置顶 ”文章，代码全开源，希望你的学习之旅一路平坦。
推荐阅读：
CSS小鲨鱼
JS迷你键盘
CSS旋转魔方
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！