程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

CSS & Javascript - 边框动画

发布于2023-05-29 21:20     阅读(1164)     评论(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:-1z-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个字符)