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 ...
随机推荐
- Debian下Netbeans编辑器字体锯齿现象
第一步:到你netbeans安装目录下的etc目录下,找到netbeans.conf文件,打开准备编辑:第二步:在netbeans_default_options后面加上-J-Dawt.useSyst ...
- javascript map forEach filter some every在购物车中的实战演练区分用法
1.map forEach 1.map 循环遍历每一项,返回一个新的数组 例: 购物车商品小计: //购物车 var cart=[ {"id":101,"name&quo ...
- JAVA的debug入门和多断电调试
调试的一般都是逻辑 第一步的错误双击数字旁边的蓝色地方,或者点击右键如图 断点的意思就是程序执行在哪里就停止 当找不到DEBUG中的Variables是在位置输入Variables就可以了: 再按下F ...
- 时间序列大数据平台建设(Time Series Data,简称TSD)
来源:https://blog.csdn.net/bluishglc/article/details/79277455 引言在大数据的生态系统里,时间序列数据(Time Series Data,简称T ...
- Device Tree碎碎念
首先推荐elinux.org上一篇关于Device Tree的文章: http://elinux.org/Device_Tree_Usage 这是一篇关于Device Tree的入门文章.对英文犯怵的 ...
- 胖子哥的大数据之路(7)- 传统企业切入核心or外围
一.引言 昨天和一个做互联网大数据(零售行业)的朋友交流,关于大数据传统企业实施的切入点产生了争执,主要围绕两个问题进行了深入的探讨: 问题1:对于一个传统企业而言什么是核心业务,什么是外围业务? 问 ...
- win10和ubuntu16.04双系统Geom Error
报错信息: Geom Error Reboot and Select proper Boot device or Insert Boot Media in selected Boot device a ...
- 将Word,PDF文档转化为图片
#region 将Word文档转化为图片 /// <summary> /// 将Word文档转化为图片 /// </summary> /// <param name=&q ...
- nginx简单学习(tomcat)
一.负载均衡的简单配置 1.下载nginx 2.tomcat*2 配置不同的端口用于正常启动,在jsp中<%= session.getId()%>可以查看jSessionId,tomcat ...
- Qt 常用类 (4)—— QPoint
转载:落叶知秋时 QPoint 类代表一个坐标点,实现在 QtCore 共享库中.它可以认为是一个整型的横坐标和一个整型的纵坐标的组合. 构造 QPoint 类支持以下两种构造方式: QPoint() ...