动画

最新推荐文章于 2023-02-28 14:44:54 发布
最新推荐文章于 2023-02-28 14:44:54 发布
阅读量75 收藏
点赞数
分类专栏： 前端 文章标签： css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pp_46918/article/details/110099856
版权

公告栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>微信导航栏案例</title>
	<style>
#scroll_div {
            height:30px;
            overflow: hidden;
            white-space: nowrap;
            /* width:100%; */
            width:1024px;
			margin-left: 20px;
			border: 1px solid #ccc;
            background-color: #fff;
            color: #999999;
            /* margin: 1rem 0rem; */
            text-align: center;
        }
#scroll_begin,#scroll_end {
	display: inline;
}
	</style>
	
</head>
<body>
	<div id="scroll_div" class="fl">
        <div id="scroll_begin">
            1.尊敬的用户，您好！<span class="pad_right">感谢您的长期支持，</span>
            2.尊敬的用户，您好！<span class="pad_right">感谢您的长期支持，</span>
            3.尊敬的用户，您好！<span class="pad_right">感谢您的长期支持，</span>
            4.尊敬的用户，您好！<span class="pad_right">感谢您的长期支持</span>
            5.尊敬的用户，您好！<span class="pad_right">感谢您的长期支持！</span>
            .6尊敬的用户，您好！<span class="pad_right">感谢您的长期支持</span>
            .7.尊敬的用户，您好！<span class="pad_right">感谢您的长期支持</span>
            8.尊敬的用户，您好！<span class="pad_right">感谢您的长期支持</span>
        </div>
        <div id="scroll_end"></div>
	</div>
	<script>
		//文字横向滚动
		function ScrollImgLeft(){
				var speed=50;//初始化速度 也就是字体的整体滚动速度
				var MyMar = null;//初始化一个变量为空 用来存放获取到的文本内容
				var scroll_begin = document.getElementById("scroll_begin");//获取滚动的开头id
				var scroll_end = document.getElementById("scroll_end");//获取滚动的结束id
				var scroll_div = document.getElementById("scroll_div");//获取整体的开头id
				scroll_end.innerHTML=scroll_begin.innerHTML;//滚动的是html内部的内容,原生知识!
		//定义一个方法
				function Marquee(){
					if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0)
						scroll_div.scrollLeft-=scroll_begin.offsetWidth;
					else
						scroll_div.scrollLeft++;
				}
				MyMar=setInterval(Marquee,speed);//给上面的方法设置时间  setInterval
		//鼠标点击这条公告栏的时候,清除上面的方法,让公告栏暂停
				scroll_div.onmouseover = function(){
					clearInterval(MyMar);
				}
		//鼠标点击其他地方的时候,公告栏继续运动
				scroll_div.onmouseout = function(){
					MyMar = setInterval(Marquee,speed);
				}
			}
			ScrollImgLeft();
		</script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background-color: #333;
        }
        
        .map {
            position: relative;
            width: 747px;
            height: 616px;
            /* background: url(media/map.png) no-repeat; */
            margin: 0 auto;
        }
        
        .city {
            position: absolute;
            top: 227px;
            right: 193px;
            color: #fff;
        }
        
        .tb {
            top: 500px;
            right: 80px;
        }
        
        .dotted {
            width: 8px;
            height: 8px;
            background-color: #09f;
            border-radius: 50%;
        }
        
        .city div[class^="pulse"] {
            /* 保证我们小波纹在父盒子里面水平垂直居中 放大之后就会中心向四周发散 */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 8px;
            height: 8px;
            box-shadow: 0 0 12px #009dfd;
            border-radius: 50%;
            animation: pulse 1.2s linear infinite;
        }
        
        .city div.pulse2 {
            animation-delay: 0.4s;
        }
        
        .city div.pulse3 {
            animation-delay: 0.8s;
        }
        
        @keyframes pulse {
            0% {}
            70% {
                /* transform: scale(5);  我们不要用scale 因为他会让 阴影变大*/
                width: 40px;
                height: 40px;
                opacity: 1;
            }
            100% {
                width: 70px;
                height: 70px;
                opacity: 0;
            }
        }
    </style>
</head>

<body>
    <div class="map">
        <div class="city">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
        <div class="city tb">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
    </div>
</body>

</html>

图片放大

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            overflow: hidden;
            float: left;
            margin: 10px;
        }
        
        div img {
            transition: all .4s;
        }
        
        div img:hover {
            transform: scale(1.1);
        }
    </style>
</head>

<body>
    <div>
        <a href="#"><img src="media/scale.jpg" alt=""></a>
    </div>
    <div>
        <a href="#"><img src="media/scale.jpg" alt=""></a>
    </div>
    <div>
        <a href="#"><img src="media/scale.jpg" alt=""></a>
    </div>
</body>

</html>

