css扫描动画效果demo示例(整理)
2023-09-14 09:04:05 时间
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css扫描动画</title>
<style>
* {
margin:0;
padding:0;
box-sizing:border-box;
}
body {
height:100vh;
position:relative;
}
.scan {
width:150px;
height:150px;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
backface-visibility:hidden;
}
.scan span {
position:absolute;
left:0;
top:0;
width:100%;
height:20px;
background-color:#00bc12;
z-index:1;
transform:translateY(135%);
animation:move 0.7s cubic-bezier(0.15,0.44,0.76,0.64);
animation-iteration-count:infinite;
}
.scan > div {
z-index:1;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:100%;
backface-visibility:hidden;
}
.scan i {
display:block;
height:1px;
background:#b04b4b;
margin:0 auto 2px;
margin:0 auto 2.2px;
backface-visibility:hidden;
}
.scan i:nth-child(2) {
width:75%;
}
.scan i:nth-child(3) {
width:81%;
}
.scan i:nth-child(4) {
width:87%;
}
.scan i:nth-child(6) {
width:71%;
}
.scan i:nth-child(7) {
width:81%;
}
.scan i:nth-child(8) {
width:65%;
}
.scan i:nth-child(9) {
width:83%;
}
.scan i:nth-child(10) {
width:75%;
}
.scan i:nth-child(12) {
width:86%;
}
.scan i:nth-child(14) {
width:65%;
}
.scan i:nth-child(16) {
width:75%;
}
.scan i:nth-child(18) {
width:83%;
}
.scan:before,.scan:after,.scan em:after,.scan em:before {
border-color:#b04b4b;
content:"";
position:absolute;
width:19px;
height:16px;
border-style:solid;
border-width:0px;
}
.scan:before {
left:0;
top:0;
border-left-width:1px;
border-top-width:1px;
}
.scan:after {
right:0;
top:0;
border-right-width:1px;
border-top-width:1px;
}
.scan em:before {
left:0;
bottom:0;
border-left-width:1px;
border-bottom-width:1px;
}
.scan em:after {
right:0;
bottom:0;
border-right-width:1px;
border-bottom-width:1px;
}
@keyframes move {
0%,100% {
transform:translateY(270%);
}
50% {
transform:translateY(0%);
}
75% {
transform:translateY(672%);
}
}
</style>
</head>
<body>
<div class="scan">
<em></em>
<div>
<i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<i></i><i></i><i></i>
</div>
<span></span>
</div>
</body>
</html>
相关文章
- 解密Animate.css之CSS3动画实现方式大全源码(6星级)
- 主流动画实现方式总结
- 前端每日实战:89# 视频演示如何用 CSS 和 D3 创作旋臂粒子动画
- iOS自定义转场动画实战讲解
- WEB 用视频替换GIF动画
- OpenGL—Android 开机动画源码分析一
- Css 动画的回调
- vue.js 3.2.20: 用photoswipe实现图片的浏览:增加切换动画和自动播放(photoswipe@4.1.3)
- animate CSS动画程序接口(仅Chrome可用)
- Flutter 陈航 22-动画 Animation Hero
- 补间动画 帧动画 基本使用 案例 [MD]
- CSS动画简介
- css和JavaScript实现的星云动画效果
- css 焦点扩散渐变动画(整理)
- css霓虹灯按钮动画效果悬停
- Android 动画之属性动画详解
- 〖大前端 - 基础入门三大核心之CSS篇㉔〗- 动画效果与实战小案例
- 高性能Web动画和渲染原理系列(4)“Compositor-Pipeline演讲PPT”学习摘要【华为云技术分享】
- 高性能Web动画和渲染原理系列(1)——CSS动画和JS动画
- 分享一个纯css制作的动画化,在网页(手机)载入等的时候能够引用!
- Flutter动画系列之SizeTransition
- css——动画、自转
- React中路由切换动画
- Compose-Animation高级别动画