<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<!-- animation:动画效果属性

    “关键帧”（@keyframes），它的样式规则是由多个百分比构成的，比如“0%”到“100%”之间，加上不同的属性，从而让元素达到一种不断变化的效果。语法规则如下：

    @keyframes 动画名称{

        0%{元素状态}

        ...

        100%{元素状态}

    }

    animation属性：

    animation-name：@keyframes动画的名称

    animation-duration：动画完成一个周期所花费的时间，默认是0

    animation-timing-function：动画的速度曲线（缓动效果）。默认是“ease”

    animation-delay:动画开始的延迟时间，默认是0

    animation-iteration-count：动画被播放的次数。默认是1

    animation-direction：动画是否在下一周期逆向的播放。默认是“normal”

    animation-play-state:动画是否存在运行或暂停，默认是“running”

    animation-fill-mode：对象动画时间之外的状态

 -->

    <style>

        .box{

            height: 100px;

            width: 100px;

            margin:50px auto;

            background-color: #f00

        }

        .box:hover{

            /* 绑定动画名称，设置完成周期1s，设置速度曲线加速，设置延迟时间0，设置播放次数无限,循环逆向播放*/

            animation: hover 1s ease-in 0s infinite alternate;

        }

        @keyframes hover{

            0%{width: 100px;height: 100px;border-radius: 50%;}

            50%{width: 200px;height: 200px;border-radius: 50%;}

            100%{width: 100px;height: 100px;border-radius: 50%;}

        }

    </style>

}

<style>

</style>

<body>

    <div class="box"></div>

</body>

</html>

Document


}

 

css动画效果之transition（动画效果属性）的更多相关文章

  1. css动画效果之transition（动画过渡效果属性）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. CSS动画总结与呼吸灯效果

    首先,先介绍一下主要用到的css属性:animation,text-shadow. text-shadow就不再介绍了,上一篇已经详细介绍了用法.这里先介绍一下animation属性. 1.anima ...

  3. 简单css实现input提示交互动画效果

    通过基础CSS实现输入提示交互动画效果,并兼容各浏览器! 1.效果展示 2.css代码 h4 { margin: 30px 0; } input { margin:; font-size: 16px; ...

  4. 用 CSS 实现酷炫的动画充电效果

    巧用 CSS 实现酷炫的充电动画 循序渐进,看看只使用 CSS ,可以鼓捣出什么样的充电动画效果. 画个电池 当然,电池充电,首先得用 CSS 画一个电池,这个不难,随便整一个: 欧了,勉强就是它了. ...

  5. Android -- 自定义ViewGroup+贝塞尔+属性动画实现仿QQ点赞效果

    1,昨天我们写了篇简单的贝塞尔曲线的应用,今天和大家一起写一个QQ名片上常用的给别人点赞的效果,实现效果图如下: 红心的图片比较丑,见谅见谅(哈哈哈哈哈哈).... 2,实现的思路和原理 从上面的效果 ...

  6. css之实现下拉框自上而下展开动画效果&&自下而上收起动画效果

    HTML代码: <div className={CX('font-size-selector-sub-list', { show: shouldSubListShow === true, hid ...

  7. 【动画消消乐】HTML+CSS 自定义加载动画：清新折叠方块效果 063（附源码及原理详解）

    前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 自我介绍ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计算机专 ...

  8. css动画怎么写：3个属性实现

    3个属性:transition,animation,transform 实现步骤: 1.css定位 2.rgba设置颜色透明度 3.转换+动画 transform+animation 4.动画平滑过渡 ...

  9. CSS动画 animation与transition

    一.区分容易混淆的几个属性和值 先区分一下css中的几个属性:animation(动画).transition(过渡).transform(变形).translate(移动). CSS3中的trans ...

  10. CSS3动画：流彩文字效果+图片模糊效果+边框伸展效果实现

    前言 首先第一步,先布局html代码如下: <div class="wrap"> <img src="images/1.jpg" class= ...

随机推荐

  1. 安装配置oracle11gR2、client、plsql developer及学习

    本文是一个目录,以后会持续更新 1,安装oracle11gR2 https://www.cnblogs.com/suterfo/p/10659208.html 2,安装oracle client及配置 ...

  2. Win10安装1 —— 引言与目录

    本文内容皆为作者原创,如需转载,请注明出处:https://www.cnblogs.com/xuexianqi/p/12368107.html 一:引言 众所周知,电脑出现问题了后,重启 可以解决90 ...

  3. early-stopping的使用

    early-stopping的使用 待办 https://blog.csdn.net/qq_37430422/article/details/103638681 github对应类导入,直接放在项目更 ...

  4. [P5555] 秩序魔咒 - 回文自动机,DFS

    #include <bits/stdc++.h> #define Sigma 30 #define MAXN 500010 #define int long long using name ...

  5. linux 6.9 补丁修补漏洞

    1 先将openssh-8.0p1.tar.gz 上传到 root下的/opt 文件夹下 解压  tar -zxvf openssh-8.0p1.tar.gz  -C /opt 2 启动vncserv ...

  6. Three.js的开始（附代码）_2

    1 下载Three.js代码 https://github.com/mrdoob/three.js/tree/master/build 2 引用方法 在HTML中添加以下代码: <script ...

  7. go语言 实现哈希算法

    验证结果网址 http://www.fileformat.info/tool/hash.htm "golang.org/x/crypto/md4"不存在时,解决方法: cd $GO ...

  8. IntelliJ IDEA构建多Module项目

    打开IDEA 创建完成项目后,我们创建子模块 可以看到common子模块创建成功,子模块的名字大家可以根据自己的实际需求来修改 下面我们再创建子模块 给子模块起个名字 现在已经创建好多模块的项目了,下 ...

  9. jQuery尺寸

    jQuery 尺寸 jQuery width() 和 height() 方法 width() 方法设置或返回元素的宽度(不包括内边距.边框或外边距). height() 方法设置或返回元素的高度(不包 ...

  10. java基础之I/O操作

    字节流 直接上代码: import java.io.*; class Test{ public static void main(String[] args){ FileInputStream inp ...