4
CSS3使用animation实现一个类音量跳动加载图标
source link: https://blog.p2hp.com/archives/8704
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
CSS3使用animation实现一个类音量跳动加载图标 | Lenix Blog
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style> * { margin: 0; padding: 0; } div { display: inline-block; height: 30px; line-height: 40px; text-align: center; position: relative; vertical-align: bottom; } span { display: inline-block; width: 3px; margin-bottom: 0; background-color: red; margin-right: -12px; } .line1 { // alternate意为应该轮流反向播放动画 animation: line 0.6s infinite ease-in-out alternate; } .line2 { animation: line 0.6s 0.2s infinite ease-in-out alternate; } .line3 { animation: line 0.6s 0.4s infinite ease-in-out alternate; } .line4 { animation: line 0.6s 0.6s infinite ease-in-out alternate; } @keyframs line { from { height: 0; } to { height: 20px; } } @-webkit-keyframes line { from { height: 0; } to { height: 20px; } } </style>
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK