前端每日实战:29# 视频演示如何不用 transition 和 animation 也能做网页动画
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
https://codepen.io/comehope/pen/BxbQJj
可交互视频教程
此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
源代码下载
每日前端实战系列的全部源代码请从 github 下载:
https://github.com/comehope/front-end-daily-challenges
代码解读
定义 dom,一个容器中包含 4 个子元素,每个子元素的内容就是一堆斜线:
<div class="frame">
<div class="wall top"><marquee>////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</marquee></div>
<div class="wall right"><marquee>////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</marquee></div>
<div class="wall bottom"><marquee>////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</marquee></div>
<div class="wall left"><marquee>////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</marquee></div>
</div>
居中显示:
body {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
定义容器尺寸:
.frame {
width: 100vmin;
height: 100vmin;
background-color: whitesmoke;
}
隐藏超出容器的内容:
.wall {
overflow: hidden;
}
把 4 个元素向四个方向旋转,互相垂直:
.wall {
transform-origin: 0 0;
}
.wall.top {
transform: rotate(0deg);
}
.wall.right {
transform: rotate(90deg);
}
.wall.bottom {
transform: rotate(180deg);
}
.wall.left {
transform: rotate(270deg);
}
定位它们,形成一个正方形:
.frame {
position: relative;
}
.wall {
position: absolute;
width: 100%;
}
.wall.top {
top: 0;
left: 0;
}
.wall.right {
top: 0;
left: 100%;
}
.wall.bottom {
top: 100%;
left: 100%;
}
.wall.left {
top: 100%;
left: 0;
}
对 4 个元素进行 3d 旋转:
.frame {
perspective: 40vmin;
}
.wall.top {
transform: rotate(0deg) rotateX(-90deg);
}
.wall.right {
transform: rotate(90deg) rotateX(-90deg);
}
.wall.bottom {
transform: rotate(180deg) rotateX(-90deg);
}
.wall.left {
transform: rotate(270deg) rotateX(-90deg);
}
把斜线加粗、放大:
.wall {
font-size: 75vmin;
font-weight: bold;
}
最后,把 dom 中的斜线用 <marquee> 标签包围起来:
<div class="frame">
<div class="wall top"><marquee>////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</marquee></div>
<div class="wall right"><marquee>////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</marquee></div>
<div class="wall bottom"><marquee>////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</marquee></div>
<div class="wall left"><marquee>////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</marquee></div>
</div>
大功告成!
前端每日实战:29# 视频演示如何不用 transition 和 animation 也能做网页动画的更多相关文章
- 29.如何不用 transition 和 animation 也能做网页动画
原文地址:https://segmentfault.com/a/1190000014964220 感想:动画效果运用了具有滚动效果的marquee标签 HTML代码: 注释: <!-- mar ...
- 如何不用 transition 和 animation 也能做网页动画
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/BxbQJj 可交互视频教 ...
- 前端每日实战:144# 视频演示如何用 D3 和 GSAP 创作一个集体舞动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/gdVObN 可交互视频 此视频是可 ...
- 前端每日实战:113# 视频演示如何用纯 CSS 创作一个赛车 loader
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/mGdXGJ 可交互视频 此视频是可 ...
- 前端每日实战:116# 视频演示如何用 CSS 和原生 JS 开发一个监控网络连接状态的页面
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oPjWvw 可交互视频 此视频是可 ...
- 前端每日实战:157# 视频演示如何用纯 CSS 创作一个棋盘错觉动画(实际上每一行都是平行的)
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VEyoGj 可交互视频 此视频是可 ...
- 前端每日实战:158# 视频演示如何用纯 CSS 创作一个雨伞 toggle 控件
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/pxLbjv 可交互视频 此视频是可 ...
- 前端每日实战:136# 视频演示如何用 D3 和 GSAP 创作一个横条 loader
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/pOZKWJ 可交互视频 此视频是可 ...
- 前端每日实战:140# 视频演示如何用纯 CSS 创作文本的淡入动画效果
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ZMwgqK 可交互视频 此视频是可 ...
随机推荐
- 16/7/11_PHP-图形图像操作
GD库简介 GD指的是Graphic Device,PHP的GD库是用来处理图形的扩展库,通过GD库提供的一系列API,可以对图像进行处理或者直接生成新的图片. PHP除了能进行文本处理以外,通过GD ...
- 【MM系列】SAP SAP的账期分析和操作
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP SAP的账期分析和操作 ...
- ac自动机(tree+kmp模板)
Keywords Search Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others ...
- bzoj2396 神奇的矩阵(随机化)
Time Limit: 5 Sec Memory Limit: 512 MB 给出三个行数和列数均为N的矩阵A.B.C,判断A*B=C是否成立. 题目可能包含若干组数据. 对于每组数据,第一行 ...
- UVALive 6270 Edge Case(找规律,大数相加)
版权声明:本文为博主原创文章,未经博主同意不得转载. vasttian https://blog.csdn.net/u012860063/article/details/36905379 转载请注明出 ...
- C#设计模式:单例模式(Singleton)
一,单例模式:它的主要特点不是根据客户程序调用生成一个新的实例,而是控制某个类型的实例数量-唯一一个,就是保证在整个应用程序的生命周期中,在任何时刻,被指定的类只有一个实例,并为客户程序提供一个获取该 ...
- 2. ZooKeeper基础
1. ZooKeeper的特性 ZooKeeper的特性主要从会话.数据节点,版本,Watcher,ACL权限控制,集群角色这些部分来了解,其中需要重点掌握的数据节点与Watcher 1.1 会话 客 ...
- 【学习总结】尚硅谷2019java数据结构和算法
相关链接 github:javaDSA 目录 第一章 内容介绍和授课方式 第二章 数据结构和算法概述 第三章 稀疏数组和队列 第四章 链表 第五章 栈 第六章 递归 第七章 排序算法 第八章 查找算法 ...
- macos Item2 添加 Shell Integration (ftp传输)
macos系统 的item2软件 的 Shell Integration (ftp传输) 功能强大,无需 安装其他ftp软件,也是为了保证 密码安全 在使用时报错如下(因为本地 ping不通): ...
- pwd - 显示出当前/活动目录的名称
总览 (SYNOPSIS) pwd [OPTION] 描述 (DESCRIPTION) 显示出 完整的 当前 活动目录 名称. --help 显示 帮助 信息, 然后 退出 --version 显示 ...