HTML+css之动画特效

白色玫瑰 程序猿

时间: 2023-07-15 阅读: 1 字数:7366

html css 动画
{}
动画\n一、

动画

<a href="#_2">一、定义动画</a> <a href="#_9">二、引入动画</a> 

<a href="#_17">案例一</a>    <a href="#_126">案例二</a>

一、定义动画

语法：@keyframes 动画名｛from｛｝；to｛｝；｝

from是从某状态开始 to是到某状态结束 也可以用百分比表示，把时间按百分比等分

二、引入动画

语法：animation:动画名称 动画执行时间 [延迟时间 动画曲线 执行次数 是否反向执行 是否保留最后一帧];

[]里的参数可有可无 执行次数为无限时，值为infinite 反向设置：值为alternate 在此引入一些小案例帮助理解

案例一

<!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>3d立方体</title>
   <style>
      /* 让父级动起来wrap */
      @keyframes roll {
         from {
            transform: rotateX(0) rotateY(0) rotateZ(0)
         }

         to {
            transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg)
         }
      }
      }

      * {
         margin: 0;
         padding: 0;
      }

      div {
         width: 200px;
         height: 200px;
         position: absolute;
      }

      .wrap {
         /* 关键动画点 */
         /* transform-origin: 300px 300px; */
         margin: 100px;
         animation: roll 4s linear infinite;
         /* 开启3D */
         transform-style: preserve-3d;
      }

      .wrap div {
         line-height: 200px;
         text-align: center;
         font-size: 100px;
         color: #fff;
      }

      /* 左手螺旋定责。大拇指冲正方形，顺着四指是顺时针 */
      /* 左右 */
      .wrap div:nth-of-type(1) {
         /* 旋转时坐标系也会随着旋转 */
         transform: rotateY(-90deg) translateZ(100px);
         background-color: hotpink;
      }

      .wrap div:nth-of-type(2) {
         /* 旋转时坐标系也会随着旋转 */
         transform: rotateY(90deg) translateZ(100px);
         background-color: deepskyblue;
      }

      /* 上下 */
      .wrap div:nth-of-type(3) {
         /* 旋转时坐标系也会随着旋转 */
         transform: rotateX(90deg) translateZ(100px);
         background-color: gold;
      }

      .wrap div:nth-of-type(4) {
         /* 旋转时坐标系也会随着旋转 */
         transform: rotateX(-90deg) translateZ(100px);
         background-color: greenyellow;
      }

      /* 前后 */
      .wrap div:nth-of-type(5) {
         /* 旋转时坐标系也会随着旋转 */
         transform: translateZ(100px);
         background-color: tomato;
      }

      .wrap div:nth-of-type(6) {
         /* 旋转时坐标系也会随着旋转 */
         transform: rotateX(180deg) translateZ(100px);
         background-color: orange;
      }
   </style>
</head>

<body>
   <div class="wrap">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
      <div>E</div>
      <div>F</div>
   </div>
</body>

</html>

在这里插入图片描述 这是一个可以旋转的正立方体

案例二

<!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>case06</title>
   <style>
      @keyframes jump {
         0% {
            top: 80px;
            transform: rotate(0deg);
         }

         12.5% {
            top: 100px;
            border-bottom-right-radius:50px;
            border-top-right-radius: 10px;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
         }

         25% {
            top: 80px;
            border-bottom-right-radius:10px ;
            border-top-right-radius: 10px;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
         }

         37.5% {
            top: 100px;
            border-bottom-right-radius:10px ;
            border-top-right-radius: 50px;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
         }

         50% {
            top: 80px;
            border-bottom-right-radius:10px ;
            border-top-right-radius: 10px;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
         }

         62.5% {
            top: 100px;
            border-bottom-right-radius:10px ;
            border-top-right-radius: 10px;
            border-top-left-radius: 50px;
            border-bottom-left-radius: 10px;
         }

         75% {
            top: 80px;
            border-bottom-right-radius:10px ;
            border-top-right-radius: 10px;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
         }

         87.5% {
            top: 100px;
            border-bottom-right-radius:10px ;
            border-top-right-radius: 10px;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 50px;
         }

         100% {
            top: 80px;
            transform: rotate(360deg);
            border-bottom-right-radius:10px ;
            border-top-right-radius: 10px;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
         }
      }
      @keyframes scaleShadow{
         from{transform: scaleX(1);}
         to{ transform: scaleX(1.2);}
      }
      .bg {
         width: 300px;
         height: 300px;
         background-color: skyblue;
         position: relative;
      }

      .bg .jump {
         width: 100px;
         height: 100px;
         background-color: #fff;
         position: absolute;
         left: 100px;
         top: 80px;
         border-radius: 10px;
         animation: jump 2s linear infinite;
      }
      .shadow{
         width: 80px;
         height: 20px;
         background-color: #666;
         position: absolute;
         left: 110px;
         top: 190px;
         border-radius: 50%;
         animation: scaleShadow 0.25s linear infinite alternate;
      }
   </style>
</head>

<body>
   <div class="bg">
      <div class="shadow"></div>
      <div class="jump"></div>    
   </div>
</body>

</html>

动画效果运行代码可见 注意

修改旋转点：transform-origin 开启3d：transform-style：preserve-3d; 旋转时，坐标系也会跟着旋转*

原文地址：https://blog.csdn.net/weixin_64804275/article/details/124481947?ops_request_misc=&request_id=06f15b4d02774e9598f5645ef55394ad&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~all~koosearch~default-18-124481947-null-null.142^v88^insert_down28v1,239^v2^insert_chatgpt&utm_term=css3%E7%89%B9%E6%95%88

本文章网址:https://www.sjxi.cn/detil/bb5c9d52af044a1ca367b6b43b067452

最新评论

当前未登陆哦
登陆后才可评论哦

湘ICP备2021009447号