29.如何不用 transition 和 animation 也能做网页动画
原文地址:https://segmentfault.com/a/1190000014964220
感想:动画效果运用了具有滚动效果的marquee标签
HTML代码:
<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>
CSS代码:
html, body {
margin:;
padding:;
}
.frame {
position: relative;
/* 视口的宽高 vmin vmax */
width: 100vmin;
height: 100vmin;
/* whitesmoke 烟白色 */
background-color: whitesmoke;
/* 设置元素被查看位置的视图:只影响 3D 转换元素 */
perspective: 40vmin;
}
.wall{
position: absolute;
width: 100%;
font-size: 75vmin;
font-weight: bold;
overflow: hidden;
transform-origin: 0 0;
}
.wall.top {
top:;
left:;
transform: rotate(0deg) rotateX(-90deg);
}
.wall.right {
top:;
left: 100%;
transform: rotate(90deg) rotateX(-90deg);
}
.wall.bottom {
top: 100%;
left: 100%;
transform: rotate(180deg) rotateX(-90deg);
}
.wall.left {
top: 100%;
left:;
transform: rotate(270deg) rotateX(-90deg);
}
29.如何不用 transition 和 animation 也能做网页动画的更多相关文章
- 前端每日实战:29# 视频演示如何不用 transition 和 animation 也能做网页动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/BxbQJj 可交互视频教程 此视频 ...
- 如何不用 transition 和 animation 也能做网页动画
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/BxbQJj 可交互视频教 ...
- css3实践之图片轮播(Transform,Transition和Animation)
楼主喜欢追求视觉上的享受,虽常以牺牲性能无法兼容为代价却也乐此不疲.本文就通过一个个的demo演示来简单了解下css3下的Transform,Transition和Animation. 本文需要实现效 ...
- transition与animation
以前,一直都知道,transition是animation的一个简化版,甚至不算是动画,而是一种过渡. transition的用法 早两天用transition写了一个按钮滑动的效果,类似于IOS的设 ...
- CSS动画transform、transition和animation的区别
CSS3属性中关于制作动画的三个属性:Transform,Transition,Animation. 1.transform:描述了元素的静态样式,本身不会呈现动画效果,可以对元素进行 旋转rotat ...
- 终于不再对transition和animation,傻傻分不清楚了 --vue中使用transition和animation
以前写页面注重在功能上,对于transition和animation是只闻其声,不见其人,对于页面动画效果心理一直痒痒的.最近做活动页面,要求页面比较酷炫,终于有机会认真了解了. transition ...
- css3的动画特效--元素旋转(transition,animation)
开发中,视觉要你实现一个元素的旋转问题,比如说如下图所示: 思路:首先动画动效肯定离不开anmimation动画. 和transition动画一样,animation动画也是CSS3动画的一种,这类动 ...
- 弄清 CSS3 的 transition 和 animation
弄清 CSS3 的 transition 和 animation transition transition 属性是 transition-property, transition-duration, ...
- #8.12.16总结#background transition、animation、transform
background-origin 设置元素背景图片的原始起始位置.必须保证背景是background-repeat为no-repeat此属性才会生效. background-origin :bord ...
随机推荐
- mycat配置安装测试
https://www.jianshu.com/p/26513f428ecf #下载安装#java jdk mkdir /usr/local/java/tar -zxvf jdk-7u80-linux ...
- 《JavaScript设计模式与开发》笔记 6.高阶函数
1.函数作为参数传递 1.回调函数 2.Array.prototype.sort 2.函数作为返回值输出 1.判断数据的类型 3.高级函数的实现AOP 4.高阶函数的其他应用 1.currying 函 ...
- Delegate event 委托事件---两个From窗体使用委托事件
窗体如下: public partial class Form1 : Form { public Form1() { InitializeComponent(); } private void b ...
- 黄聪:JS正则表达式验证数字
<script type="text/JavaScript"> function validate(){ var reg = new RegExp( ...
- [蓝桥杯]ALGO-51.算法训练_Torry的困惑(基本型)
题目描述: 问题描述 Torry从小喜爱数学.一天,老师告诉他,像2...……这样的数叫做质数.Torry突然想到一个问题,前10...……个质数的乘积是多少呢?他把这个问题告诉老师.老师愣住了,一时 ...
- AIX查询当前目录下各文件及目录大小
AIX下要查询某个目录下各个文件或目录的占用空间大小 可以对du命令增加一个别名alias 放在~/.profile里 alias dus='du -sg ./* |sort' s表示文件和目录都是显 ...
- 描述wxWidgets中事件处理的类型转化
wxWidgets是一个比较常用的UI界面库,我曾经试着使用wxWidgets写一个UI编辑工具,在此期间,学习了一些wxWidgets的知识.我对wxWidgets的绑定(Bind)比较好奇,想知道 ...
- 搭建DUBBO项目解决DUBBO.XML标签报错的问题(转载)
https://www.cnblogs.com/ajax-li/p/7856393.html 报错内容: Multiple annotations found at this line: - cvc- ...
- 用juniversalchardet解决爬虫乱码问题
爬虫往往会遇到乱码问题.最简单的方法是根据http的响应信息来获取编码信息.但如果对方网站的响应信息不包含编码信息或编码信息错误,那么爬虫取下来的信息就很可能是乱码. 好的解决办法是直接根据页面内容来 ...
- RHEL7安装配置VNC
RHEL7安装配置VNC 作者:Eric 微信:loveoracle11g 安装配置VNC服务程序 [root@zhouwanchun yum.repos.d]# cd ~ [root@zhouwan ...