css3动画特效

白色玫瑰 程序猿

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

css
{}
css动画特效分为三个大类：动画 过渡 变形\n\n其中过渡是属于轻型的动画，过渡常使用变形的基本操作。

目录

css动画特效分为三个大类：动画 过渡 变形

其中过渡是属于轻型的动画，过渡常使用变形的基本操作。 

/*动画*/

<!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>动画</title>
  <style>
   /* 设定图像 */
   .box {
     width: 100px;
     height: 100px;
     background-color: lightblue;
     border-radius: 50%;
   }

   .move {
     /* 2. 设定动画 */
     /* animation-name: move;
     animation-duration: 2s;
     animation-timing-function: linear;
     animation-fill-mode:forwards;   
     animation-iteration-count: 2; 
     animation-direction: alternate-reverse;   */

     /* 动画的书写形式 */
     animation: move 2s 1s linear 2 forwards;
   }

   /* 第一个图像的触动动画 */
   .move:hover {
     animation-play-state: paused;
   }

   /* 第二个图像的动画延迟一秒  */
   .move_delay_1 {
     animation-delay: 1s;
   }

   /* 1. 定义动画帧 */
   @keyframes move {
     from {
      margin-left: 0;
     }

     to {
      margin-left: 800px;
     }
   }
  </style>
</head>

<body>
  <!-- 第一个图像 -->
  <div class="box move"></div>
  <!-- 第二个图像延迟 -->
  <div class="box move move_delay_1"></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>过渡</title>
  <style>
   .box {
     width: 300px;
     height: 300px;
     background-color: lightcoral;
     cursor: pointer;
     margin: 100px auto;
     /* 过渡与变化的结合 */
     transition: transform, background-color 2s, 2s 0s linear;
   }

   .box:hover {
     background-color: #f4f4f4;
     transform: scale(1.2);
   }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

</html>

运行结果：

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

本文章网址:https://www.sjxi.cn/detil/fbac3a45fc72485c8c6d469725491bbc
最新评论
当前未登陆哦
登陆后才可评论哦

湘ICP备2021009447号

×

(穷逼博主)在线接单

QQ: 1164453243

邮箱: abcdsjx@126.com

前端项目代做
前后端分离
Python 爬虫脚本
Java 后台开发
各种脚本编写
服务器搭建
个人博客搭建
Web 应用开发
Chrome 插件编写
Bug 修复