Demo14：图片渐入

最新推荐文章于 2022-04-10 13:07:01 发布
最新推荐文章于 2022-04-10 13:07:01 发布
阅读量491 收藏 1
点赞数 1
分类专栏： HTML入门 Demo 文章标签： 动画 css 图片渐入
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ljl_web/article/details/50768583
版权

利用css动画实现图片渐入的功能

实现效果

点击文字实现相应的效果
图片渐入

代码实现

<!DOCTYPE html>
<html>
    <head>
        <title> 图片渐入效果的实现 </title>
        <meta charset="utf-8"/>
        <style>
            a{
                display:inline-block;
                width:100px;
                height:20px;
                color:#e4393c;
                background:pink;
                text-align:center;
                position:relative;
                z-index:20;
            }
            #d1{
                width:430px;
                margin:20px auto;
            }
            #d2{
                width:350px;
                height:350px;
                padding:15px;
                border:1px solid #ddd;
                margin-top:30px;
                position:relative;
                z-index:9;
                margin:0px auto;

            }
            img{
                display:none;
                position:absolute;
            }
            @keyframes img1{
                from{
                    transform:translate(-350px);
                }
                to{
                    transform:translate(0px);
                }
            }
            @-webkit-keyframes img1{
                from{
                    transform:translate(-350px);
                }
                to{
                    transform:translate(0px);
                }
            }
            #img1:target{
                display:block;
                z-index:10;
                animation:img1 5s linear;
                -webkit-animation:img1 5s linear;
                -webkit-animation-fill-mode:forwards;
            }           
            @keyframes img2{
                from{
                    transform:translate(0px,350px);
                }
                to{
                    transform:translate(0px,0px);
                }
            }
            @-webkit-keyframes img2{
                from{
                    transform:translate(0px,350px);
                }
                to{
                    transform:translate(0px,0px);
                }
            }
            #img2:target{
                display:block;
                z-index:11;
                animation:img2 5s linear;
                -webkit-animation:img2 5s linear;
                -webkit-animation-fill-mode:forwards;
            }
            @keyframes img3{
                from{
                    transform:scale(0.1);
                }
                to{
                    transform:scale(1);
                }
            }
            @-webkit-keyframes img3{
                from{
                    transform:scale(0.1);
                }
                to{
                    transform:scale(1);
                }
            }
            #img3:target{
                display:block;
                z-index:12;
                animation:img3 5s linear;
                -webkit-animation:img3 5s linear;
                -webkit-animation-fill-mode:forwards;
            }   
            @keyframes img4{
                from{
                    transform:scale(0.1) rotate(0deg);

                }
                to{
                    transform:scale(1) rotate(720deg);

                }
            }
            @-webkit-keyframes img4{
                from{
                    transform:scale(0.1) rotate(0deg);

                }
                to{
                    transform:scale(1) rotate(720deg);

                }
            }
            #img4:target{
                display:block;
                z-index:13;
                animation:img4 5s linear;
                -webkit-animation:img4 5s linear;
                -webkit-animation-fill-mode:forwards;
            }
        </style>
    </head>
    <body>
        <div id="d1">
            <a href="#img1">左移进入</a>
            <a href="#img2">上移进入</a>
            <a href="#img3">放大进入</a>
            <a href="#img4">放大旋转进入</a>
        </div>
        <div id="d2">
            <img src="a.png" id ="img1" />
            <img src="b.png" id ="img2" />
            <img src="c.png" id ="img3" />
            <img src="d.png" id ="img4" />
        </div>
    </body>
