怎样用CSS制作一个隐藏显示的相框特效

发布时间：2023-10-07 14:58:19 所属栏目：语言来源：

导读：本文介绍了CSS 图片动画特效的示例代码（相框），分享给大家，具体如下：

HTML代码



<div class="box">



<img src="images/pic.png" alt=""/>

<!-

本文介绍了CSS 图片动画特效的示例代码（相框），分享给大家，具体如下：

HTML代码



<div class="box">

    

    <img src="images/pic.png" alt=""/>

    

    <div class="box-inner-content">

        <h3 class="title">Rabbit</h3>

    <span class="post">Web Developer</span>

    </div>

</div>

CSS代码

/* 初始化 */

body,

html {

    font-size: 100%;

}

* {

    padding: 0;

    margin: 0;

    box-sizing: border-box;

}

body {

    background: #494A5F;

    font-weight: 500;

    font-size: 1.05em;

    font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif;

}

/* 外层容器 */

.box {

    margin: 100px auto;

    width: 400px;

    height: 400px;

    overflow: hidden;

    position: relative;

}

.box:before {

    content: "";

    display: block;

    border: 30px solid rgba(255, 255, 255, 0.3);

    position: absolute;

    top: 5px;

    left: 5px;

    bottom: 5px;

    right: 5px;

    opacity: 1;

    z-index: 2;

    transition: all 0.3s ease 0s;

}

.box:hover:before {

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    border: 10px solid rgba(255, 255, 255, 0.18);

}

.box:after {

    content: "";

    display: block;

    border: 8px solid #fff;

    position: absolute;

    top: 35px;

    left: 35px;

    bottom: 35px;

    right: 35px;

    opacity: 1;

    z-index: 1;

    transition: all 0.5s ease 0s;

}

.box:hover:after {

    top: 0;

    left: 0;

    bottom: 0;

    right: 0;

    opacity: 0;

}

/* 图片 */

.box img {

    width: 100%;

    height: auto;

    transform: scale(1.2);

    transition: all 0.5s ease 0s;

}

.box:hover img {

    transform: scale(1);

}

/* 文字内容 */

.box .box-inner-content {

    position: absolute;

    left: 45px;

    bottom: 125px;

    right: 45px;

    text-align: center;

    color: #fff;

    opacity: 0;

    transition: all 0.3s ease 0s;

}

.box:hover .box-inner-content {

    opacity: 1;

    bottom: 20px;

    text-shadow: 0 0 10px #000;

}

/* 标题 */

.box .title {

    font-size: 26px;

    font-weight: bold;

    margin: 0;

}

/* 文本 */

.box .post{

    display: block;

    font-size: 16px;

    font-style: italic;

    margin-bottom: 10px;

}

这里用了像素设定容器的大小，如果用bootstrap等框架的话，可以设置成响应式。

因为图片设置成100%，所以会自适应外层容器的大小。

需要注意的是外层容器的position一定要设置成relative。

主要用到CSS3的transition属性，我这里没设浏览器前缀，现在大多数浏览器都已经兼容这个属性了。如果不放心又不嫌麻烦的话，最好还是把各浏览器前缀加上。

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!