在CSS中我添加了0.5s的过渡，但是当我刷新我的页面时，社交媒体图标只是突然以一种不稳定的方式弹出，而不是光滑的外观。我该如何解决这个问题?这是我从教程中编写的代码，用于了解玻璃设计趋势，在视频中，我没有注意到任何像我这样的问题，所以我正在努力学习使过渡顺利，无论视频显示什么。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
overflow: hidden;
}
section{
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(to bottom, #ff4f8b, #dff1ff);
}
section::before{
content: "";
position: absolute;
bottom: 0;
width: 100%;
height: 50%;
z-index: 1;
backdrop-filter: blur(5px);
border-top: 1px solid rgba(255, 255, 255, 0.5);
}
section .color{
position: absolute;
filter: blur(150px);
}
section .color:nth-child(1){
background: #fb2e6c;
width: 600px;
height: 600px;
top: -350px;
}
section .color:nth-child(2){
background: #00d2ff;
width: 500px;
height: 500px;
bottom: -150px;
left: 100px;
}
section .color:nth-child(3){
background: #fffd87;
width: 300px;
height: 300px;
bottom: 50px;
right: 0px;
}
ul{
position: relative;
display: flex;
z-index: 2;
}
ul li{
position: relative;
list-style: none;
margin: 10px;
}
ul li a{
position: relative;
width: 80px;
height: 80px;
display: inline-block;
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
color: #fff;
font-size: 2em;
border-right: 1px solid rgba(255, 255, 255, 0.2);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 5px 45px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(2px);
transition: 0.5s;
overflow: hidden;
}
ul li a:hover{
transform: translateY(-20px);
}
ul li a::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 100%;
background: rgba(255, 255, 255, 0.5);
transform: skewX(45deg) translateX(150px);
transition: 0.5s;
}
ul li a:hover::before{
transform: skewX(45deg) translateX(-150px);
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>My social media info</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<section>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<ul>
<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i>
</a></li>
<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i>
</a></li>
<li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i>
</a></li>
<li><a href="#"><i class="fa fa-whatsapp" aria-hidden="true"></i>
</a></li>
</ul>
</section>
</body>
</html>添加到你的CSS代码中
ul li a{
transition: 0.5s;
}
Ashkan检查此解决方案。如果你的问题已经解决或没有解决，然后回复我。我一定会帮助你的。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>My social media info</title>
<link rel="preload" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
as="style">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow: hidden;
}
section {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(to bottom, #ff4f8b, #dff1ff);
}
section::before {
content: "";
position: absolute;
bottom: 0;
width: 100%;
height: 50%;
z-index: 1;
backdrop-filter: blur(5px);
border-top: 1px solid rgba(255, 255, 255, 0.5);
}
section .color {
position: absolute;
filter: blur(150px);
}
section .color:nth-child(1) {
background: #fb2e6c;
width: 600px;
height: 600px;
top: -350px;
}
section .color:nth-child(2) {
background: #00d2ff;
width: 500px;
height: 500px;
bottom: -150px;
left: 100px;
}
section .color:nth-child(3) {
background: #fffd87;
width: 300px;
height: 300px;
bottom: 50px;
right: 0px;
}
ul {
position: relative;
display: flex;
z-index: 2;
}
ul li {
position: relative;
list-style: none;
margin: 10px;
}
ul li a {
position: relative;
width: 80px;
height: 80px;
display: inline-block;
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
color: #fff;
font-size: 2em;
border-right: 1px solid rgba(255, 255, 255, 0.2);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 5px 45px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(2px);
transition: transform 0.3s;
overflow: hidden;
}
ul li a:hover {
transform: translateY(-20px);
}
ul li a::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 100%;
background: rgba(255, 255, 255, 0.5);
transform: skewX(45deg) translateX(150px);
transition: transform 0.5s;
}
ul li a:hover::before {
transform: skewX(45deg) translateX(-150px);
}
</style>
</head>
<body>
<section>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<ul>
<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i>
</a>
</li>
<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i>
</a>
</li>
<li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i>
</a>
</li>
<li><a href="#"><i class="fa fa-whatsapp" aria-hidden="true"></i>
</a>
</li>
</ul>
</section>
</body>
</html>
你需要使用ease-in-out
ul li a{
transition: 0.5s ease-in-out;
}