前端动画——网页时钟

最新推荐文章于 2023-04-23 11:00:14 发布

果冻OoO

最新推荐文章于 2023-04-23 11:00:14 发布

阅读量434

点赞数 1

分类专栏： CSS 文章标签：前端动画 css

本文链接：https://blog.csdn.net/qq_42002794/article/details/124683256

版权

这篇博客介绍了如何在前端实现网页时钟动画。首先，讲解了CSS的基础知识，包括transition属性及其简写方式，然后深入探讨了animation和@keyframes的结合使用，通过实例展示了如何创建更复杂的动画效果。

摘要由CSDN通过智能技术生成

前言

先了解一些基础知识，之后直接从案列中学习

基础知识

transition

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属性。	3
transition-property	规定应用过渡的 CSS 属性的名称。	3
transition-duration	定义过渡效果花费的时间。默认是 0。	3
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。	3
transition-delay	规定过渡效果何时开始。默认是 0。	3

举例：

button {
  ...
  background-color: red;
  transition-property: opacity, background-color, border-radius; /* 列表以逗号分隔 */
  transition-duration: 0.5s;
  transition-timing-function: ease; /* 默认速度效果 */
  transition-delay: 1s;
  ...
}
button:hover {
  ...
  opacity: 0.3;  background-color: #fff000;
  border-radius: 100px;
  ...
}

当然，这样写起来有些麻烦，当然你可以简化：

button { 
 background-color: red; 
 transition: opacity  0.5s 1s ease, background-color  0.5s 1s ease, border-radius  0.5s 1s ease; 
}

以上代码每个逗号隔开4个参数，分别为 CSS