原文地址:https://segmentfault.com/a/1190000014964220

感想:动画效果运用了具有滚动效果的marquee标签

HTML代码:

    注释:  <!-- 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>

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 也能做网页动画的更多相关文章

  1. 前端每日实战:29# 视频演示如何不用 transition 和 animation 也能做网页动画

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/BxbQJj 可交互视频教程 此视频 ...

  2. 如何不用 transition 和 animation 也能做网页动画

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/BxbQJj 可交互视频教 ...

  3. css3实践之图片轮播(Transform,Transition和Animation)

    楼主喜欢追求视觉上的享受,虽常以牺牲性能无法兼容为代价却也乐此不疲.本文就通过一个个的demo演示来简单了解下css3下的Transform,Transition和Animation. 本文需要实现效 ...

  4. transition与animation

    以前,一直都知道,transition是animation的一个简化版,甚至不算是动画,而是一种过渡. transition的用法 早两天用transition写了一个按钮滑动的效果,类似于IOS的设 ...

  5. CSS动画transform、transition和animation的区别

    CSS3属性中关于制作动画的三个属性:Transform,Transition,Animation. 1.transform:描述了元素的静态样式,本身不会呈现动画效果,可以对元素进行 旋转rotat ...

  6. 终于不再对transition和animation,傻傻分不清楚了 --vue中使用transition和animation

    以前写页面注重在功能上,对于transition和animation是只闻其声,不见其人,对于页面动画效果心理一直痒痒的.最近做活动页面,要求页面比较酷炫,终于有机会认真了解了. transition ...

  7. css3的动画特效--元素旋转(transition,animation)

    开发中,视觉要你实现一个元素的旋转问题,比如说如下图所示: 思路:首先动画动效肯定离不开anmimation动画. 和transition动画一样,animation动画也是CSS3动画的一种,这类动 ...

  8. 弄清 CSS3 的 transition 和 animation

    弄清 CSS3 的 transition 和 animation transition transition 属性是 transition-property, transition-duration, ...

  9. #8.12.16总结#background transition、animation、transform

    background-origin 设置元素背景图片的原始起始位置.必须保证背景是background-repeat为no-repeat此属性才会生效. background-origin :bord ...

随机推荐

  1. mycat配置安装测试

    https://www.jianshu.com/p/26513f428ecf #下载安装#java jdk mkdir /usr/local/java/tar -zxvf jdk-7u80-linux ...

  2. 《JavaScript设计模式与开发》笔记 6.高阶函数

    1.函数作为参数传递 1.回调函数 2.Array.prototype.sort 2.函数作为返回值输出 1.判断数据的类型 3.高级函数的实现AOP 4.高阶函数的其他应用 1.currying 函 ...

  3. Delegate event 委托事件---两个From窗体使用委托事件

    窗体如下:   public partial class Form1 : Form { public Form1() { InitializeComponent(); } private void b ...

  4. 黄聪:JS正则表达式验证数字

    <script type="text/JavaScript">     function validate(){       var reg = new RegExp( ...

  5. [蓝桥杯]ALGO-51.算法训练_Torry的困惑(基本型)

    题目描述: 问题描述 Torry从小喜爱数学.一天,老师告诉他,像2...……这样的数叫做质数.Torry突然想到一个问题,前10...……个质数的乘积是多少呢?他把这个问题告诉老师.老师愣住了,一时 ...

  6. AIX查询当前目录下各文件及目录大小

    AIX下要查询某个目录下各个文件或目录的占用空间大小 可以对du命令增加一个别名alias 放在~/.profile里 alias dus='du -sg ./* |sort' s表示文件和目录都是显 ...

  7. 描述wxWidgets中事件处理的类型转化

    wxWidgets是一个比较常用的UI界面库,我曾经试着使用wxWidgets写一个UI编辑工具,在此期间,学习了一些wxWidgets的知识.我对wxWidgets的绑定(Bind)比较好奇,想知道 ...

  8. 搭建DUBBO项目解决DUBBO.XML标签报错的问题(转载)

    https://www.cnblogs.com/ajax-li/p/7856393.html 报错内容: Multiple annotations found at this line: - cvc- ...

  9. 用juniversalchardet解决爬虫乱码问题

    爬虫往往会遇到乱码问题.最简单的方法是根据http的响应信息来获取编码信息.但如果对方网站的响应信息不包含编码信息或编码信息错误,那么爬虫取下来的信息就很可能是乱码. 好的解决办法是直接根据页面内容来 ...

  10. RHEL7安装配置VNC

    RHEL7安装配置VNC 作者:Eric 微信:loveoracle11g 安装配置VNC服务程序 [root@zhouwanchun yum.repos.d]# cd ~ [root@zhouwan ...