图标动画

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            overflow: hidden;
            float: left;
            margin: 10px;
        }
        
        div img {
            transition: all .4s;
        }
        
        /* div img:hover {
            transform: scale(1.1);
        } */
        img {
            /* 保证我们小波纹在父盒子里面水平垂直居中 放大之后就会中心向四周发散 */
            position: absolute;
            /* top: 50%;
            left: 50%; */
            /* transform: translate(-50%, -50%); */
            width: 40px;
            height: 40px;
            /* box-shadow: 0 0 12px #009dfd; */
            border-radius: 50%;
            animation: pulse 1.2s linear infinite;
        }
        @keyframes pulse {
            0% {}
            50% {
                /* transform: scale(5);  我们不要用scale 因为他会让 阴影变大*/
                /* width: 40px;
                height: 40px;
                opacity: 1; */
                transform: scale(1.2);
            }
            100% {
                transform: scale(1);

                /* width: 70px;
                height: 70px;
                opacity: 0; */
            }
        }


    </style>
</head>

<body>
    <div>
        <a href="#"><img src="media/scale.jpg" alt=""></a>
    </div>
</body>

</html>
潇潇的雨幕里
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Unity动画系统详解3：如何播放、切换动画？
大智_Unity探路者
05-31 3万+
摘要：【长文预警，建议先收藏】有了模型和多个动画以后，在Unity中如何控制它们的播放和切换呢？本文带你一站式解析Unity的Animator模块。 洪流学堂，让你快人几步。你好，我是跟着大智学Unity的萌新，我叫小新，这几周一起来复（yu）习（xi）动画系统。 大智：“小新，还记得Unity的动画来源有哪些么？” 小新：“有Unity中制作和外部导入两种，哦对！还可以用代码写动画，不过我不会，嘿嘿” 大智：“没错，前两天我们学习的其实主要是Animation Clip的内容，也就是一个物体对应的一
JavaScript动画
小王的博客
08-26 7250
在设计前端页面时，会用到很多效果，我们可以采用CSS样式或JavaScript来实现，在这里给大家介绍JS动画
Android动画
热门推荐
zhaojun的博客
03-21 1万+
这篇博客主要总结一下自己在项目中对动画的一些使用。我写博客，其实更多的是总结自己在工作中用到的一些知识。比如某一段时间一个知识点相关的技术用的比较多，那我会总结一下。其实，对于Android动画的总结，这是几个月前就应该写完的一篇博客，然而那段时间工作实在是太忙了，没有及时去总结。于是，今天把这篇博客提上来，总结一下Android中动画的一些使用。
spi动画总结
weixin_43575775的博客
02-20 3422
fyge文档 fyge在线测试平台：FYGE PlaygroundSpine: Spine | fygespine动画生成方法(什么是spine动画？ - 知乎)spine动画就是通过spine软件制作出来的2d骨骼动画。简单的说就是，提供一张图片，给这张图片分区设置骨骼数据，然后骨骼动起来，达到动画的效果。方式一：通过脚本github仓库 https://github.com/EsotericSoftware 下载ps处理脚本如：https://github.com/EsotericSoftware/sp
二维动画毕业论文参考文献精选
sun13212715744的博客
10-26 4843
随着二维动画制作技术的发展，二维动画在娱乐、广告、教育等很多领域都有着广泛的应用，已成为人们生活中必不可少的一部分。本位精选了200个中英文"二维动画毕业论文参考文献范例",希望对你有所帮助。
Android 动画详解
金戈鐡馬
02-28 4607
Android动画的分类与使用学习Android必不可少的就是动画的使用了，在Android版本迭代的过程中，出现了很多动画框架，这里做一个总结。Android动画类型分类逐帧动画【Frame Animation】，即顺序播放事先准备的图片。补间动画【Tween Animation】，View的动画效果可以实现简单的平移、缩放、旋转。属性动画【Property Animation】，补间动画增强版，支持对对象执行动画。
SVG实现动画效果
weixin_70815247的博客
07-18 6754
SVG中提供三种常用动画标记 基础动画 形变动画 路径动画 SVG动画使用方式 创建动画，告诉动画标记哪个元素需要执行动画 创建元素，在元素中说明需要执行什么动画 SVG动画属性 attributeType: CSS/XML规定的属性值的名称空间 attributeName: 规定元素的哪个属性会产...
HTML动画
qq_42765662的博客
07-14 4108
css动画相关的实现
css的animation动画
yuan0209的博客
11-25 1万+
顾名思义，它可以控制动画的状态 – 运行或者暂停,类似于视频播放器的开始和暂停,是 CSS 动画中有限的控制动画状态的手段之一。在 1-2 秒范围内随机，这样，我们就可以得到非常自然且不同的上升动画效果，基本不会出现重复的画面，很好的模拟了随机效果。属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由。中定义的第一帧这种说法，因为动画运行的第一帧和最后一帧的实际状态还会受到动画运行方向。，可以有效的构建更为随机的动画效果，让动画更加的自然。
Android动画之帧动画
Android 领域开发程序员，希望通过写博客的方式不断的总结提升自己，大家共同进步哦！
11-18 5414
帧动画就是顺序播放一组预先定义好的图片，就类似于我们观看视频，就是一张一张的图片连续播放。当播放速度达到一定速度后，就会在视觉上看起来像视频播放一样。“人眼舒适放松时可视帧数是每秒24帧,集中精神时不超过30帧,眨眼时睁开眼瞬间可以捕捉到的帧数是30帧以上，为了性能优化，一般稍大于30帧就差不多了，当然，现在的手机，一般为60帧，又些可以开到120帧，每秒刷新120次，在界面切换和浏览各种界面时会流畅很多，当然带来的就是消耗更多的资源。
沙雕动画网吧场景-沙雕动画素材资源文件
03-28
在“沙雕动画网吧场景-沙雕动画素材资源文件”中，我们可以深入了解到制作这类动画所需的素材和步骤，这对于想要学习或者从事沙雕动画制作的人来说是非常宝贵的资源。 首先，沙雕动画的制作通常涉及到以下几个关键...
threejs 瀑布 动画 数据
最新发布
04-16
threejs 瀑布 动画 数据 threejs 瀑布 动画 数据 threejs 瀑布 动画 数据 threejs 瀑布 动画 数据 threejs 瀑布 动画 数据 threejs 瀑布 动画 数据 threejs 瀑布 动画 数据 threejs 瀑布 动画 数据 threejs 瀑布 ...
Unity DoTween 动画
03-04
Unity DoTween 动画
抖音直播间赠送礼物飘屏动画
05-31
抖音直播间赠送礼物飘屏动画； 赠送金币动画； 赠送礼物动画； 可单独显示； 可混合显示； 可设置多个礼物集合自动轮播显示； 可自定义设置显示动画和时长； 可自定义UI界面； 可自定义任何代码实现； 源码开源； 可...
帧动画控件，优化帧动画加载的内存占用、解决帧动画销毁内存不释放的问题
05-11
优化帧动画加载的内存占用、解决帧动画销毁内存不释放的问题 帧动画的两大弊端 1.启动时加载所有图片，内存暴增 2.帧动画停止后无法回收内存 加载原理 每次只加载接下来要展示的图片 使用重复的内存区块读取图片，...
作用域插槽
小丕的博客
10-25 1396
作用域插槽 一：假设第一个场景，需要你写一个商品卡片组件，并通过循环去展示多个卡片，并且要求能响应每个卡片上的图片或者其他内容的点击事件而跳转到商品详情页，你会怎么写？ 我会使用如下的处理方式，首先将商品卡片写成一个组件Commodity.vue，而在CommodityList.vue中用一个v-for来处理商品卡片列表的展示。 <commodity v-for="(item,index) in commodities" @clickCommodity="onCommodityClick">&l
Vue组件、组件传值和组件插槽
小丕的博客
10-21 1142
Vue组件、组件传值和组件插槽 一、Vue组件： 1.组件 (Component) 是 Vue.js 最强大的功能之一，通过组件可以扩展 HTML 元素，封装可重用的代码； 2.组件是可复用的 Vue 实例，与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等 3.组件注册： 3.1 组件参数的data值必须是函数 同时这个函数要求返回一个对象 3.2 组件模板必须是单个根元素 3.3 组件模板的内容可以是模板字符串 3.4 组件可以重复使用多
vue双向绑定原理
小丕的博客
10-19 437
vue双向绑定原理 当一个 vue 实例被创建时,他向 Vue 的响应式系统中加入了其 data 对象中能找到的所有属性.【proxy和defineProperty的区别(下面)】 再利用 es5 特性 Object.defineProperty实现数据劫持,通过遍历 data 对象下所有属性,将其转化为 getter/setter,以便拦截对象赋值与取值操作,(//然后利用发布/订阅者模式,)调用变量实际上是调用的访问器属性，当数据发生变化后，就会调用访问器属性，调用访问器属性就会触发通知系统，vm获得通
数据可视化
小丕的博客
11-18 429
可视化面板介绍 ​ 应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。 01-使用技术 完成该项目需要具备以下知识： div + css 布局 flex 布局 Less 原生js + jquery 使用 rem适配 echarts基础 02- 案例适配方案 设计稿是1920px flexible.js 把屏幕分为 24 等份 cssrem 插件的基准值是 80px 插件-配置按钮—配置扩展
Flash动画入门：简单动画制作教程
本教程主要介绍的是Flash动画的基础制作技术，分为三个部分：逐帧动画、运动渐变动画和形状渐变动画。在第6章，我们首先从初识Flash软件开始，详细解析其用户界面，包括菜单栏、标准工具栏、控制工具栏、绘图工具栏...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值