前襟每日实战:86# 视频演示如何用纯 CSS 创作一个方块旋转动画

2018-07-22 admin

图片描述

效果预览

按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。

https://codepen.io/comehope/pen/gjgyWm

可交互视频

此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

https://scrimba.com/p/pEgDAM/czDMNsw

源代码下载

每日前端实战系列的全部源代码请从 github 下载:

https://github.com/comehope/front-end-daily-challenges

代码解读

定义 dom,容器中包含 4 个元素:

<div class="loader">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

居中显示:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
}

画出容器中心的方块:

.loader{
    width: 10em;
    height: 10em;
    border: 0.25em solid white;
    font-size: 10px;
    border-radius: 1em;
}

画出容器四周的方块:

.loader,
.loader span {
    position: absolute;
}

.loader span:nth-child(1) {
    top: 5em;
    left: 5em;
}

.loader span:nth-child(2) {
    top: -5em;
    left: 5em;
}

.loader span:nth-child(3) {
    top: 5em;
    left: -5em;
}

.loader span:nth-child(4) {
    top: -5em;
    left: -5em;
}

给方块上色:

.loader,
.loader span {
    mix-blend-mode: screen;
}

.loader {
    background-color: gold;
}

.loader span:nth-child(1) {
    background-color: dodgerblue;
}

.loader span:nth-child(2) {
    background-color: hotpink;  
}

.loader span:nth-child(3) {
    background-color: mediumpurple;
}

.loader span:nth-child(4) {
    background-color: limegreen;
}

为容器整体增加旋转动画:

.loader {
    animation: rotating 2s linear infinite;
}

@keyframes rotating {
    to {
        transform: rotate(1turn);
    }
}

为容器四周的方块增加反向旋转的动画效果:

.loader span {
    animation: de-rotating 4s linear infinite;
}

@keyframes de-rotating {
    from, to {
        transform: rotate(0deg) scale(0.5);
    }

    50% {
        transform: rotate(-180deg) scale(1.2);
    }
}

最后,隐藏可能出现在页面外部的内容:

body {
    overflow: hidden;
}

大功告成!

[转载]原文链接:https://segmentfault.com/a/1190000015721771

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-36543.html

文章标题:前襟每日实战:86# 视频演示如何用纯 CSS 创作一个方块旋转动画

相关文章
必须记住的 30 类 CSS 选择器
开篇 有 30 个 CSS 选择器你必须烂熟于心,它们适应于当今各大主流浏览器。 1.* * { margin: 0; padding: 0; } *选择器选择的是每一个单一元素。很多程序员用上面的 CSS 将所有元素的 ma...
2015-11-16
CSS2.0帮助文档(参考手册)chm下载
下载地址:CSS2.0帮助文档(参考手册)chm下载 友情提示:如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
如何为高负载网络优化Nginx 和 Node.js?
译者:AlfredCheung 在搭建高吞吐量web应用这个议题上,NginX和Node.js可谓是天生一对。他们都是基于事件驱动模型而设计,可以轻易突破Apache等传统web服务器的C10K瓶颈。预设的配置已经可以获得很高的并发,不过,...
2015-11-12
可以从CSS框架中借鉴到什么
现在很多人会使用 CSS 框架进行快速建站。   那 CSS 框架是什么呢,它通常是一些 CSS 文件的集合,这些文件包括基本布局、表单样式、网格、简单组件、以及样式重置。使用 CSS 框架大大降低工作成本进行快速建站。   当然对于一些大...
2016-03-11
纯JS实现旋转图片3D展示效果
CSS: &lt;style type=&quot;text&#x2F;css&quot;&gt; #show{position:relative;margin:20px auto;width:800px;} .item{position:...
2017-03-22
零基础-5小时开发一个electron应用-[实践]
一、背景 三、技能升级 ​ 明明可以用颜值取胜,非要靠才华?不对,明明可以用代码搞定,非要搞设计?步入正题,正好最近对electron比较感兴趣,又是要做工具,那就直接怼 1.electron介绍 ​ electron最开始不叫这个名字,叫...
2017-12-26
如何编写干净高效的CSS代码
其实CSS的学习并不困难,但在一些较为大型的项目中就显得杂乱无章,变得很难管理,尤其是不同的人编写CSS的风格总会略有不同,从团队合作的层面上来说,就更加难以沟通,所以,我们为此总结了一些如何实现高效整洁的CSS代码原则: 使用Reset但...
2015-11-12
2015 Web 2.0和AJAX如何做好优化
2015如何让做好web2.0和ajax的优化?JavaScript中文网总结当下提出以下四大优化意见,旨在帮助W前端开发人员有效利用APM解决上述问题。 随着Web应用程序速度与效率快速增长,网站已经成为企业与其客户进行交互的第一途径——...
2015-11-12
HTML5会是下一个风口吗?
2014年10月底, W3C(万维网联盟)正式宣布HTML5正式定稿,科技圈就像发现了可以打破谷歌、苹果所统领的原生APP世界的方法,发表了很多宣讲HTML5将真正开始颠覆原生(Native)App的文章,也开始着力发展HTML5,开始抢占...
2015-11-12
面试官:谈谈你对 CSS 盒模型的认识?(你确定会?)
题目:谈谈你对 CSS 盒模型的认识 涉及知识点(层层递进): 基本概念:标准模型+ IE模型(区别) CSS如何设置这两种模型 JS如何设置获取盒子模型对应的宽和高 实例题(根据盒模型解释边距重叠) BFC(边距重叠解决方案) 1...
2018-06-09
回到顶部