-
2020-11-19 09:51:16
css代码
可以滑动理解为一点路程,设置点1的位置,点2为运行到中间的位置,点3为最后停止的位置。css菜鸟教程中说这种动画是基于一段时间逐渐改变元素的css样式实现。
注意: @keyframes 规则 不兼容 IE 9 以及更早版本的浏览器.点1————点2——————点3
.more img{width:25px; animation: myMove 2s infinite; -webkit-animation: myMove 2s infinite; //-webkit-animation一个复合属性,想了解的百度,用于实现动画 position: relative; top: 0px; } @keyframes myMove {//myMove必须,是动画名称,可以理解为定义一个方法 0% { top: 0px;//0%代表开头动画 } 50% { top: 18px;//css样式必须 } 100% { top: 0px;//100%代表动画完成 } }
html
以一张简单的图片为例
<div class="more"><a href="javascript:;" ><img src="/page/img/more.png" ></a></div>
总结
@keyframes规则,上面实例为一个基本的利用该规则实现的动画效果,其中的0%,50%,100%等等可随意设置0%到100%(比如0%,20%,50%,100%),并且每个百分比都必须设置对应样式
,也就是说只要css合法,你想要实现多么奇葩的滑动动画效果都可以,例如滑动变色/翻转/大小等等。更多相关内容 -
Android 动画之从上到下,从下往上弹出
2016-11-29 19:06:28从上到下 [html] view plain copy span style="font-size:18px;">xml version="1.0" encoding="utf-8"?> set xmlns:android="http://schemas.android.com/apk/res/android">...从上到下
-
【动画消消乐 】HTML+CSS 吃豆豆动画 073
2021-04-20 22:19:01前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出~ 哈哈 自我介绍一下 昵称:海轰 标签:程序猿一只|C++选手|学生 简介:因C语言结识编程,随后转入计算机专业,...HTML <前言
Hello!小伙伴!
非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出~
自我介绍 ଘ(੭ˊᵕˋ)੭
昵称:海轰
标签:程序猿|C++选手|学生
简介:因C语言结识编程,随后转入计算机专业,有幸拿过国奖、省奖等,已保研。目前正在学习C++/Linux(真的真的太难了~)
学习经验:扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语!
【动画消消乐】 平时学习生活比较枯燥,无意之间对一些网页、应用程序的过渡/加载动画产生了浓厚的兴趣,想知道具体是如何实现的? 便在空闲的时候学习下如何使用css实现一些简单的动画效果,文章仅供作为自己的学习笔记,记录学习生活,争取理解动画的原理,多多“消灭”动画!效果展示
Demo代码
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <section><span></span></section> </body> </html>
CSS
html,body{ margin: 0; height: 100%; } body{ display: flex; justify-content: center; align-items: center; background: #263238; } section { width: 650px; height: 300px; padding: 10px; position: relative; display: flex; align-items: center; justify-content: center; /* 红色边框仅作提示 */ border: 2px solid red; } span{ display: inline-block; position: relative; border-radius: 50%; border-top: 48px white solid; border-bottom: 48px white solid; border-left: 48px white solid; border-right: 48px transparent solid; color: white; animation: c .5s linear infinite ; } @keyframes c { 0%{ box-shadow: 120px 0px 0 -40px rgba(255, 255, 255, .5), 100px 0px 0 -40px rgba(255, 255, 255, .75), 80px 0px 0 -40px rgba(255, 255, 255, 1); } 100%{ box-shadow: 100px 0px 0 -40px rgba(255, 255, 255, .5), 80px 0px 0 -40px rgba(255, 255, 255, .75), 60px 0px 0 -40px rgba(255, 255, 255, 1); } } span::before{ position: absolute; content: ''; display: inline-block; top: -48px; left: -48px; border-top: 48px white solid; border-bottom: 48px transparent solid; border-left: 48px transparent solid; border-right: 48px transparent solid; border-radius: 50%; animation: a .25s linear infinite alternate; } span::after{ position: absolute; content: ''; top: -48px; left: -48px; border-top: 48px transparent solid; border-bottom: 48px white solid; border-left: 48px transparent solid; border-right: 48px transparent solid; border-radius: 50%; animation: b .25s linear infinite alternate; } @keyframes a { 0% { transform: rotate(45deg) } 100% { transform: rotate(0deg) } } @keyframes b { 0% { transform: rotate(-45deg) } 100% { transform: rotate(0deg) } }
原理详解
步骤1
使用span标签,设置为
- 相对定位
- 上、下、左边框为48px 白色 实线solid
- 右边框为48px 透明 实线solid
span { position: relative; border-top: 48px white solid; border-bottom: 48px white solid; border-left: 48px white solid; border-right: 48px transparent solid; }
效果如下图
步骤2
span圆角化
span { border-radius: 50%; }
效果如下图
步骤3
为span添加三个阴影
box-shadow: 120px 0px 0 -40px rgba(255, 255, 255, .5), /*阴影1*/ 100px 0px 0 -40px rgba(255, 255, 255, .75), /*阴影2*/ 80px 0px 0 -40px rgba(255, 255, 255, 1);/*阴影3*/
效果如下图
步骤4
为span的三个阴影添加动画
动画效果很简单,就是三个小球从右水平移动至左方
只需要修改box-shadow中的水平偏移量即可完成
span { animation: c 1s linear infinite; }
@keyframes c { 0% { box-shadow: 120px 0px 0 -40px rgba(255, 255, 255, .5), 100px 0px 0 -40px rgba(255, 255, 255, .75), 80px 0px 0 -40px rgba(255, 255, 255, 1); } 100% { box-shadow: 100px 0px 0 -40px rgba(255, 255, 255, .5), 80px 0px 0 -40px rgba(255, 255, 255, .75), 60px 0px 0 -40px rgba(255, 255, 255, 1); } }
效果如下图步骤5
使用span::before和span::after充当嘴闭合的两部分
首先设置span::before
设置为
- 绝对定位(top: -48px left: -48px)
- 上边框为:48px red solid
- 下、左、右边框:48px transparent solid;
span::before { position: absolute; content: ''; top: -48px; left: -48px; border-top: 48px red solid; border-bottom: 48px transparent solid; border-left: 48px transparent solid; border-right: 48px transparent solid; }
效果如下图
再圆角化span::before { border-radius: 50%; }
效果如下图
为span::before添加动画动画效果描述为:一直绕圆心旋转 0-45度
span::before { animation: a .5s linear infinite alternate; }
@keyframes a { 0% { transform: rotate(45deg) } 100% { transform: rotate(0deg) } }
效果如下图
同理 使用span::after
设置为
- 绝对定位( top: -48px left: -48px)
- 下边框:48px red solid;
- 上、左、右边框:48px transparent solid;
- 圆角化:border-radius: 50%;
span::after { position: absolute; content: ''; top: -48px; left: -48px; border-top: 48px transparent solid; border-bottom: 48px red solid; border-left: 48px transparent solid; border-right: 48px transparent solid; border-radius: 50%; }
效果如下图
再为span::after添加和before一样效果的动画span::after { animation: b .5s linear infinite alternate; }
@keyframes b { 0% { transform: rotate(-45deg) } 100% { transform: rotate(0deg) } }
效果如下图
步骤6
span::after、span::before边框中颜色红色修改为白色
最后span、span::after、span::before三个动画一起显示
得到最终效果
结语
学习来源:
https://codepen.io/bhadupranjal/pen/vYLZYqQ
文章仅作为学习笔记,记录从0到1的一个过程。希望对您有所帮助,如有错误欢迎小伙伴指正~
我是海轰ଘ(੭ˊᵕˋ)੭,如果您觉得写得可以的话,请点个赞吧
写作不易,「点赞」+「收藏」+「转发」
谢谢支持❤️
-
HTML5+CSS动画最佳实战
2016-02-22 15:27:31HTML5+CSS动画最佳实战,研究一下css3动画的魅力,提高篇...网络下载收集的 -
【动画消消乐】HTML+CSS 自定义加载动画:电池充电动画 058
2021-05-01 18:44:10前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出~ 哈哈 自我介绍一下 昵称:海轰 标签:程序猿一只|C++选手|学生 简介:因C语言结识编程,随后转入计算机...HTML <!DO前言
Hello!小伙伴!
非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出~
自我介绍ଘ(੭ˊᵕˋ)੭
昵称:海轰
标签:程序猿|C++选手|学生
简介:因C语言结识编程,随后转入计算机专业,有幸拿过国奖、省奖等,已保研。目前正在学习C++/Linux(真的真的太难了~)
学习经验:扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语!
日常分享:微信公众号【海轰Pro】 记录生活、学习点滴,欢迎关注~【动画消消乐】 平时学习生活比较枯燥,无意之间对一些网页、应用程序的过渡/加载动画产生了浓厚的兴趣,想知道具体是如何实现的? 便在空闲的时候学习下如何使用css实现一些简单的动画效果,文章仅供作为自己的学习笔记,记录学习生活,争取理解动画的原理,多多“消灭”动画!
效果展示
Demo代码
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <section><span></span></section> </body> </html>
CSS
html, body { margin: 0; height: 100%; } body { display: flex; justify-content: center; align-items: center; background: #ed556a; } section { width: 650px; height: 300px; padding: 10px; position: relative; display: flex; align-items: center; justify-content: center; border: 2px solid white; } span { width: 48px; height: 96px; display: inline-block; position: relative; color: white; border: 3px solid; animation: loading 2s linear infinite alternate; } span::before { content: ''; position: absolute; top: -15px; left: 6px; width: 36px; height: 12px; background-color: white; } @keyframes loading { 0% { box-shadow: 0 0 inset } 100% { box-shadow: 0 -96px inset } }
原理详解
步骤1
使用span标签,设置为
- 相对定位
- 宽度48px,高度96px
- 边框:3px solid 白色
- color:白色
span { width: 48px; height: 96px; position: relative; color: white; border: 3px solid; }
效果图如下
步骤2
利用span::before伪元素,充当最上方白色方块
设置为
- 绝对定位(top -15px,left 6px)
- 宽度:36px
- 高度:12px
- 背景色:白色
span::before { content: ''; position: absolute; top: -15px; left: 6px; width: 36px; height: 12px; background-color: white; }
效果图如下
注:- top是-15px,是因为上方白色方块宽度12px,还需要加上下方白色边框3px,一共12+3=15px
- left为6px,是因为要使上方白色方块居中,需要向左移动(48-36)/2=6px
步骤3
使用span的阴影(box-shadow)作为动画
需要实现的效果:逐渐填充下方白色部分内部
- 阴影向内
以动画中的几帧说明:
当阴影向内延伸10px时
span { box-shadow: 0 -10px inset }
效果图如下
当阴影向内延伸48px时span { box-shadow: 0 -48px inset }
效果图如下
当阴影向内延伸96px时span { box-shadow: 0 -96px inset }
效果图如下
综上:阴影向内从0延伸96px,重复即可
animation: loading 2s linear infinite ;
@keyframes loading { 0% { box-shadow: 0 0 inset } 100% { box-shadow: 0 -96px inset } }
效果图如下
步骤4
设置动画交替进行
animation: loading 2s linear infinite alternate;
效果图如下
结语
学习参考:
https://codepen.io/bhadupranjal/pen/vYLZYqQ
文章仅作为学习笔记,记录从0到1的一个过程
希望对您有所帮助,如有错误欢迎小伙伴指正~
我是海轰ଘ(੭ˊᵕˋ)੭,如果您觉得写得可以的话,请点个赞吧
谢谢支持❤️
-
HTML5+JavaScript动画基础 源码
2013-11-20 10:50:00HTML5+JavaScript动画基础 源码 -
js封装简单的动画函数【左右上下移动】
2021-01-04 22:32:21让页面动起来是交互式页面的一般要求,势必使用css3的animation和js操作元素位置实现,但是css3不是所有的浏览器都支持我们就先使用js实现【好像css3动画确实简单许多,毕竟可以直接使用left,top属性】 1.原理 让... -
HTML5小车动画
2012-02-02 21:45:15HTML5小车动画 -
HTML5实现的树叶飘落动画特效源码
2015-09-08 10:26:30这款HTML5树叶飘落动画是基于webkit内核的,所以需要webkit内核的浏览器才能播放该动画,效果非常炫酷。树叶飘落非常逼真自然,具有强烈的动感与立体感。是一款非常优秀的特效源码。建议使用支持HTML5与css3的火狐或... -
HTML实现动画
2020-06-19 17:17:43HTML 实现简单动画 CSS3 animation 属性 CSS3 transition 属性 Javascript 帧动画 很多前端新入门的同学都不太懂如何去实现一个简单的动画,比如轮播图效果等,当初我也是,初学者还不知道有组件库这东西,什么效果... -
HTML中的动画效果
2021-08-16 09:47:18一、HTML中的动画 在HTML中也可根据个人要求添加动画,有过渡动画transition和生动的动画效果animation以及线上的动画库 二、过渡动画transition transition是一种提供了在更改CSS属性时控制动画速度的方法,其... -
html5怎么添加图片动画效果
2021-06-11 05:13:50html5添加图片动画效果的方法:1、利用css3 animation的steps实现spirit精灵动画;2、利用html5 canvas实现gif图片。本教程操作环境:windows7系统、html5&&css3版,DELL G3电脑。html5添加图片动画效果的... -
HTML图片动画特效
2019-10-16 11:05:48<!DOCTYPE html> <html> <head> ...meta charset="UTF-8">...图片动画</title> <style type="text/css"> html,body{ height: 100%;/*高度使用百分比,body的高度是100... -
程序员爱情表白专用html5动画网页的代码
2014-09-23 14:29:15程序猿表白专用的html5动画特效网页,真的挺羡慕创作者的水平,有这水平可以把爱表白给想表白的人,不要以为那些鲜花是用的图片,你会发现在资源文件中没有一个图片资源,但HTML5强大的功能不能不让你惊叹,左侧的... -
前端html实现鼠标停在图片上出现动画效果
2020-09-19 17:22:43前端html鼠标移入图片动作效果 效果展示: 没有用到js和css <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ... -
爱情表白专用html5动画网页的代码
2015-08-16 20:49:43程序猿表白专用的html5动画特效网页,真的挺羡慕创作者的水平,有这水平可以把爱表白给想表白的人,不要以为那些鲜花是用的图片,你会发现在资源文件中没有一个图片资源,但HTML5强大的功能不能不让你惊叹,左侧的... -
HTML5 Canvas实现雷达扫描动画特效
2014-09-25 14:27:22这是一款基于HTML5 Canvas实现的雷达扫描动画特效源码,canvas是HTML5特有的画布工具,我们可以在canvas上绘制任意元素,包括3D元素。这款雷达扫描动画就是利用了canvas的灵活特性,利用js在canvas上绘制这些美丽的... -
HTML5+CSS3高级动画的应用实践
2020-09-14 23:02:10我们大概都知道css可以用来作平面旋转、扭曲、放大缩小...首先,要实现这个功能,我们从外往里看:把文字所在部分看作一个盒子的话,前后两个横线并不属于这个盒子才对,那么,很自然就想到了—— ::after 和 ::before -
使用HTML+CSS实现滚动进度条动画
2021-03-23 09:10:52DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>进度条实现 -
HTML动画效果
2019-08-11 16:35:29我们在页面上总能看的很多的很有趣的动态效果,而这些动态效果 仅用我们的html css代码便可实现,以前来讲,3D动画拿到网页上展示是一件非常奢侈的事情,HTML5的出现,让实现网页3D动画变得非常简单,当然前提是你不要... -
html5表单提交按钮圆形进度条加载动画
2014-09-25 20:34:07html5圆形进度条加载按钮是一款modernizr html5表单提交按钮圆形进度条加载动画表单验证效果。 -
2016年酷炫HTML5动画合集
2016-02-15 14:54:47里面包括HTML5 Canvas圆盘抽奖应用 、HTML5电子书翻页动画特效 、HTML5移动端图片左右切换动画 、HTML5雨滴滑落动画及天气预报代码 、jQueryCSS3实现小鸟飞翔动画 、很酷的CSS3多窗口邮件阅读器 。网上收集的,分享... -
HTML5+SVG实现的可爱娃娃笑脸动画
2014-09-25 13:35:17是一款利用HTML5和SVG实现的可爱笑脸动画,它们是色彩各异的一组泥娃娃的脸,默认的时候就出现眨眼和微笑的动画,当你把鼠标滑过它们时,就像是感受到了主人的抚摸一样上下跳动起来,真的是非常可爱。 -
HTML动画
2019-04-17 20:27:52开发工具与关键技术:DW与 HTML、...怎么使用javascript为标签添加动画 一些动画的特性 HTML代码: <body> <div class="content"> <div id="widthfanwei"></div> </di... -
html+css实现加载动画
2019-06-20 15:05:08代码很简单,就直接上代码了 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> body{ width: 100%;... -
HTML5浪漫爱心表白动画在线演示程序
2014-02-12 23:50:10HTML5浪漫爱心表白动画在线演示.htm 修改一下情人节送女友 -
HTML简单动画制作
2019-08-12 19:37:54HTML简单动画制作(圆移动变色) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圆</title> <style> .circle{ width: 100px; ... -
HTML5实现的3D爱心动画特效源码
2014-09-23 14:16:01这是一款利用HTML5和CSS3制作的3D爱心动画特效源码,取自国外网站。是一款值得收藏的HTML5 3D爱心动特效,特别适合作为七夕节或情人节的礼物,代码运行效果美观大方,有很强的立体感,是一款HTML5 3D特效的经典之作... -
HTML5+Canvas实现的超炫粒子效果文字动画特效源码
2014-09-23 13:27:06这是一款基于HTML5 Canvas实现的文字特效源码,在页面下方的输入框中输入想要展示的文字,回车后即可在canvas上绘制出粒子效果的文字动画,动画效果炫酷十足,是值得收藏的html5经典特效。 -
一款很酷的HTML5+CSS3大风车旋转动画
2014-09-25 20:26:17HTML5+CSS3大风车旋转动画是一款很酷的HTML5动画,是一个可以旋转的大风车动画效果。