</html>
ljl_web
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css3使图片具有淡入淡出的效果
tarajk05的专栏
12-23 9712
css样式如下： .anim_fade_image{ position:absolute; -webkit-transition: opacity 3s ease-in-out; -moz-transition: opacity 3s ease-in-out; -o-transition: opacity 3s ease-
h5+css3最简单的图片飞入以及淡入淡出效果
weixin_33843947的博客
07-13 1772
正如很多小伙伴们所知道的，楼主最近在开发移动端的响应式布局的自适应页面了，现在分享一个刚写完的小demo html: <!doctype html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1, minim...
android欢迎页面图片的渐入切换效果
MonaZhou的博客
09-07 1163
点击打开链接
用css动画实现图片淡入淡出轮播
paradoxaaa_的博客
04-10 3088
html部分 <div id="silder-box"> <div class="silder-img"> <ul> <li><img src="Res/header-01.jpg" ></li> <li><img src="Res/header-02.jpg" ></li> <li><img src="Res/header-03.jpg" >
CSS图片淡入淡出效果
y670340559的博客
10-31 1万+
@-webkit-keyframes fadeInOut {    0% {        opacity:1;     }    25% {        opacity:0;    }    50% {        opacity: 0;        }    75% {        opacity:1;    } } .anim_fade_image {
image-uploader-demo:图片上传器演示
03-12
【标题】"image-uploader-demo"是一个用于图片上传的演示项目，主要展示了如何在Web应用中实现图片上传功能。此项目可能是一个基于Vue.js框架构建的前端应用，Vue.js是目前非常流行的一种轻量级、渐进式的JavaScript...
jQuery图片渐隐切换菜单demo
05-19
在"jQuery图片渐隐切换菜单"中，jQuery的动画功能尤为重要，它实现了图片在切换时的平滑过渡，即渐隐效果。 渐隐切换效果通常基于jQuery的`.fadeOut()`和`.fadeIn()`方法。这两个方法分别用于使元素逐渐消失和显现...
android 海量图片下载 加载 demo
11-21
Select the picture from android default album 这个demo包含图片管理功能，ImageManager2这个类具有异步从网络下载图片，从sd读取本地图片，内存缓存，硬盘缓存，图片使用动画渐现等功能，已经将其应用在包含大量...
Android参考源码-渐入渐出动画 无闪烁 无黑底 Demo.zip
03-08
本示例"Android参考源码-渐入渐出动画 无闪烁 无黑底 Demo.zip"提供了实现这种效果的源代码，旨在帮助开发者学习如何在Android应用中创建流畅且无闪烁、无黑底问题的渐变动画。 首先，我们要理解Android中的两种...
android图片处理集合demo
02-21
"android图片处理集合demo"是一个示例项目，集中展示了多种图片处理技术。虽然代码可能没有经过精心整理，但仍然能为开发者提供宝贵的参考。 1. 图片加载库： Android原生的Bitmap API在处理大量或大尺寸图片时...
css内容渐入效果实现
weixin_30276935的博客
09-01 2381
.fade-in-section { opacity: 0; transform: translateY(20vh); visibility: hidden; transition: opacity 1200ms ease-out, transform 600ms ease-out, visibility 1200ms ease-out; w...
【Unity&2D&Sprite&描边&特效&Shader】2D2.5D像素图片描边特效实现
BuladeMian的博客，菜得抠脚，菜得真实
02-25 1万+
今天偶然在网上找到一个解决 2D2.5D像素图片描边特效实现 的文章， 原文地址在 参考资料 1 里面，里面讲到如何使用他的方法 十分详细，本文不再赘述。 本文讲使用他的方法以后，的实现，以及一些问题 ------------------------------------------------------------------------原文Shader代码 Shader
【NGUI】Unity实现英雄联盟选择皮肤效果
热门推荐
Zok93
10-30 1万+
using UnityEngine; using System.Collections; /// /// 脚本位置：Card预制体身上 /// 脚本功能：保存Card所有数据信息，用于更换图片 /// public class CardInfo : MonoBehaviour { // 保存3张图片的深度信息 // 背景图片-》toggle激活图片-》人物图片 public UIWidg
Unity让图片动起来
ms_clear的博客
04-28 1534
原文章链接：添加链接描述
（七）大图展示Demo引出的UIScrollView的使用
weixin_30477293的博客
02-05 2149
UIScrollView是一个能够滚动的视图控件，可以通过滚动查看所有内容。 用途： 1.一张大图屏幕放不下，可以用各个方向的手势来看大图的各个部分。 2.手机的设置页面有很多的选项，需要上下滚动来查看。 使用步骤： 1.将需要展示的内容添加到UIScrollView中 2.设置UIScrollView的contentSize属性，表示所有内容的尺寸（滚动的范围）。 ...
Unity实现滑页效果（UGUI）
湖中岛——玄雨
04-07 5425
简介项目需要...直接展示效果吧： 原理使用UGUI提供的ScrollRect和ScrollBar组件实现基本滑动以及自己控制每次移动一页来达到滑页的效果。 实现过程1.创建两个panel，上面的panel用于显示，下面的panel用于存放按钮 2.在TopPanel上添加ScrollRect脚本，用于滑动 3.在TopPanel下创建一个新的Panel，并在子Panel下拜访要显示的对象 4.将该
Unity UGUI烟雾效果
weixin_30575309的博客
08-07 1075
在UV流动的同时，加入正弦函数扰动，由于美术要求图片重用，所以添加轮廓剪切，支持UI裁剪，叠加区域编辑。 效果： 代码如下： Shader "UI/Unlit/AddFlowTex" { Properties { [PerRendererData] _MainTex("Sprite Texture", 2D) = "white" {} ...
【游戏开发实验】Unity音频效果可视化显示（GetSpectrumData接口）
linxinfa的专栏
05-05 5468
文章目录一. 前言二. GetSpectrumData接口三. 具体制作 一. 前言 我们可以在音频软件中可以看到音频一些特效效果，比如这样： 在Unity中如何制作类似的这种效果呢。 我做了个简易的效果（虽然效果很简单，但我相信懂了原理之后，上面这种效果也可以做出来了），如下： 二. GetSpectrumData接口 AudioSources有一个接口，用于采样声谱数据块： public ...
射线应用（第三人称Demo制作）.docx
12-08
"Unity射线应用在第三人称Demo制作中的实践" 在本文中，我们将探讨如何使用Unity引擎制作一个第三人称Demo，重点在于射线的应用。开发者在Windows 7环境下使用Unity3D 3.4版本，并在MB525 defy Android 2.2.1设备上...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值