CSS简单的交互动效

最新推荐文章于 2023-12-26 14:08:56 发布
最新推荐文章于 2023-12-26 14:08:56 发布
阅读量375 收藏 1
点赞数 1
分类专栏： 前端 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hthththtt/article/details/107919865
版权 
## 简单的图片动效制作
		效果及源码如下：

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
源码：
1.HTML部分

<!--第一个-->
    <div class="container container1 ">
        <h3>
            <span>NICE</span> LILY
        </h3>
        <p>
            LILY LIKES TO PLAY WITH CRAYONS AND PENCILS
        </p>
    </div>
<!--第二个-->
    <div class="container container2">
        <div id="box">
            <h3>
                <span>CHARMING</span>
                ROXY
            </h3>
            <p>
                ROXY WAS MY BEST FRIEND.SHE'D CROSS ANY <br/>
                BORDER FOR ME.
            </p>
        </div>
    </div>
<!--第三个-->
    <div class="container container3">
        <div class="bg">
        <h3>
            <span>FREE</span>
            SARAH
        </h3>
        <div class="hr"></div>
        <p>
            SAEAH LIKES TO WATCH CLOUDS.SHE'S QUITE DEPRESSED.
        </p>
        </div>
    </div>
<!--第四个-->
    <div class="container container4">
        <div class="bg">
            <h3>
                <span>SILLY</span>
                CHICO
            </h3>
            <p>
                CHICO'S MAIN FEAR WAS <br/>
                MISSING THE MORNING BUS.
            </p>
            <div class="box">
            </div>
        </div>
    </div>
<!--第五个-->
    <div class="container container5">
        <div class="bg">
            <p>
                MILO WENT TO THE WOODS. <br/>
                HE TOOK A FUN RIDE AND <br/>
                NEVER CAME BACK.
            </p>
            <h3>
                <span>FAITHFUL</span>
                MILO
            </h3>
        </div>
    </div>
<!--第六个-->
    <div class="container container6">
        <div class="bg">
            <div class="box_big">
                <h3>
                    <span>CRAZY</span>
                    LAYLA
                </h3>
                <p>
                    When Layla appears she brings ao eternal summer <br/>
                    along
                </p>
            </div>
            <div class="box_small"></div>
        </div>
    </div>
<!--第七个-->
    <div class="container container7">
        <div class="bg">
            <h3>
                <span>WILD</span>
                ROMEO
            </h3>
            <p>
                ROMEO NEVER KNOWS WHAT HE WANTS. HE SEEMED TO BE <br/>
                VERY CROSS ABOUT SOMETHING.
            </p>
        </div>
        <div class="hr hr1"></div>
        <div class="hr hr2"></div>
    </div>
<!--第八个-->
<div class="container container8">
    <div class="bg">
        <h3>
            <span>HOLY</span>
            SADIE
        </h3>
        <p>
            SADIE NEVER TOOK HER EYES OFF ME. <br/>
            SHE HAD A DARK SOUL.
        </p>
    </div>
</div>
<!--第九个-->
<div class="container container9">
    <div class="bg">
        <h3>
            <span>DREAMY</span>
            HONEY
            <span id="now">NOW</span>
        </h3>
        <div id="down_div"></div>
    </div>
</div>

