首页 > 作文

CSS3+JavaScript实现炫酷呼吸效果的示例代码

更新时间:2023-04-03 19:30:26 阅读: 评论:0

用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 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图