• css动画基本使用

    目录

    制作动画分为两步：

    动画常用属性： 

    动画序列：

    transition属性：

    示例：太极旋转

    动画（animation）：是CSS3中具有颠覆性的特征之一，可通过设置多个结点来精确控制一个或一组动画，用来实现复杂的动画效果。

    制作动画分为两步：

    定义动画：

    使用/调用动画：

    用keyframes定义动画：

    1. <style>
    2.    @keyframes move{
    3.      0%{
    4.         transform: translate(0px);
    5.         }
    6.      100%{
    7.         transform: translate(100px);
    8.         }
    9. .div1{
    10.     animation-name:move;/*需要执行的动画的名字*/
    11.     animation-duration: 3s;/*所需要的时间*/
    12.     animation-iteration-count: infinite;/* 执行次数*/
    13. }
    14. </style>

    动画常用属性： 

    动画序列：

    1.可以做多个状态的变化

    2.里面的百分比必须是整数

    3.里面的百分比就是总的时间的划分

    根据百分比状态确定实现什么动画：

    1. @keyframes move{
    2.         0%{
    3.             transform: translate(0px,0px);  
    4.         }
    5.         25%{
    6.             transform: translate(100px,0px);
    7.         }
    8.         50%{
    9.             transform: translate(100px,100px);
    10.         }
    11.         75%{
    12.             transform: translate(0px,100px);
    13.         }
    14.         100%{
    15.             transform: translate(0,0);
    16.         }
    17.     }

    transition属性：

    none定义不进行转换。
    matrix(n,n,n,n,n,n)定义 2D 转换，使用六个值的矩阵。
    matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定义 3D 转换，使用 16 个值的 4x4 矩阵。
    translate(x,y)定义 2D 转换。
    translate3d(x,y,z)定义 3D 转换。
    translateX(x)定义转换，只是用 X 轴的值。
    translateY(y)定义转换，只是用 Y 轴的值。
    translateZ(z)定义 3D 转换，只是用 Z 轴的值。
    scale(x,y)定义 2D 缩放转换。
    scale3d(x,y,z)定义 3D 缩放转换。
    scaleX(x)通过设置 X 轴的值来定义缩放转换。
    scaleY(y)通过设置 Y 轴的值来定义缩放转换。
    scaleZ(z)通过设置 Z 轴的值来定义 3D 缩放转换。
    rotate(angle)定义 2D 旋转，在参数中规定角度。
    rotate3d(x,y,z,angle)定义 3D 旋转。
    rotateX(angle)定义沿着 X 轴的 3D 旋转。
    rotateY(angle)定义沿着 Y 轴的 3D 旋转。
    rotateZ(angle)定义沿着 Z 轴的 3D 旋转。
    skew(x-angle,y-angle)定义沿着 X 和 Y 轴的 2D 倾斜转换。
    skewX(angle)定义沿着 X 轴的 2D 倾斜转换。
    skewY(angle)定义沿着 Y 轴的 2D 倾斜转换。
    perspective(n)为 3D 转换元素定义透视视图。

    动画简写属性：

    animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;

    示例：

    太极旋转

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9. @keyframes move {
    10.     from{
    11.         transform: rotate(0deg);
    12.     }
    13.     to{
    14.         transform:rotate(360deg);
    15.  
    16.     }
    17. }
    18. body {
    19. 	background-color: #adadad;/*设置背景色*/
    20. }
    21. div{
    22.     animation-duration:0.1ms;
    23.     animation-name: move;
    24.     animation-iteration-count: infinite;
    25.     animation-timing-function: linear;
    26.  }
    27. #yinyang {
    28. 	width: 200px;
    29. 	height: 200px;
    30. 	border-radius: 50%;
    31. 	background: linear-gradient(
    32. 		to bottom,
    33. 		#ffffff 0%,
    34. 		#ffffff 50%,
    35. 		#000000 50%,
    36. 		#000000 100%
    37. 	);
    38. 	position: relative;
    39. 	margin: 100px auto;
    40. }
    41.  
    42. #yinyang::before {
    43. 	position: absolute;
    44. 	content: "";
    45. 	width: 20px;
    46. 	height: 20px;
    47. 	border-radius: 50%;
    48. 	border: 40px solid black;/*左侧黑球套白点*/
    49. 	background-color: white;
    50. 	left: 0;
    51. 	top: 50px;
    52. }
    53.  
    54. #yinyang::after {
    55. 	position: absolute;
    56. 	content: "";
    57. 	width: 20px;
    58. 	height: 20px;
    59. 	border-radius: 50%;
    60. 	border: 40px solid white;/*右侧白球套黑点*/
    61. 	background-color: black;
    62. 	right: 0;
    63. 	top: 50px;
    64. }
    65.     style>
    66. head>
    67. <body>
    68.     <div id="yinyang">div>
    69. body>
    70. html>

  • 相关阅读:
    STM32HAL库单ADC+DMA学习及测试记录
    Socks5代理IP：保障跨境电商的网络安全
    vite脚手架搭建vitepress路径别名设置
    【博客478】prometheus-----存储目录结构以及格式，作用分析
    『C语言』递归思想
    CSS 渐变彩色字体
    简单说说ConcurrentHashMap的结构和实现
    千巡翼X1 让航测无人机更小更轻更高效
    java split分割去掉空值
    centos VS code中gdb调试无法显示STL内容的问题（仅显示内存地址信息）
  • 原文地址：https://blog.csdn.net/weixin_49627122/article/details/126490677