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 可交互视频教程 此视频是可以交 ...
随机推荐
- SQL Server2008 R2命令行启动及停止SQL服务的方法
===================================================== 在 SQL Server中,想要启动或停止SQL Server服务,通过SQL Server ...
- 设置tab标签页 遮挡部分
效果如下: 主要代码: <div class="need-detail"> <div class="top-title"> <sp ...
- MySQL Disk--磁盘相关参数
/sys/block/sda/queue/nr_requests 磁盘队列长度.默认只有 128 个队列,可以提高到 512 个.会更加占用内存,但能更加多的合并读写操作,速度变慢,但能读写更加多的量 ...
- MySQL--查询表统计信息
============================================================= 可以用show table status 来查看表的信息,如:show ta ...
- php 使用 file_exists 还是 is_file
Jesns 提出 file_exists 比较老了,建议使用 is_file 来判断文件. 经过我的测试,is_file 果然快很多,以后可以改 is_file 来判断文件. 还有相关链接: is_f ...
- [DL] 基于theano.tensor.dot的逻辑回归代码中的SGD部分的疑问探幽
在Hinton的教程中, 使用Python的theano库搭建的CNN是其中重要一环, 而其中的所谓的SGD - stochastic gradient descend算法又是如何实现的呢? 看下面源 ...
- python之 数据类型判定与类型转换
一. 判断数据类型 0.type(x)type()可以接收任何东西作为参数――并返回它的数据类型.整型.字符串.列表.字典.元组.函数.类.模块,甚至类型对象都可以作为参数被 type 函数接受. & ...
- datacolumn 表达式 除数为0
dt.columns.add("avgp",typeof(decimal),"IIF(qty=0,0,price/qty)")
- HDU 1269 迷宫城堡(向量）（Tarjan模版题）
迷宫城堡 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submis ...
- [.net]webform 版本冲突
ASP.NET Web Pages版本问题 调试后浏览器提示: 检测到 ASP.NET Web Pages 的冲突版本: 指定的版本为“1.0.0.0”,而 bin 中的版本为“2.0.0.0”.要继 ...