原文地址: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. Debian下Netbeans编辑器字体锯齿现象

    第一步:到你netbeans安装目录下的etc目录下,找到netbeans.conf文件,打开准备编辑:第二步:在netbeans_default_options后面加上-J-Dawt.useSyst ...

  2. javascript map forEach filter some every在购物车中的实战演练区分用法

    1.map forEach 1.map 循环遍历每一项,返回一个新的数组 例: 购物车商品小计: //购物车 var cart=[ {"id":101,"name&quo ...

  3. JAVA的debug入门和多断电调试

    调试的一般都是逻辑 第一步的错误双击数字旁边的蓝色地方,或者点击右键如图 断点的意思就是程序执行在哪里就停止 当找不到DEBUG中的Variables是在位置输入Variables就可以了: 再按下F ...

  4. 时间序列大数据平台建设(Time Series Data,简称TSD)

    来源:https://blog.csdn.net/bluishglc/article/details/79277455 引言在大数据的生态系统里,时间序列数据(Time Series Data,简称T ...

  5. Device Tree碎碎念

    首先推荐elinux.org上一篇关于Device Tree的文章: http://elinux.org/Device_Tree_Usage 这是一篇关于Device Tree的入门文章.对英文犯怵的 ...

  6. 胖子哥的大数据之路(7)- 传统企业切入核心or外围

    一.引言 昨天和一个做互联网大数据(零售行业)的朋友交流,关于大数据传统企业实施的切入点产生了争执,主要围绕两个问题进行了深入的探讨: 问题1:对于一个传统企业而言什么是核心业务,什么是外围业务? 问 ...

  7. win10和ubuntu16.04双系统Geom Error

    报错信息: Geom Error Reboot and Select proper Boot device or Insert Boot Media in selected Boot device a ...

  8. 将Word,PDF文档转化为图片

    #region 将Word文档转化为图片 /// <summary> /// 将Word文档转化为图片 /// </summary> /// <param name=&q ...

  9. nginx简单学习(tomcat)

    一.负载均衡的简单配置 1.下载nginx 2.tomcat*2 配置不同的端口用于正常启动,在jsp中<%= session.getId()%>可以查看jSessionId,tomcat ...

  10. Qt 常用类 (4)—— QPoint

    转载:落叶知秋时 QPoint 类代表一个坐标点,实现在 QtCore 共享库中.它可以认为是一个整型的横坐标和一个整型的纵坐标的组合. 构造 QPoint 类支持以下两种构造方式: QPoint() ...