前言

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

基础知识

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 属性、过渡时间、停顿开始时间、速度曲线。看起来还有点麻烦,在大部分情况下，我们动画的多种效果一般是同时进行，同时消失的,依旧可以简写

button {...  background-color: red;  transition: all 0.5s 1s ease;...
}

animation + @keyframes

animation 才是css3动画的一个进阶，他配合@keyframes，可以实现更加复杂的你想要的动画行为。

属性	描述	CSS
@keyframes	规定动画。	3
animation	所有动画属性的简写属性。	3
animation-name	规定 @keyframes 动画的名称。	3
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。	3
animation-timing-function	规定动画的速度曲线。默认是 "ease"。	3
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。	3
animation-delay	规定动画何时开始。默认是 0。	3
animation-iteration-count	规定动画被播放的次数。默认是 1。	3
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。	3
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。	3

举例：

  .box {width: 200px;height: 100px;background-color: pink;/* 使用动画 */animation: change 1s;}/* 一. 定义动画：从200变大到600 *//* @keyframes change {from {width: 200px;}to {width: 600px;}} *//* 二. 定义动画：200 到 500*300 到 800*500 *//* 百分比指的是动画总时长的占比 */@keyframes change {0% {width: 200px;}50% {width: 500px;height: 300px;}100% {width: 800px;height: 500px;}}

网页时针案列

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网页时钟</title><style>.clock {position: relative;width: 200px;height: 200px;margin: 100px auto;border: 8px solid #000;border-radius: 50%;}/* 刻度线 */.line {position: absolute;left: 50%;transform: translate(-50%);width: 3px;height: 200px;background-color: #ccc;}/* :nth-child() */.line:nth-child(2) {transform: translate(-50%) rotate(30deg);}.line:nth-child(3) {transform: translate(-50%) rotate(60deg);}.line:nth-child(4) {transform: translate(-50%) rotate(90deg);}.line:nth-child(5) {transform: translate(-50%) rotate(120deg);}.line:nth-child(6) {transform: translate(-50%) rotate(150deg);}/* 遮罩层 */.mask {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 140px;height: 140px;background-color: #fff;border-radius: 50%;}/* 表针 */.hour,.minute,.second {position: absolute;left: 50%;bottom: 50%;/* transform: translate(-50%); */transform-origin: center bottom;}.hour {width: 6px;height: 40px;background-color: #000;transform: translate(-50%) rotate(45deg);}.minute {width: 4px;height: 50px;background-color: #000;transform: translate(-50%) rotate(90deg);}.second {width: 2px;height: 60px;background-color: red;transform: translate(-50%) rotate(225deg);animation: rotate 60s steps(60) infinite;}/* 螺丝 */.dotted {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 12px;height: 12px;background-color: #000;border-radius: 50%;}@keyframes rotate {0% {transform: rotate(0);}100% {transform: rotate(360deg);}}</style>
</head>
<body><div class="clock"><!-- 刻度线 --><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><!-- 遮罩层 --><div class="mask"></div><!-- 表针 --><div class="hour"></div><div class="minute"></div><div class="second"></div><!-- 螺丝 --><div class="dotted"></div></div>
</body>
</html>

前端动画——网页时钟相关推荐

【前端实例代码】霓虹灯按钮动画效果悬停2| html CSS特效惊艳| 前端开发网页制作基础入门教程
b站视频演示效果: [web前端特效源码]霓虹灯按钮动画效果悬停2| html CSS特效惊艳| 前端开发网页制作基础入门教程效果图: 完整代码: <!DOCTYPE html> ...
【前端实例代码】霓虹灯按钮动画效果悬停| html CSS特效惊艳| 前端开发网页制作基础入门教程
b站视频演示效果: [web前端特效源码]霓虹灯按钮动画效果悬停| html CSS特效惊艳| 前端开发网页制作基础入门教程效果图: 完整代码: <!DOCTYPE html> & ...
【前端实例代码】Html5+css3创建拟物风格昏昏欲睡的云朵动画网页效果~前端开发网页设计基础入门教程~适合初学者~超简单~
b站视频演示效果: [前端实例代码]Html5+css3创建拟物风格昏昏欲睡的云朵动画网页效果!前端开发网页设计基础入门教程!适合初学者~超简单~ 效果图: 完整代码: <!DOCTYPE ht ...
【前端实例代码】使用 HTML CSS实现指纹扫描仪特效动画效果 |前端开发网页制作基础入门教程网页开发中常见的样式与特效，收藏起来肯定用的上~
b站视频演示效果: [web前端特效源码]使用 HTML CSS 和 JavaScript 实现指纹扫描仪特效动画效果 |前端开发网页制作基础入门教程效果图: 完整代码: <!DOCTYP ...
css3新动_10款重量级CSS3的全新特效实现超酷前端动画效果
大家都知道,在网页制作时使用CSS技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制.只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和 ...
前端实现炫酷动效_超级绚丽，20款前端动画特效，轰炸你的眼睛
前言 HTML5一个相当出色的web技术,它不仅可以让你更加方便地操纵页面元素,而且可以通过canvas实现更多的动画特效,引进HTML5标准后,CSS3也就可以发挥更大的作用.本文主要介绍了一些基于 ...
优雅的时钟翻页效果，让你的网页时钟与众不同！
你有没有想过给你的网页时钟添加翻页效果,让它更引人注目,更酷炫吗?如果是的话,你来对地方了! 子辰这篇文章将教你如何通过简单的步骤,为你的网页时钟添加翻页效果. 无论你是 web 开发初学者或是有一定 ...
由奥迪车灯想到的前端动画
最近对汽车比较感兴趣,平时也多留意看了一些身边的车,发现奥迪部分车型的转向灯很有特色,有一个从左到右的动画效果,视觉效果很赞,这撩起了我的好奇心,怎么用代码在网页上模拟实现呢? 先来看看我们需要实现的 ...
前端静态网页布局经验谈
静态布局(Static Layout)是最传统的网页布局方式,也是前端的一个基本功之一,通常应用于PC端布局,当我们拿到UI提供的PC端PS设计稿,基本上就要用到静态布局了. 静态布局对前端来说是比较 ...

前端动画——网页时钟

前言

基础知识

transition

animation + @keyframes

网页时针案列

前端动画——网页时钟相关推荐

最新文章

热门文章