精华内容
下载资源
问答
  • 2020-11-19 09:51:16

    css实现静态图片实现上下滑动动画效果

    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合法,你想要实现多么奇葩的滑动动画效果都可以,例如滑动变色/翻转/大小等等。

    更多相关内容
  • 从上 [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]  view plain  copy
      在CODE上查看代码片 派生到我的代码片
    1. <span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>  
    2. <set xmlns:android="http://schemas.android.com/apk/res/android">  
    3.     <translate  
    4.         android:fromYDelta="25"  
    5.         android:toYDelta="100%p"  
    6.         android:duration="300"  
    7.         />  
    8. </set>  
    9.   
    10.   
    11.   
    12. </span>  
    从下往上

    [html]  view plain  copy
      在CODE上查看代码片 派生到我的代码片
    1. <span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>  
    2. <set xmlns:android="http://schemas.android.com/apk/res/android"  
    3.      android:interpolator="@android:anim/accelerate_interpolator" >  
    4.     <translate  
    5.         android:duration="300"  
    6.         android:fromYDelta="100.0%"  
    7.         android:toYDelta="10.000002%" />  
    8.     <alpha  
    9.         android:duration="50"  
    10.         android:fromAlpha="0.0"  
    11.         android:toAlpha="1.0" />  
    12. </set></span>  

    展开全文
  • 动画消消乐 】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:31
    HTML5+CSS动画最佳实战,研究一下css3动画的魅力,提高篇...网络下载收集的
  • 前言 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:00
    HTML5+JavaScript动画基础 源码
  • 让页面动起来是交互式页面的一般要求,势必使用css3的animation和js操作元素位置实现,但是css3不是所有的浏览器都支持我们就先使用js实现【好像css3动画确实简单许多,毕竟可以直接使用left,top属性】 1.原理 让...
  • HTML5小车动画

    热门讨论 2012-02-02 21:45:15
    HTML5小车动画
  • HTML5实现的树叶飘落动画特效源码

    热门讨论 2015-09-08 10:26:30
    这款HTML5树叶飘落动画是基于webkit内核的,所以需要webkit内核的浏览器才能播放该动画,效果非常炫酷。树叶飘落非常逼真自然,具有强烈的动感与立体感。是一款非常优秀的特效源码。建议使用支持HTML5与css3的火狐或...
  • HTML实现动画

    千次阅读 2020-06-19 17:17:43
    HTML 实现简单动画 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:50
    html5添加图片动画效果的方法: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:52
    DOCTYPE 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圆形进度条加载按钮是一款modernizr html5表单提交按钮圆形进度条加载动画表单验证效果。
  • 2016年酷炫HTML5动画合集

    千次下载 热门讨论 2016-02-15 14:54:47
    里面包括HTML5 Canvas圆盘抽奖应用 、HTML5电子书翻页动画特效 、HTML5移动端图片左右切换动画HTML5雨滴滑落动画及天气预报代码 、jQueryCSS3实现小鸟飞翔动画 、很酷的CSS3多窗口邮件阅读器 。网上收集的,分享...
  • 是一款利用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:10
    HTML5浪漫爱心表白动画在线演示.htm 修改一下情人节送女友
  • HTML简单动画制作

    千次阅读 多人点赞 2019-08-12 19:37:54
    HTML简单动画制作(圆移动变色) <!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大风车旋转动画是一款很酷的HTML5动画,是一个可以旋转的大风车动画效果。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 354,857
精华内容 141,942
关键字:

动画从上往下html