2.CSS样式部分

 *{
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        .container {
            width: 400px;
            height: 400px;
            /*border: 1px solid black;*/
            float: left;
            cursor: pointer;
        }
        .bg {
            width: 400px;
            height: 399px;
            border-top: 1px solid transparent;
        }
        .container p{
            color: white;
        }
        .container h3 {
            color: white;
            font-size: 24px;
        }
        /*第一个*/
        .container1 {
            background-image: url("img/lanrenzhijia1.jpg") ;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            transition: all .5s linear;
        }
        .container1 h3 {
            margin-top: 300px;
            margin-left: 50px;
            transition: all .3s linear;
        }
        .container1 p {
            color: #999999;
            font-size: 12px;
            margin-left: 50px ;
            opacity: 0;
            transition: all .3s linear;
        }
        .container span {
            font-weight: 400;
        }
        .container1:hover {
            background-position: left 1px;
        }
        .container1:hover h3{
           margin-top: 270px;
        }
        .container1:hover p {
            opacity: 1;
        }

        /*第二个*/
        .container2 {
            background: url("img/lanrenzhijia3.jpg") no-repeat center;
            background-size: cover;
            transition: all .3s linear;
        }
        .container2 #box {
            width: 300px;
            height: 300px;
            border: 0 solid white;
            margin: 50px 0;
            transition: all .3s linear;
            float: left;
        }
        .container2 #box h3 {
            margin:80px 0 10px 10px ;
            /*position: absolute;*/
            top: 80px;
            left: 10px;
        }
        .container2 #box p {
            font-size: 13px;
            color: white;
            opacity: 0;
            transition: all .3s linear;
        }
        .container2:hover {
            background-position:left center;
        }
        .container2:hover #box {
            margin-left:55px;
            border: 1px solid white;
        }
        .container2:hover>#box p {
            opacity: 1;
        }
        /*第三个*/
        .container3 {
            background: url("img/lanrenzhijia13.jpg") no-repeat center;
            background-size: cover;
            transition: all .3s linear;

        }
        .container3 .bg {
            background-color: rgba(134, 204, 172, 0);
            overflow: hidden;
            transition: background-color .2s linear;
        }
        .container3 h3 {
            margin: 50px 0 10px 10px;
        }
        .container3 p {
            color: white;
            font-size: 12px;
            margin-left: 410px;
            transition: margin-left .2s linear;
            white-space: nowrap;
        }
        .container3 .hr {
           border-top: 3px solid white;
            margin: 0 10px ;
            width: 0;
            transition: width .3s linear;
        }
        .container3:hover {
            background-position: left center;
        }
        .container3 .bg:hover {
            background-color: rgba(134, 204, 172, .3);
        }
        .container3 .bg:hover>.hr {
            width: 380px;
        }
        .container3 .bg:hover>p {
            margin-left: 10px;
        }
        /*第四个*/
        .container4 {
            background: url("img/lanrenzhijia15.jpg") no-repeat center;
            background-size: cover;
            transition: all .3s linear;
        }
        .container4 .bg {
            background-color: rgba(114, 161, 178, 0);
            transition: all .2s linear;
            position: relative;
        }
        .container4 .bg .box {
            width: 270px;
            height: 270px;
            border: 0 solid white;
            margin: 10px auto;
            padding: 50px 50px;
            transition: all .2s linear;

        }
        .container4 .bg h3 {
            position: absolute;
            top: 125px;
            left: 120px;
        }
        .container4 .bg  p {
            transition: all .2s linear;
            text-align: center;
            position: absolute;
            top: 170px;
            left: 80px;
            /*font-size: 20px;*/
            opacity: 0;
        }
        .container4:hover {
            background-size: 157%;
        }
        .container4 .bg:hover {
            background-color: rgba(114, 161, 178, 0.29);
        }
        .container4 .bg:hover .box {
            width: 240px;
            height: 240px;
            margin-top: 30px;
            border: 1px solid white;
        }
        .container4 .bg:hover p {
            transform: scale(.7);
            opacity: 1;
        }
        /*第五个*/
        .container5 {
            background: url("img/lanrenzhijia11.jpg") no-repeat center;
            background-size: cover;
            transition: all .3s linear;
        }
        .container5 .bg  {
            background-color: rgba(136, 155, 137, 0);
            position: relative;
            transition: all .2s linear;
            overflow: hidden;
        }
        .container5 .bg p {
            font-size: 12px;
            text-align: right;
            width: 200px;
            border-right: 1px solid white;
            margin-top: 50px;
            margin-left: -20px;
            opacity: 0;
            transition: all .2s linear;
        }
        .container5 .bg h3 {
            position: absolute;
            bottom: 20px;
            right: 0;
        }
        .container5:hover .bg{
            background-color: rgba(136, 155, 137, 0.4);
            cursor: pointer;
        }
        .container5 .bg:hover p {
            margin-left: 0;
            opacity: 1;
        }
        /*第六个*/
        .container6 {
            background: url("img/lanrenzhijia4.jpg") no-repeat center;
            background-size: cover;
        }
        .container6 .bg {
            background-color: rgba(54, 81, 56, 0);
            position: relative;
            transition: all .2s linear;
        }
        .container6 .bg .box_big {
            border-left: 1px solid white;
            border-right: 1px solid white;
            width: 300px;
            height: 0;
            position: absolute;
            top: 50px;
            left: 50px;
            transition: height .2s linear;
        }
        .container6 .bg .box_small {
            border-top: 1px solid white;
            border-bottom: 1px solid white;
            width: 0;
            height: 260px;
            position: absolute;
            top: 70px;
            left: 28px;
            transition: width .2s linear;
        }
        .container6 .bg .box_big h3 {
            text-align: center;
            margin-top: 80px;
            left: 60px;
            position: absolute;
            transition: all .3s linear;
        }
        .container6 .bg .box_big p {
            font-size: 12px;
            text-align: center;
            /*margin-top: 15px;*/
            position: absolute;
            top: 125px;
            left: 4px;
            opacity: 0;
            transition: all .3s linear;
        }
        .container6:hover{
            background-size: 161%;
        }
        .container6:hover .bg {
            background-color: rgba(54, 81, 56, 0.43);
        }
        .container6 .bg:hover>.box_big {
            height: 300px;
        }
        .container6 .bg:hover>.box_small {
            width: 345px;
        }
        .container6 .bg:hover h3{
            margin-top:90px ;
        }
        .container6 .bg:hover p {
            opacity: 1;
            top: 120px;
        }
        /*第七个*/
        .container7 {
            background: url("img/lanrenzhijia5.jpg") no-repeat center;
            background-size: cover ;
            transition: all .3s linear;
            position: relative;
        }
        .container7 .bg {
            background-color: rgba(125, 132, 114, 0);
            position: relative;
            transition: all .3s linear;
        }
        .container7  .hr {
            position: absolute;
            border-bottom:1px solid white ;
            width: 330px;
            top: 195px;
            left: 35px;
            border-collapse: collapse;
            transition: all .3s linear;
        }
        .container7 .bg h3 {
            text-align: center;
            margin-top: 150px;
            transition: all .3s linear;
        }
        .container7 .bg p {
            text-align: center;
            margin-top: 50px;
            font-size: 12px;
        }
        .container7:hover {
            cursor: pointer;
        }
        .container7 .bg:hover {
            background-color: rgba(125, 132, 114, 0.56);
        }
        .container7:hover .hr1 {
            transform: rotateZ(45deg);
        }
        .container7:hover .hr2 {
            transform: rotateZ(-45deg);
        }
        .container7 .bg:hover h3{
            margin-top: 140px;
        }
        /*第八个*/
        .container8 {
            background: url("img/lanrenzhijia2.jpg") no-repeat center;
            background-size: cover;
            transition: all .3s linear;
            position: relative;
        }
        .container8 .bg {
            background-color: rgba(121, 126, 136, 0);
            transition: all .2s linear;
        }
        .container8 .bg h3 {
            color: #484C61;
            text-align: center;
            margin-top: 190px;
            transition: all .2s linear;
        }
        .container8 .bg p {
            font-size: 12px;
            text-align: center;
            position: absolute;
            bottom: 0;
            left: 100px;
            opacity: 0;
            transition: all .2s linear;
        }
        .container8:hover .bg {
            background-color: rgba(121, 126, 136, 0.58);
        }
        .container8 .bg:hover h3 {
            margin-top: 160px;
            color: white;
        }
        .container8 .bg:hover p {
            opacity: 1;
            bottom: 10px;
        }
        /*第九个*/
        .container9 {
            background: url("img/lanrenzhijia7.jpg") no-repeat center;
            background-size: cover;
            transition: all .3s linear;
        }
        .container9 .bg {
            position: relative;
            overflow: hidden;
            background-color: rgba(166, 155, 155, 0);
            transition: all .2s linear;
        }
        .container9 #down_div {
            width: 400px;
            height: 20px;
            background-color: white;
            position: absolute;
            bottom: -20px;
            transition: all .2s linear;
        }
        .container9 h3 {
            margin-top: 335px;
            transition: all .2s linear;
        }
        .container9 h3 #now {
            opacity: 0;
            transition: all .2s linear;
        }
        .container9:hover .bg {
            background-color: rgba(166, 155, 155, 0.5);
        }
        .container9 .bg:hover h3 {
            margin-top: 345px;
        }
        .container9 .bg:hover h3>#now {
            opacity: 1;
        }
        .container9 .bg:hover #down_div {
            bottom: 0;
        }
