css动画之上下晃动的div

最新推荐文章于 2023-06-25 20:51:27 发布

Cheng Lucky

最新推荐文章于 2023-06-25 20:51:27 发布

阅读量1.2k

点赞数 3

文章标签：动画 css css3

本文链接：https://blog.csdn.net/weixin_44255044/article/details/122185380

版权

该博客介绍了如何使用CSS创建一个上下晃动的动画效果。通过设置不同的关键帧和变换属性，如`transform: translate3d`和`transition-timing-function`，实现了元素在Z轴上的移动和不同阶段的位移变化，从而达到晃动的效果。这个动画可以应用于网页交互元素，增加用户体验。

摘要由CSDN通过智能技术生成

css动画之上下晃动的div

在线动画地址

https://animista.net/play/attention/pulsate

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="square" class="container animated">上下晃动</div>
</body>
<style>
 
 /**
  * transform-origin 设置旋转元素的基点位置
  * animation-name 设置动画名称
  * animation-duration 设置动画时间
  * animation-fill-mode 设置播放后的状态
  * animation-iteration-count 设置循环播放的次数
  * transition-timing-function: cubic-bezier 贝塞尔曲线效果，它有四个值，指在X轴与Y轴的两个曲线的点，第一个点：X1 Y1;第二个点：X2 Y2
  * transform: translate3d 设置动画Z轴位移几个元素，表示只在Z轴上移动
  *
  * 需要注意：transform: translate3d 不等于 transform: translateZ
  */
  
 .animated {
   animation-duration: 1s; /*动画时间*/
   animation-fill-mode: both; /*播放后的状态*/
 }
  
 .animated {
   animation-iteration-count: infinite; /*动作循环的次数：infinite 无限循环*/
 }
  
 .animated {
   animation-duration: 2s; /*动画时间*/
 }
  
 .container {
   background: #2D97DB;
   width: 90%;
   height: 90%;
   padding: 100px;
   margin: 20px auto;
   font-family: "微软雅黑";
   font-size: 40px;
   color: white;
   text-align: center;
   line-height: 90%;
 }
  
 .container:hover{
   animation-name:container; /*动画的名称*/
   transform-origin: center bottom; /*设置动画旋转元素的基点为：居中靠下*/
   cursor: pointer;
 }
  
 @keyframes container{
   0%,
   100%,
   20%,
   50%,
   80% {
   transition-timing-function: cubic-bezier(0.215,.61,.355,1); /*贝塞尔曲线 ： X1 Y1 X2 Y2*/
   transform: translate3d(0,0,0); /*设置只在Z轴上移动*/
   }
   40%,
   43%{
   transition-timing-function: cubic-bezier(0.755,0.50,0.855,0.060);
   transform: translate3d(0,-30px,0);
   }
   70%{
   transition-timing-function: cubic-bezier(0.755,0.050,0.855,0.060);
   transform: translate3d(0,-15px,0);
   }
   90%{
   transform: translate3d(0,-4px,0);
   }
 }
</style>
</html>