使用CSS怎么实现一个图片动画特效

本篇文章给大家分享的是有关使用CSS怎么实现一个图片动画特效，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

html代码

<!-- 主容器 --><div class="box">    <!-- 图片 -->    <img src="images/pic.png" alt=""/>    <!-- 内容 -->    <div class="box-inner-content">        <h4 class="title">Rabbit</h4>    <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;}

以上就是使用CSS怎么实现一个图片动画特效，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注编程网精选频道。