一些css动画特效

1. 通过css实现一个物体从部分显示到完整显示的动画。

Animating with clip path

<a href="https://css-tricks.com/animating-with-clip-path/">https://css-tricks.com/animating-with-clip-path/</a>

#education.swiper-slide-active .eduAnim {

  animation: eduAnim 1s linear infinite;

}

/* https://css-tricks.com/animating-with-clip-path/ */

@keyframes eduAnim {

  0% {clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);}

  100% {clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}

}

通过css 动画实现饼图或者环图的从无到有的动画

Svg pie animation

<a href="https://codepen.io/oreakids/pen/xgggJd">https://codepen.io/oreakids/pen/xgggJd</a>

<a href="https://codepen.io/ksksoft/pen/xsnmp">https://codepen.io/ksksoft/pen/xsnmp</a>

#medical.swiper-slide-active .coverCircleMedical {

  opacity: 1;

  fill: #666;

  stroke: #666;

  transform-box: fill-box;

  transform-origin: center;

  transform: rotateY(-180deg) rotate(-90deg);

  stroke-width: 144;

  r: 72;

  animation: medicalpie 2s linear;

  stroke-dasharray: 0, 428;

}

@keyframes medicalpie {

  0% {stroke-dasharray: 428,428;}

  100% {stroke-dasharray: 0, 428;}

}

animate.css 里面有很多现成的动画特效可以复制出来使用

<a href="https://daneden.github.io/animate.css/">https://daneden.github.io/animate.css/</a> 效果显示

<a href="https://github.com/daneden/animate.css/blob/master/animate.css">https://github.com/daneden/animate.css/blob/master/animate.css</a> 源码复制

tranform-box: fill-box; 可以让svg元素相对与自身的位置运动、缩放。

<a href="https://codepen.io/giaco/pen/OwowJQ">https://codepen.io/giaco/pen/OwowJQ</a> css第17行

animation 属性是一个简写属性，用于设置六个动画属性：

animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction

animation: name duration timing-function delay iteration-count direction;



animation-fill-mode: forwards;  可以让动画结束后的元素保留最后一帧的状态。

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