P82-前端基础动画效果-动画旋转练习鸭子表

1.概述

这篇文章做个练习复习上篇文章学习的旋转动画，鸭子表。

2.鸭子表

我们的目标是做一个鸭子背景图案的钟表，有三个表针旋转。在这个案例中我们通过拆分步骤介绍如何制作钟表。

2.1.表针末端旋转原理

旋转动画

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>表</title><style>.sec {height: 200px;width: 1px;border: 1px red solid;background-color: red;margin: 0 auto;/* 旋转动画 */animation: run 60s;}/* 旋转动画关键帧 */@keyframes run {from {transform: rotateZ(0);}to {transform: rotateZ(360deg);}}</style></head><body><div class="sec"></div></body>
</html>

旋转效果

上面旋转动画是验证线的中心位置旋转和我们钟表指针从末端旋转不一样，我们下边就来介绍如何让指针末端作为中心点旋转。

表针末端旋转原理

首先设置一个容器，包裹表针元素。设置容器动画旋转效果，表针设置长度是容器的一半，当容器旋转时带动秒针旋转，这样秒针就是以末端为中心旋转。

表针末端旋转代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>表</title><style>/* 设置秒针容器旋转 */.sec-wrapper {height: 100px;width: 100px;background-color: salmon;animation: run 60s;}.sec {/* 设置秒针大小 */height: 50px;width: 1px;border: 1px red solid;background-color: red;margin: 0 auto;}/* 旋转动画关键帧 */@keyframes run {from {transform: rotateZ(0);}to {transform: rotateZ(360deg);}}</style></head><body><!-- 创建秒针容器 --><div class="sec-wrapper"><!-- 创建秒针 --><div class="sec"></div></div></body>
</html>

2.2.鸭子表案例

案例背景图片
案例完整代码和原理

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>表</title><style>* {margin: 0;padding: 0;}/* 设置表的样式 */.clock {/* 设置表容器的宽高 */width: 500px;height: 500px;/* 设置表容器位置水平居中 */margin: 0 auto;/* 设置表容器上外边距100px */margin-top: 100px;/* 设置表容器的形状为圆形 */border-radius: 50%;/* 设置表容器相对定位 */position: relative;/* 设置表容器背景图片 */background-image: url(./img/13/bg3.jpg);/* 设置背景的大小 */background-size: cover;}/* 设置所有表针容器的位置 */.clock>div {position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}/* 设置时针容器 */.hour-wrapper {height: 70%;width: 70%;/* 设置时针运行方式：liner：匀速运行，infinite：无限循环 */animation: run 7200s linear infinite;}/* 设置时针样式 */.hour {/* 设置时针高度是容器的一半 */height: 50%;width: 6px;background-color: yellow;margin: 0 auto;}/* 设置分针容器 */.min-wrapper {height: 80%;width: 80%;/* 设置分针运行方式：steps：步进运行，infinite：无限循环 */animation: run 600s steps(60) infinite;}/* 设置分针样式 */.min {/* 设置分针高度是容器的一半 */height: 50%;width: 4px;background-color: green;margin: 0 auto;}/* 设置秒针容器旋转 */.sec-wrapper {height: 90%;width: 90%;animation: run 60s steps(60) infinite;}.sec {/* 设置秒针高度是容器的一半 */height: 50%;width: 2px;background-color: red;margin: 0 auto;}/* 旋转动画关键帧 */@keyframes run {from {transform: rotateZ(0);}to {transform: rotateZ(360deg);}}</style>
</head><body><!-- 创建表容器 --><div class="clock"><!-- 创建时针容器 --><div class="hour-wrapper"><!-- 创建时针 --><div class="hour"></div></div><!-- 创建分针容器 --><div class="min-wrapper"><!-- 创建分针 --><div class="min"></div></div><!-- 创建秒针容器 --><div class="sec-wrapper"><!-- 创建秒针 --><div class="sec"></div></div></div></body></html>

2.3.鸭子表效果

P82-前端基础动画效果-动画旋转练习鸭子表相关推荐

P84-前端基础动画效果-动画3D复仇者联盟练习
P84-前端基础动画效果-动画3D复仇者联盟练习 1.概述这篇文章通过一个3D动画,对前面学习的动画效果做一个总结性的练习. 知识点: 元素设置透明效果设置3d变形效果设置动画旋转 2. 3D复 ...
P85-前端基础动画效果-动画缩放效果
P85-前端基础动画效果-动画缩放效果 1.概述这篇文章介绍动画缩放效果对元素进行缩放的函数: scaleX() 水平方向缩放 scaleY() 垂直方向缩放 scaleZ() Z方向缩放 sca ...
P83-前端基础动画效果-动画奔跑的小子练习
P83-前端基础动画效果-动画奔跑的小子练习 1.概述这篇文章通过一个奔跑的少年练习动画效果 2.奔跑的小子 2.1.奔跑的小子图片 2.2.奔跑的小子代码 <!DOCTYPE html> ...
css3动画效果（旋转，帧动画）
一.css动画属性 animation是css3的动画属性,也是简写,其中包含以下几种值可配置默认值:none 0 ease 0 1 normal 值描述 animation-name 需要绑定到 ...
安卓修改动画效果--动画差值器TimeInterpolator
前一段时间让实现一个类似弹幕的效果,从右到左飘过去,时间八秒,嗯,很好做,一个动画就ok了布局代码: <?xml version="1.0" encoding=" ...
php动画效果,动画效果总结
摘要: 动画效果总结 .main{width:100px;height: 100px;margin: 20px 20px;float:left;} .fadein,.fadeout,.fadetogg ...
js动画效果 - 动画曲线
1 参考常见的动画都是速率相同的平滑效果,而有些动画在变动过程中速率不同,比如有些网站的返回顶部的动画效果会经过慢-快-慢的效果,这就设计到数学模型了,有一片参考文章:http://blog.csd ...
用计算机做动画效果,动画图片多种效果制作步骤
动画图片多种效果制作步骤:文字绕月旋转做法 <一>打开FLASH软件,设置版面及导入背景图片,按图解进行,并在35帧处插入帧 . 当这些操作完后与平时在办公软件打字一样,打一部分就保存,这 ...
小白IT：炫彩的网页是怎么做的，什么是前端？？？Python前端基础CSS 效果渲染
文章目录一认识HTML 1.web服务的本质 2.HTML是什么? 3.html文档格式 4.html标签格式标签的语法几个重要的属性 HTML注释二.常用标签 1.!DOCTYPE标签 2 ...

P82-前端基础动画效果-动画旋转练习鸭子表

P82-前端基础动画效果-动画旋转练习鸭子表

1.概述

2.鸭子表

2.1.表针末端旋转原理

2.2.鸭子表案例

2.3.鸭子表效果

P82-前端基础动画效果-动画旋转练习鸭子表相关推荐

最新文章

热门文章