hthththtt
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Amazing！巧用 CSS 视差实现酷炫交互动效.doc
07-09
CSS 视差实现酷炫交互动效 本文将介绍利用 CSS 实现滚动视差效果的一个小技巧，并且，利用这个技巧来制作一些有意思的交互特效。 一、CSS 视差实现滚动视差效果 在之前有一篇文章详细描述过具体方案 - CSS 实现...
有趣的CSS - 汉堡菜单按钮
最新发布
设计师工作日常
02-23 594
用css实现汉堡菜单图标与关闭图标过渡动画交互效果。
CSS动画：创建令人惊叹的前端交互效果
HfswCoder的博客
09-17 587
在现代的前端开发中，动画效果是网页设计中不可或缺的一部分。CSS动画为开发人员提供了一种简单而强大的方式来为网页添加交互性和视觉吸引力。本文将介绍如何使用CSS创建各种令人惊叹的动画效果，并提供相应的源代码供参考。
Amazing~巧用 CSS 视差实现酷炫交互动效
老司机的后备箱
05-19 562
这里，会运用上这样一种纯 CSS 的视差技巧： 使用 transform: translate3d 实现滚动视差 这里利用的是 CSS 3D，实现滚动视差效果。 原理就是： 我们给容器设置上 transform-style: preserve-3d 和 perspective: xpx，那么处于这个容器的子元素就将位于3D空间中， 再给子元素设置不同的 transform: translateZ()，这个时候，不同元素在 3D Z轴方向距离屏幕（我们的眼睛）的距离也就不一样 滚动滚动条，由于子元
HTML创意动画代码
热门推荐
qq_52108058的博客
02-25 1万+
这个代码使用了 Canvas 技术，创建了一个随机生成的气泡背景并且让气泡动态漂浮，形成了一个很有趣的效果。你可以在这个基础上尝试进行一些自己的创意，比如修改气泡的数量、大小、颜色，以及运动的方式等等。 这个代码使用了 CSS 的动画和阴影特效，让页面中的文字在红、橙、黄、绿、蓝五种颜色之间不断变化，形成了一个很有趣的效果。你可以在这个基础上尝试进行一些自己的创意，比如修改文字的大小、样式、颜色，以及变化的频率和方式等等。 该示例中，我们使用了 transform-style: preserve-3d 属性
基于CSS的几个图片交互设计
Dacongs的博客
05-25 1085
三种动画交互设计： hover属性: 1.鼠标移入图片，图片自动放大。 2.鼠标移入时div由半透明状态转换为透明文字上移消失，鼠标指向icon颜色变化为红色。 3.鼠标移入时边框下移，文字显示。 用到以下属性较多: transition 实现逐渐变化的动画 hover 鼠标移入事件 scale 函数放大图片 overflow: hidden; 控制图片...
css3动效登录表单
10-07
通过以上步骤，我们可以创建出一个既有美观外观又具备良好交互体验的CSS3动效登录表单。不过，需要注意的是，在追求视觉效果的同时，也要保证表单的易用性和可访问性，遵循Web无障碍标准，确保所有用户都能顺利地...
CSS实现逼真水滴动效.zip
09-11
总之，CSS3的丰富功能使得创建逼真的水滴动效成为可能，只需要充分利用边框半径、渐变、阴影、动画和交互等技术，就能创造出引人入胜的视觉体验。不断地实践和创新，将使你的CSS技能更上一层楼。
cssWidget:css小动效
04-30
在这个名为"cssWidget:css小动效"的主题中，我们将深入探讨如何利用CSS创建各种有趣的小动效。这个压缩包文件可能包含了一个项目或者一系列示例，旨在展示如何用CSS实现动态效果，虽然开发者提到不特别关注代码规范...
酷炫纯CSS代码实现时空穿梭动效
07-25
在本教程中，我们将深入探讨如何使用纯CSS代码来创建一个引人入胜的"时空穿梭动效"。这个效果可以应用于网站的背景或者特定的交互元素，为用户带来独特的视觉体验。通过学习这个主题，你可以提升自己的CSS技能，更好...
HTML&CSS;-炫酷的链接动效
04-28
《HTML5与CSS3基础教程》（第8版）高清PDF版 本书自第1版至今，一直是讲解HTML和CSS入门知识的经典畅销书，全面系统地阐述HTML5和CSS3 基础知识以及实际运用技术，通过大量实例深入浅出地分析了网页制作的方方面面。最新第8版不仅介绍了 文本、图像、链接、列表、表格、表单等网页元素，还介绍了如何为网页设计布局、添加动态效果等，另 外还涉及调试和发布。本书提供了一个强大的配套网站，上面列出了书中的完整代码示例以及更多优秀实 例及进阶参考资料，以供读者参考学习。
10个值得前端收藏的CSS3动效库（工具）
weixin_34292402的博客
06-20 549
2019独角兽企业重金招聘Python工程师标准>>> ...
花了 7 天看了上千个交互动效神作，我总结出 5 个技巧
sonioo的博客
05-17 4136
首先，我想大家会有这样的问题：什么是微交互 （micro-interaction)？ 　　来自 UXPin（一款在线可交互原型制作工具）的 Carrie Cousins 给出了如下定义：“微交互是在交互设备上的单一交互流程的细节优化。” 　　可能不是太容易理解，那就多看几遍吧。 　　在进入正题之前，有一点我要先声明一下，接下来我要分析的 UI 动效都是出自非常牛逼的大神之手。我非常尊敬他们和
css交互动画,不知道交互动画如何描述？看看这10个交互动画平台
weixin_39631261的博客
08-03 318
下面将介绍基本的简单交互动画还有复杂、酷炫的动画库。可在平台上面操作查看效果，也可下载代码库在代码里面调用。一、WickedCSS animationsWickedCSS 描述一个对象最简单的几十种动效，比如旋转、倾斜、平移、放大缩小、淡入淡出等。在平台上通过点击不同的动效按钮就可以看到动画的实际效果～传送门：http://kristofferandreasen.github.io/wickedC...
css3动画效果简单实例
dogface博客
12-26 643
2、css3实现鸡蛋破壳动画。
CSS3网页常见动态效果……
happy81997的博客
02-23 3164
CSS3网页常见动态效果…… 目录 CSS3网页常见动态效果…… 一、动态背景变色，且有晃动效果 二、输入框伸缩 三、按钮旁边，动态的提示 四、文字环绕效果 一、动态背景变色，且有晃动效果 html代码： <span class="shake">弹</span> CSS代码： .shake{ width:40px; height:40px; display:block; background:lightgreen;
安利简单好用的CSS动效
joan_FontEnd的博客
12-08 284
展示不同 CSS 属性或者不同的课题使用 CSS 来解决的各种方法
css动效：百叶窗、正方体、6种简单动效
qdcxy_lj的博客
03-10 456
css动效：百叶窗、正方体、6种简单动效
css---学习之路（使用css实现简单的动画效果）
小牛叹气生活不易的博客
06-28 804
使用css实现简单的动画效果
B2B电商动效设计：提升交互与视觉体验
随着技术的进步，特别是CSS3和HTML5的广泛应用，Web动效已经成为提升用户体验、增强交互性和视觉吸引力的关键元素。在B类电商业务中，动效设计的重要性更加显著，它能够帮助引导用户，展示信息层级，以及改善整体的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值