css动画效果之transition（动画效果属性）
<!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（动画效果属性）的更多相关文章
- css动画效果之transition（动画过渡效果属性）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS动画总结与呼吸灯效果
首先,先介绍一下主要用到的css属性:animation,text-shadow. text-shadow就不再介绍了,上一篇已经详细介绍了用法.这里先介绍一下animation属性. 1.anima ...
- 简单css实现input提示交互动画效果
通过基础CSS实现输入提示交互动画效果,并兼容各浏览器! 1.效果展示 2.css代码 h4 { margin: 30px 0; } input { margin:; font-size: 16px; ...
- 用 CSS 实现酷炫的动画充电效果
巧用 CSS 实现酷炫的充电动画 循序渐进,看看只使用 CSS ,可以鼓捣出什么样的充电动画效果. 画个电池 当然,电池充电,首先得用 CSS 画一个电池,这个不难,随便整一个: 欧了,勉强就是它了. ...
- Android -- 自定义ViewGroup+贝塞尔+属性动画实现仿QQ点赞效果
1,昨天我们写了篇简单的贝塞尔曲线的应用,今天和大家一起写一个QQ名片上常用的给别人点赞的效果,实现效果图如下: 红心的图片比较丑,见谅见谅(哈哈哈哈哈哈).... 2,实现的思路和原理 从上面的效果 ...
- css之实现下拉框自上而下展开动画效果&&自下而上收起动画效果
HTML代码: <div className={CX('font-size-selector-sub-list', { show: shouldSubListShow === true, hid ...
- 【动画消消乐】HTML+CSS 自定义加载动画：清新折叠方块效果 063（附源码及原理详解）
前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 自我介绍ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计算机专 ...
- css动画怎么写：3个属性实现
3个属性:transition,animation,transform 实现步骤: 1.css定位 2.rgba设置颜色透明度 3.转换+动画 transform+animation 4.动画平滑过渡 ...
- CSS动画 animation与transition
一.区分容易混淆的几个属性和值 先区分一下css中的几个属性:animation(动画).transition(过渡).transform(变形).translate(移动). CSS3中的trans ...
- CSS3动画：流彩文字效果+图片模糊效果+边框伸展效果实现
前言 首先第一步,先布局html代码如下: <div class="wrap"> <img src="images/1.jpg" class= ...
随机推荐
- C++常见编译问题记录
1.类名重复问题 在同一个项目下,分文件编译时,所有的文件最后会被编译到一个可执行程序或dll中,所以同一个项目下文件中不能出现两个相同的类名,否则编译器无法区分使用的到底是那个类,就会出现LINK2 ...
- Oracle 数据库，远程访问 ora-12541：TNS:无监听程序
1.修改网络连接IPV4设置为固定IP IP地址:192.168.100.8子网掩码:255.255.255.0默认网关:192.168.100.1首选DNS:192.168.100.1 2.修改.. ...
- CenterOS下 Mysql数据库中数据字符乱码
1.修改数据库字符编码 mysql> alter database mydb character set utf8 ; 2.创建数据库时,指定数据库的字符编码 mysql> create ...
- Spring Boot2 快速入门教程-到上手
Spring Boot2 教程合集 入门 纯 Java 代码搭建 SSM 环境 创建一个 Spring Boot 项目的三种方法 理解 Spring Boot 项目中的 parent 基础配置 配置文 ...
- AcWing 1013. 机器分配
//分组背包 for物品 for体积 for 决策 #include <iostream> using namespace std; ; int n, m; int w[N][N]; in ...
- Java的三种循环：1、for循环 2、while循环 3、do...while循环
Java的三种循环 Java三种循环结构: 1.for循环 2.while循环 3.do...while循环 循环结构组成部分:1.条件初始化语句,2.条件判断语句 , 3.循环体语句,4.条件控制语 ...
- 题解 【洛谷P1115】最大子段和
这是一道枚举经典题. 本题有三种做法,各位需要根据每个题的数据范围来决定自己用哪种方法. 本题解中统一设最大和为Max. 方法一. 枚举子序列,从起点到终点求和.时间复杂度:O(n^3) 我们可以枚举 ...
- [JSOI2016]最佳团体 DFS序/树形DP
题目 洛谷 P4322 [JSOI2016]最佳团体 Description 茜茜的舞蹈团队一共有\(N\)名候选人,这些候选人从\(1\)到\(N\)编号.方便起见,茜茜的编号是\(0\)号.每个候 ...
- oracle数据库操作 接口封装
1.如下 using Oracle.ManagedDataAccess.Client; using System; using System.Collections.Generic; using Sy ...
- Jarvis OJ - [XMAN]level1 - Writeup
Jarvis OJ - [XMAN]level1 - Writeup M4x原创,转载请表明出处http://www.cnblogs.com/WangAoBo/p/7594173.html 题目: 分 ...