2021-7-9 学习记录：前端动画制作钟表

看到宝藏博主制作的小黄鸭钟表，我感觉很感兴趣，于是再快乐的划水时光中我练习了一下：
博主讲解很细致小黄鸭钟表
下边将我的练习成果发下：

<!--测试制作clocks-->
<template><div class="clocks"><div class="hour-warpper"><div class="hour"></div></div><div class="min-warpper"><div class="min"></div></div><div class="sec-warpper"><div class="sec"></div></div></div>
</template>
<script>
export default {name: '',components: {},data() {return {}},watch: {},created() {},mounted() {},methods: {},computed: {},filters: {}
}
</script>
<style scoped lang="stylus">
.clocks {width: 500px;height: 500px;margin: auto;margin-top: 50px;border-radius: 50%;position: relative;background-image: url('~@assets/imgs/clock-bg.jpg');background-size: cover;>div {position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}.hour-warpper {width: 70%;height: 70%;animation: run 216000s linear infinite;.hour {height: 50%;width: 8px;background-color: #000;margin: 0 auto;}}.min-warpper {width: 80%;height: 80%;animation: run 3600s steps(60) infinite;.min {height: 50%;width: 6px;background-color: blue;margin: 0 auto;}}.sec-warpper {width: 90%;height: 90%;animation: run 60s steps(60) infinite;.sec {height: 50%;width: 4px;margin: 0 auto;background-color: red;}}
}@keyframes run {from {transform: rotatez(0);}to {transform: rotatez(360deg);}
}
</style>

2021-7-9 学习记录：前端动画制作钟表相关推荐

java预科基础篇2021.2.3学习记录
java预科基础篇2021.2.3学习记录初识博客本以为老师会讲是在微博上写博客做记录,没想到会是很多程序员专用的博客博客为音译,正确翻译结果为网络日记,英文为bog 较为专业的程序员用博客为: ...
分享前端动画制作的 12 个原则（含代码）
点击上方前端Q,关注公众号回复加群,加入前端Q技术交流群大家好,我是winty! 作为前端的设计师和工程师,我们用 CSS 去做样式.定位并创建出好看的网站.我们经常用 CSS 去添加页面的运动 ...
写在2021: 值得关注/学习的前端框架和工具库
前言最近在知乎看到了这么个问题:学完Vue还有必要学习React和Node吗?[1], 有很奇妙的感觉,因为我在最开始入门前端时,也是以Vue入的门,在"学完"Vue之后, 我也 ...
HDC.Cloud 华为开发者大会2021.04.24 学习记录
华为开发者大会2021(Cloud),每一个开发者都了不起前言又一次来到深圳,上次是参观腾讯滨海大厦,这次来到深圳的大学城参加华为开发者大会,一天下来收获满满:除了四场干货满满的分享会,还在午休期 ...
2021年蛙泳学习记录
蛙泳学习一.序言二.学习安排 1.换气 2.漂浮 3.蛙泳蹬腿 4.换气与蹬腿相互配合三.学习资源四.学习反思一.序言一直以来都想要把游泳学会,今年下定决心一定要把这个任务给完成.在此立个 ...
如何用html制作标题栏,第一天学习html前端，制作标题栏
1.html代码 2.css代码 *{ margin:0; padding:0; } body{ width: 100%; min-width: 1200px; font-family: " ...
2021小白Python学习记录Day7 面向对象基础（上）（定义类和对象、__init__传参、self、魔术方法）
目录一.定义类和对象 1.定义类 2.创建一个对象 2.1 创建一个实例对象并调用实例方法 2.2 创建另一个实例对象: 2.3 添加实例属性二.__init__(self) 1. __init_ ...
Blender3.0动画制作入门学习教程 Learn Animation with Blender (2021)
要求下载并安装Blender.免费下载和免费用于任何目的. 描述加入我的动画课程. 在本课程中,我将从头开始讲述在Blender中创建动画场景的过程. 从第一步到最终渲染.在这个课程中,我们将使用 ...
Unity学习记录——模型与动画
Unity学习记录--模型与动画前言本文是中山大学软件工程学院2020级3d游戏编程与设计的作业7 编程题:智能巡逻兵 1.学习参考除去老师在课堂上讲的内容,本次作业代码与操作主要参考了 ...

2021-7-9 学习记录：前端动画制作钟表

2021-7-9 学习记录：前端动画制作钟表相关推荐

最新文章

热门文章