深圳市金黑网络技术有限公司始终坚持以用户需求为导向，提供安全、稳定、高效的产品和服务！
签到 · 搜索导航 · 服务热线 · 微信/手机：17817817816

深圳网站建设

搜索
应用资源 › 应用开发教程 › 前端教程 › css教程 › css3如何实现字体放大缩小变大变小动画效果 ...
返回列表 发新帖
查看: 691|回复: 0

css3如何实现字体放大缩小变大变小动画效果

[复制链接]
admin

UID
1
贡献
844
金币
1540
主题
520
在线时间
333 小时
注册时间
2022-1-15
最后登录
2024-11-12
QQ
发表于 2023-2-7 14:22:35 | 691 | 0 | 显示全部楼层 |阅读模式
admin 2023-2-7 14:22:35 691 0 显示全部楼层
css3如何实现字体放大缩小变大变小动画效果

css3代码如下：
  1.     <style type="text/css">
  2.         .play-button {
  3.             width: 300px;
  4.             height: 38px;
  5.             background: #0848F0;
  6.             border-radius: 4px;

  8.             margin-top: 10px;
  9.             margin-left: 10px;
  10.             text-align: center;
  11.         }

  13.         @keyframes scaleDraw {
  14.             /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
  15.             0% {
  16.                 transform: scale(1);/*开始为原始大小*/
  17.             }
  18.             50% {
  19.                 transform: scale(1.2);/*放大1.1倍*/
  20.             }
  21.         }

  23.         .play-button-text {
  24.             width: 61px;
  25.             height: 38px;
  26.             font-size: 20px;
  27.             font-family: PingFangSC-Medium, PingFang SC;
  28.             font-weight: 500;
  29.             color: #FFFFFF;
  30.             line-height: 38px;
  31.             letter-spacing: 2px;
  32.             text-align: center;
  33.             display: inline-block;

  35.             -webkit-animation-name: scaleDraw;/*关键帧名称*/
  36.             -webkit-animation-timing-function: ease-in-out;/*动画的速度曲线*/
  37.             -webkit-animation-iteration-count: infinite;/*动画播放的次数*/
  38.             -webkit-animation-duration:0.5s;/*动画所花费的时间*/
  39.         }
  40.     </style>
复制代码
html代码如下：
  1. <div class="play-button"><div class="play-button-text">PLAY</div></div>
复制代码


html教程, css教程
楼主热帖

相关帖子
回复

举报

返回列表 发新帖
Copyright © 2013-2023 深圳市金黑网络技术有限公司 版权所有    备案号：粤ICP备2021124338号    粤公网安备 44030702003689号

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

快速回复 返回顶部 返回列表