前端每日实战:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效
时间:2019-11-26
本文章向大家介绍前端每日实战:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效,主要包括前端每日实战:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
https://codepen.io/zhang-ou/pen/GdpPLE
可交互视频教程
此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
源代码下载
请从 github 下载。
代码解读
定义 dom,在一个容器中定义按钮的文字,每个字母一个 span,每个 span 有一个 data-text 属性,其值与 span 内的字母相同:
<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>
按钮居中:
html, body {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
设置按钮的尺寸和文字样式:
.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) {
transform: translateY(-100%);
}
.box span:nth-child(even) {
transform: translateY(100%);
}
用伪元素为每个字母增加一个副本:
.box span::before {
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: 0.5s;
}
最后,隐藏容器外的内容:
.box {
overflow: hidden;
}
大功告成!
知识点
原文地址:https://www.cnblogs.com/baimeishaoxia/p/11938392.html
- MySQL NDB Cluster实战
- 译文 | 简明 TensorFlow 教程:混合模型
- 利用SetConsoleTextAttribute函数设置控制台颜色
- python笔记:#001#python简介
- python笔记:#002#第一个python程序
- python笔记:#003#PyCharm 的初始设置
- python笔记:#004#注释
- python笔记:#005#算数运算符
- python笔记:#006#程序执行原理
- python笔记:#007#变量
- python笔记:#008#变量的命名
- python笔记:#009#判断语句
- python笔记:#010#运算符
- python笔记:#011#循环
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Python 技术篇-xlwt库不新建,直接读取已存在的excel并写入
- Python3 列表
- Mycat 核心配置详解
- Python字符串
- 初识 HBase
- Number对象
- Windows 技术篇-设置计划任务,每天自动关机
- Mycat 快速入门
- Python 技术篇-连接qq邮箱服务器,调用qq邮箱发送邮件实战演示,qq邮箱授权码开通方法
- 浅谈数据库集群方案
- SkyWalking - 实现微服务监控告警
- Actuator + Prometheus + Grafana搭建微服务监控平台
- Python 用smtplib库发邮件报错:[WinError 10061] 由于目标计算机积极拒绝,无法连接。解决办法
- python运算符
- Windows 技术篇-禁用windows更新服务,解决windows无法关闭更新问题,解决windows自己启用更新问题。