html + css 实现小球跳动动画 |
您所在的位置：网站首页 › 滚动标签代码怎么用 › html + css 实现小球跳动动画 |
html + css 实现小球跳动动画
|
在学习html5 和css3的时候，用到了动画效果animation。 具体步骤是： 定义一个大盒子box，box-content 代表小球，circle代表小洞。。
2. 设置外层盒子的样式，采用display属性，以列的形式进行排序。。 内部元素位置为底部对齐 .box { width: 100px; height: 300px; /* border: 1px solid #000; */ margin:0 auto; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }3. 设置小球样式，宽高各为50px，边框弧度为百分之50，背景颜色为渐变色， .box-content { width: 50px; height: 50px; /* border: 1px solid #000; */ border-radius: 50%; /* margin: 20px auto; */ background: linear-gradient(0deg,blue,red); box-shadow: 0 0 5px rgba(0,0,0,0.5); animation: animal 2s infinite alternate linear; }4.设置circle样式， .circle{ width: 50px; height: 10px; background-color: rgba(0,0,0,0.5); border-radius: 50%; animation: animal1 2s infinite alternate linear; }5.设置动画效果， /* 小洞的动画效果 */ @keyframes animal1 { 0% { transform: scale(1.2); } 100% { transform: scale(0.5); } } /*小球的动画效果 */ @keyframes animal { 0% { transform: translateY(0); } 100% { transform: translateY(-250px); } }效果如下： 
全部代码如下： Document * { margin: 0; padding: 0; } body { width: 100vw; height: 100vh; display: flex; /* justify-content: flex-end; */ justify-content: center; align-items: center; } .box { width: 100px; height: 300px; /* border: 1px solid #000; */ margin:0 auto; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; } .box-content { width: 50px; height: 50px; /* border: 1px solid #000; */ border-radius: 50%; /* margin: 20px auto; */ background: linear-gradient(0deg,blue,red); box-shadow: 0 0 5px rgba(0,0,0,0.5); animation: animal 2s infinite alternate linear; } .box .left { background: linear-gradient(0deg,rgb(0, 255, 170),rgb(0, 162, 255)); animation-duration: 800ms; } .box .left1 { animation-duration: 800ms; } .box .right { background: linear-gradient(0deg,rgb(208, 255, 0),rgb(255, 0, 230)); animation-duration: 1s; /* animation-delay: 50ms; */ } .box .right1 { animation-duration: 1s; } .circle{ width: 50px; height: 10px; background-color: rgba(0,0,0,0.5); border-radius: 50%; animation: animal1 2s infinite alternate linear; } /* 小洞的动画效果 */ @keyframes animal1 { 0% { transform: scale(1.2); } 100% { transform: scale(0.5); } } /*小球的动画效果 */ @keyframes animal { 0% { transform: translateY(0); } 100% { transform: translateY(-250px); } } |
【本文地址】