建一个交易网站需要多少钱/天津网站推广

文档

• https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition

示例一

@keyframes 设置动画帧

1、from to 用于简单动画，只有起始帧和结束帧
2、百分比 用于复杂动画，动画不止两帧

<style>html,body {margin: 0;padding: 0;}body {height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;}.cover-wrap {width: 200px;height: 200px;border: 40px solid #000000;border-radius: 50%;overflow: hidden;}@keyframes playmusic {/* 起始位置 */from {transform: rotate(0deg);}/* 结束位置 */to {transform: rotate(360deg);}}.cover {width: 100%;height: 100%;object-fit: cover;/* 动画属性 */animation-name: playmusic;animation-duration: 4s;animation-timing-function: linear;animation-iteration-count: infinite;}</style><div>animation@keyframes 实现 CD播放效果</div><div class="cover-wrap"><img class="cover"src="https://api.isoyu.com/bing_images.php"></div>

在线Demo: animation-keyframes.html

示例二

<style>html,body {height: 100%;}body {display: flex;flex-direction: column;align-items: center;justify-content: center;}.box {width: 100px;height: 100px;background-color: green;}</style><style>@keyframes rotate-infinite {/* 起始位置 */0% {transform: rotate(0deg);}/* 结束位置 */100% {transform: rotate(360deg);}}.animation-rotate {/* linear 匀速运动 */animation: 10s rotate-infinite infinite linear;}</style><div class="box animation-rotate"></div>

示例：https://mouday.github.io/front-end-demo/animation/index.html

参考

• CSS3 @keyframes 规则
• CSS3 animation（动画） 属性
• css动画animation ___循环旋转