阅读目录
- 阐述
- index.html
- index.js
- index.css
阐述
内容占位动画效果&＃xff0c;这个也是我们经常在一些网站上看到的效果&＃xff0c;这种效果的设计&＃xff0c;可以提升用户体验&＃xff0c;降低用户等待焦虑的情绪。
下面我们一起来看看一下今天练习的最终效果&＃xff1a;
index.html
DOCTYPE html>
<html lang&＃61;"zh">
<head><meta charset&＃61;"UTF-8" /><meta name&＃61;"viewport" content&＃61;"width&＃61;device-width, initial-scale&＃61;1.0" /><link rel&＃61;"stylesheet" href&＃61;"style.css" /><title>网站页面内容占位加载动画效果的实现title><link rel&＃61;"stylesheet" href&＃61;"./index.css">
head>
<body><div class&＃61;"card"><div class&＃61;"card-header animated-bg" id&＃61;"header"> div><div class&＃61;"card-content"><h3 class&＃61;"card-title animated-bg animated-bg-text" id&＃61;"title"> h3><p class&＃61;"card-excerpt" id&＃61;"excerpt"> <span class&＃61;"animated-bg animated-bg-text"> span><span class&＃61;"animated-bg animated-bg-text"> span><span class&＃61;"animated-bg animated-bg-text"> span>p><div class&＃61;"author"><div class&＃61;"profile-img animated-bg" id&＃61;"profile_img"> div><div class&＃61;"author-info"><strong class&＃61;"animated-bg animated-bg-text" id&＃61;"name"> strong><small class&＃61;"animated-bg animated-bg-text" id&＃61;"date"> small>div>div>div>
div><script src&＃61;"./index.js">script>
body>
html>
index.js
const header &＃61; document.getElementById(&＃39;header&＃39;)
const title &＃61; document.getElementById(&＃39;title&＃39;)
const excerpt &＃61; document.getElementById(&＃39;excerpt&＃39;)
const profile_img &＃61; document.getElementById(&＃39;profile_img&＃39;)
const name &＃61; document.getElementById(&＃39;name&＃39;)
const date &＃61; document.getElementById(&＃39;date&＃39;)const animated_bgs &＃61; document.querySelectorAll(&＃39;.animated-bg&＃39;)
const animated_bg_texts &＃61; document.querySelectorAll(&＃39;.animated-bg-text&＃39;)setTimeout(getData, 1500)function getData() {header.innerHTML &＃61;&＃39;![]()
&＃39;title.innerHTML &＃61; &＃39;web 前端 css 特效&＃39;excerpt.innerHTML &＃61;&＃39;一个专注web开发技术学习博客 https://wgchen.blog.csdn.net -------- 别站在烦恼里仰望幸福&＃xff01;&＃39;profile_img.innerHTML &＃61;&＃39;![]()
&＃39;name.innerHTML &＃61; &＃39;前端开发&＃39;date.innerHTML &＃61; &＃39;2022年8月9日&＃39;animated_bgs.forEach((bg) &＃61;> bg.classList.remove(&＃39;animated-bg&＃39;))animated_bg_texts.forEach((bg) &＃61;> bg.classList.remove(&＃39;animated-bg-text&＃39;))
}
index.css
* {box-sizing: border-box;
}body {background-color: #ecf0f1;font-family: &＃39;Roboto&＃39;, sans-serif;display: flex;align-items: center;justify-content: center;height: 100vh;overflow: hidden;margin: 0;
}img {max-width: 100%;
}.card {box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);border-radius: 10px;overflow: hidden;width: 350px;
}.card-header {height: 200px;
}.card-header img {object-fit: cover;height: 100%;width: 100%;
}.card-content {background-color: #fff;padding: 30px;
}.card-title {height: 20px;margin: 0;
}.card-excerpt {color: #777;margin: 10px 0 20px;
}.author {display: flex;
}.profile-img {border-radius: 50%;overflow: hidden;height: 40px;width: 40px;
}.author-info {display: flex;flex-direction: column;justify-content: space-around;margin-left: 10px;width: 100px;
}.author-info small {color: #aaa;margin-top: 5px;
}.animated-bg {background-image: linear-gradient(to right,#f6f7f8 0%,#edeef1 10%,#f6f7f8 20%,#f6f7f8 100%);background-size: 200% 100%;animation: bgPos 1s linear infinite;
}.animated-bg-text {border-radius: 50px;display: inline-block;margin: 0;height: 10px;width: 100%;
}&＃64;keyframes bgPos {0% {background-position: 50% 0;}100% {background-position: -150% 0;}
}
京公网安备 11010802041100号