1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕（残缺）
原文地址：1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效
扩展后地址：https://scrimba.com/c/cJkzMfd
HTML代码：
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="animation">唉，没有啥新想法添加。。。</div>
<div class="box">
<span data-text="B">B</span>
<span data-text="U">U</span>
<span data-text="T">T</span>
<span data-text="T">T</span>
<span data-text="O">O</span>
<span data-text="N">N</span>
</div>
<script src="index.pack.js"></script>
<script>
/* alert("唉，没有啥新想法添加。。。"); */
</script>
</body>
</html>
css代码：
.animation{
position: absolute;
top:0px;
/* 让字体位于窗口顶部右边外围 这里的数据是死的*/
right: -210px;
/*
规定动画的名称
规定动画的时长
规定动画的次数
*/
animation:mymove 10s infinite;
animation-delay:0s;
/*Safari and Chrome 兼容*/
-webkit-animation:mymove 10s infinite;
-webkit-animation-delay:0s;
}
@keyframes mymove{
from {
left:100%;
}
to {
left:-200px;
}
}
@-webkit-keyframes mymove /*Safari and Chrome*/{
from {left:100%;}
to {left:-200px;}
}
/* 按钮居中 */
html, body {
margin:;
padding:;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
/* 对于超出的内容隐藏 */
overflow: hidden;
}
/* 设置按钮的尺寸和文字样式 */
.box {
width: 200px;
height: 60px;
border: 2px solid black;
text-align: center;
font-size: 30px;
line-height: 60px;
font-family: sans-serif;
}
/* 按钮的每个字母都设置为行内块元素，以便单独设置动效 */
.box span {
display: inline-block;
color: blue;
}
/*把字母交错地显示在按钮容器之外，第奇数个元素显示在上，第偶数个元素显示在下：*/
.box span:nth-child(odd) {
/* Y轴向上平移自身高度单位 */
transform: translateY(-100%);
}
.box span:nth-child(even) {
transform: translateY(100%);
}
/* 用伪元素为每个字母增加一个副本：*/
.box span::before {
/* attr 的解说 http://www.runoob.com/cssref/pr-gen-content.html */
content: attr(data-text);
position: absolute;
color: red;
}
/* 让伪元素的字母也交错显示，位置与其原始元素相对：*/
.box span:nth-child(odd)::before {
transform: translateY(100%);
}
.box span:nth-child(even)::before {
transform: translateY(-100%);
}
/* 为按钮增加鼠标划过样式，设置緩动时间，使其有动画效果：*/
.box:hover span {
transform: translateY(0);
}
.box span {
transition: 1s;
}
1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕（残缺）的更多相关文章
- 如何用纯 CSS 创作一个按钮文字滑动特效
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. 在线预览 https://codepen.io/zhang-ou/pen/GdpPLE 可交互视频教 ...
- 前端每日实战：1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/zhang-ou/pen/GdpPLE 可交互视频教程 此视频 ...
- 2.纯 CSS 创作一个矩形旋转 loader 特效
原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR 扩展地址:https://codepen.io/pen/ HT ...
- 如何用纯 CSS 创作一个 3D 文字跑马灯特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/GdrrZq 可交互视频教程 此视 ...
- 前端每日实战：7# 视频演示如何用纯 CSS 创作一个 3D 文字跑马灯特效
效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/GdrrZq 可交互视频教程 此视频是可以交 ...
- 7.纯 CSS 创作一个 3D 文字跑马灯特效
原文地址:https://segmentfault.com/a/1190000014663038 感想:简单的从右到左动画 HTML代码: <div class="box"& ...
- 如何用纯 CSS 创作一个荧光脉冲 loader 特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/erRzzR 可交互视频教程 此视 ...
- 前端每日实战：11# 视频演示如何用纯 CSS 创作一个荧光脉冲 loader 特效
效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/erRzzR 可交互视频教程 此视频是可以交 ...
- 前端每日实战：2# 视频演示如何用纯 CSS 创作一个矩形旋转 loader 特效
效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/vjLQMM 可交互视频教程 此视频是可以交 ...
随机推荐
- CTF-练习平台-Misc之 再来一道隐写
十二.再来一道隐写 下载文件后打开,用常用的几个方法都没有找到有用的信息,然后观察图片发现搞度有点低,所以用WinHex打开把图片高度改大,保存.再次打开图片发现flag
- window.location.href跳转问题2
"window.location.href"."location.href"是本页面跳转 "parent.location.href"是上一 ...
- day35 python学习GIL解释器锁
二 GIL介绍 GIL本质就是一把互斥锁,既然是互斥锁,所有互斥锁的本质都一样,都是将并发运行变成串行,以此来控制同一时间内共享数据只能被一个任务所修改,进而保证数据安全. 可以肯定的一点是:保护不同 ...
- Json.NET Updates: Merge, Dependency Injection, F# and JSONPath Support
Json.NET 6.0 received 4 releases this year, the latest last week. Over these releases, several new f ...
- 命令行net time同步时间（内网）
首先还是推荐大家使用Internet时间来同步自己计算机的时间,这样做主要是方便,就是设置一个ntp服务器,我推荐下面的三个ntp服务器地址. time.asia.apple.com //亲测有效 a ...
- Java调用.Net WebService参数为空解决办法 (远程)调试webservice方法
同事遇到一个很囧的问题,java调,netwebservice的时候,调用无参数方法成功,调用有参数的方法每次我这边的webservice日志都记录参数为空,而我自己.Net程序调用完全没有问题,后面 ...
- Oracle 基础知识入门
前记: 近来项目用到Oracle数据库,大学学了点,后面基本忘记得差不多了,虽然基本语法跟sql 差不多,但是oracle知识是非常多的. 这里简单说点基础知识,希望后面补上更多的关于ORacle知识 ...
- JMeter连接数据库(查询出的数据作为参数)
针对Mysql jdbc:mysql://ip:3306/数据库名?useUnicode=true&characterEncoding=utf8&allowMultiQueries=t ...
- CountDownLatch、CyclicBarrier、Semaphore 区别
CountDownLatch.CyclicBarrier.Semaphore 区别: CountDownLatch和CyclicBarrier都能够实现线程之间的等待,只不过它们侧重点不同: Coun ...
- Microsoft.Crm.Setup.SrsDataConector.RegisterServerAction 操作失败 Requested value 'Geo' was not found 的解决方法
error installing ssrs data connector on sql server for dynamics crm 2011 I think the post title says ...