用css3动画实现的一个简单炫酷效果,最终的效果图如下:
页面结构(index.html):
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>document</title> <link rel="stylesheet" href="style.css"></head><body> <h1>relax and breath</h1> <div class="container"> <div class="circle"></div> <p id="text"></p> <div class="pointer-container"> <div class="pointer"></div> </div> <div class="gradient-circle"></div> </div> <script src="script.js"></script></body></html>
script.js:
const container = document.querylector('.container');const text = document.querylector('#text');const totaltime = 7500;const breathtime = (totaltime/5)*2; //呼吸的时间为3sconst holdtime = totaltime/5; 什么是说明方法 //保持呼吸的时间为1.5sconsole.log(breathtime);breathanimation(); //一开始自执行breathanimation函数function breathanimation(){ text.innerhtml = 'breath in'; container.classname = 'container grow'; //给container添加grow类,实现放大效果 ttimeout(function(){ text.innerhtml = 'hold on'; ttimeout(function(){ text.innerhtml = 'breath out'; container.classname = 'container shrink';//给container添加shrink类,实现缩小效果 },holdtime) },breathtime)}tinterval(breathanimation,totaltime); //重复执行样式(style.css):
*{ margin: 0; padding: 0; box-sizing: border-box;}body{ background: url('./img/bg.jpg') no-repeat center center /cover; min-两洞齐插height: 100vh; font-family: arial, helvetica, sans-rif; color: #fff; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center;}/*注意设置margin为auto*/.container{ position: relative; width: 300px; height: 300px; display: flex; align-items: center; justify-content: center; transform: scale(1); margin: auto;}/*使用圆锥渐变作为背景,宽高比.container稍大,同时z-index要设为-2,因为还有一层为.circle,最外层是文字*/.gradient-circle{ position: absolute; left: -10px; top: -10px; background: conic-gradient( #55b7a4 0%, #4ca493 40%, #fff 40%, #fff 60%, #336d62 60%, #2a5b52 100% ); width: 320px; height: 320px; border-radius: 50%; z-index: -2;}/z-index为-1,为中间黑色的圆/.circle{ position: absolute; left: 0; top: 0; width: 300px; height: 300px; backgro戳力同心und-color: #010f1c; border-radius: 50%; z-index: -1;}/*.pointer-container是小球外面的容器,其高设置为190,是因为其中150为半径,还有40为top-40,这样就会绕着圆心转,且不会换到里面来,注意transform-origin为中下方*/.pointer-container{ position: absolute; width: 20px; height: 190px; top: -40px; left: 140px; /* background-color: red; */ transform-origin: bottom center; animation: rotate 7.5s linear forwards infinite;}/*小球*/.pointer{ width: 20px; height: 20px; background-color: #fff; border-radius: 50%;}/*设置小球转圈的效果*/@keyframes rotate{ from{ transform: rotate(0deg); }to{ transform: rotate(360deg); }}.container.grow{ animation: grow 3s linear forwards;}.container.shrink{ animation: shrink 2s linear forwards;}@keyframes grow{ from{ transform: scale(1) }to{ transform: scale(1.2); }}@keyframes shrink{ from{ transform: scale(1.2) }to{ transform: scale(1); }}谁言寸草心下一句如果.container的margin不设置为auto或者一个具体的值,就会造成下图的效果，文字和圆挤在一块:
同时我把.pointer-container里面的 background-color: red; 添上就会更加理解为什么要把.pointer-container的高度设置为190px.另外如果不把transform-origin设置为bottom center它就会如图中标注的默认点旋转,这并不是我们想要的效果.
还有个细节就是.shr杜甫登高原文ink的动画时间我设置成了两秒,其实按照js里面的breath out这段时间应该为3s,但是为了从breath out到breath in有个缓冲的效果,就设置成了2s,不然breath out到breath in没有一个过渡,会显得突兀不好看.
到此这篇关于css3+javascript实现炫酷呼吸效果的示例代码的文章就介绍到这了,更多相关css3+javascript呼吸效果内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章，希望大家以后多多支持www.887551.com！
本文发布于:2023-04-03 19:30:25，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/704717f1fe32b704355c60235dffe016.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：CSS3+JavaScript实现炫酷呼吸效果的示例代码.doc
本文 PDF 下载地址：CSS3+JavaScript实现炫酷呼吸效果的示例代码.pdf
| 留言与评论（共有 0 条评论） |
