本站消息
CSS & Javascript - 边框动画
发布于2023-05-29 21:20 阅读(1010) 评论(0) 点赞(20) 收藏(4)
我想在此链接的个人资料照片上添加边框动画：https://demo.templateflip.com/creative-cv/
这是小提琴的链接：https://jsfiddle.net/he1w7z2s/
我的小提琴链接看起来有点不同，但我想要的是照片边框上的波浪状动画id=about-profile-image。我如何使用 jQuery 和 CSS 实现这一点？
.about-content-center {
width: 100%;
max-width: 880px;
height: 100%;
padding: 2rem;
padding-top: 0;
}
#about-profile-image {
height: 200px;
width: 200px;
border-radius: 50%;
border: 15px solid transparent;
}
.about-profile-banner {
background: url('https://s3-eu-west-1.amazonaws.com/img3.n-ix.com/wp-content/uploads/2016/12/16152229/Data-Science-Outsourcing-BLOG-banner-1920-Copy-1.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 550px;
position: relative;
}
.about-content-center {
}
.about-h2 {
font-size: 2.5em;
font-weight: 700;
color: white;
} <!-- CoreUI CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<!-- jQuery 3.3.1 -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<div class="about-profile-banner row align-items-center justify-content-center" align="center">
<div class="about-content-center">
<div class="cc-profile-image">
<a href="#"><img id="about-profile-image" src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png" alt="Image"></a>
</div>
<div class="about-author">Eric Kim</div>
<p class="about-author-subtitle text-white">something</p>
<a class="btn btn-primary aos-init aos-animate" href="#" data-aos="zoom-in" data-aos-anchor="data-aos-anchor">Download CV</a>
</div>
</div>解决方案
添加这个css animation使用z-index:-1和z-index:0
.about-content-center {
width: 100%;
max-width: 880px;
height: 100%;
padding: 2rem;
padding-top: 0;
}
#about-profile-image {
height: 200px;
width: 200px;
border-radius: 50%;
border: 15px solid transparent;
}
.about-profile-banner {
background: url('https://s3-eu-west-1.amazonaws.com/img3.n-ix.com/wp-content/uploads/2016/12/16152229/Data-Science-Outsourcing-BLOG-banner-1920-Copy-1.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 550px;
position: relative;
}
.about-content-center {
}
.about-h2 {
font-size: 2.5em;
font-weight: 700;
color: white;
}
@-webkit-keyframes rounded{
0%{-webkit-transform:scale(0.6, 0.6);transform:scale(0.6, 0.6);opacity:0.0}
50%{opacity:1.0}
100%{-webkit-transform:scale(1, 1);transform:scale(1, 1);opacity:0.0}
}
@keyframes rounded{
0%{-webkit-transform:scale(0.6, 0.6);transform:scale(0.6, 0.6);opacity:0.0}
50%{opacity:1.0}
100%{-webkit-transform:scale(1, 1);transform:scale(1, 1);opacity:0.0}
}
.cc-profile-image a {
position: relative;
z-index: 0;
}
.cc-profile-image a:before {
content: "";
border: 15px solid rgba(55,140,63,0.6);
border-radius: 50%;
height: 200px;
width: 200px;
position: absolute;
left: 0;
-webkit-animation: rounded 1.6s ease-out;
animation: rounded 1.6s ease-out;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
opacity: 0.0;
z-index: -1;
}<!-- CoreUI CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<!-- jQuery 3.3.1 -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<div class="about-profile-banner row align-items-center justify-content-center" align="center">
<div class="about-content-center">
<div class="cc-profile-image">
<a href="#"><img id="about-profile-image" src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png" alt="Image"></a>
</div>
<div class="about-author">Eric Kim</div>
<p class="about-author-subtitle text-white">something</p>
<a class="btn btn-primary aos-init aos-animate" href="#" data-aos="zoom-in" data-aos-anchor="data-aos-anchor">Download CV</a>
</div>
</div>所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/528443/753054fc9b8624f5ffbc/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
20
0
收藏该文
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力
程序员的那些事(new)
电子书(new)
博客(new)
视频教程(new)
问答(new)
游戏(new)