温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2021-04-07 17:31:44 阅读:427 作者:Leah 栏目:web开发
前端开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

本篇文章给大家分享的是有关使用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-size100%;
}
* {
    padding0;
    margin0;
    box-sizing: border-box;
}
body {
    background#494A5F;
    font-weight500;
    font-size1.05em;
    font-family"Microsoft YaHei","Segoe UI""Lucida Grande", Helvetica, Arial,sans-serif;
}

/* 外层容器 */
.box {
    margin100px auto;
    width400px;
    height400px;
    overflow: hidden;
    position: relative;
}
.box:before {
    content"";
    display: block;
    border30px solid rgba(2552552550.3);
    position: absolute;
    top5px;
    left5px;
    bottom5px;
    right5px;
    opacity1;
    z-index2;
    transition: all 0.3s ease 0s;
}
.box:hover:before {
    top0;
    left0;
    right0;
    bottom0;
    border10px solid rgba(2552552550.18);
}
.box:after {
    content"";
    display: block;
    border8px solid #fff;
    position: absolute;
    top35px;
    left35px;
    bottom35px;
    right35px;
    opacity1;
    z-index1;
    transition: all 0.5s ease 0s;
}
.box:hover:after {
    top0;
    left0;
    bottom0;
    right0;
    opacity0;
}

/* 图片 */
.box img {
    width100%;
    height: auto;
    transformscale(1.2);
    transition: all 0.5s ease 0s;
}
.box:hover img {
    transformscale(1);
}

/* 文字内容 */
.box .box-inner-content {
    position: absolute;
    left45px;
    bottom125px;
    right45px;
    text-align: center;
    color#fff;
    opacity0;
    transition: all 0.3s ease 0s;
}
.box:hover .box-inner-content {
    opacity1;
    bottom20px;
    text-shadow0 0 10px #000;
}

/* 标题 */
.box .title {
    font-size26px;
    font-weight: bold;
    margin0;
}

/* 文本 */
.box .post{
    display: block;
    font-size16px;
    font-style: italic;
    margin-bottom10px;
}

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

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

原文链接:https://www.jb51.net/css/619224.html

css
AI

开发者交流群×