CSS 图片动画特效的示例代码（相框）

前端  /  管理员 发布于 7年前   206

本文介绍了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属性，我这里没设浏览器前缀，现在大多数浏览器都已经兼容这个属性了。如果不放心又不嫌麻烦的话，最好还是把各浏览器前缀加上。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。