复制"尹琼洁"的博客 webkit-animation css3 动画

-webkit-animation:仍旧是一个复合属性,

-webkit-animation: name duration timing-function delay iteration_count direction;

包括以下几个属性

(1)  -webkit-animation-name    这个属性的使用必须结合@-webkit-keyframes一起使用

eg:  @-webkit-keyframes fontchange{

0%{font-size:10px;}

30%{font-size:15px;}

100%{font-siez:12px;}

}

百分比的意思就是duration的百分比,如果没有设置duration的话,则表示为无穷大

div{ -webkit-animation-name:fontchange;}

(2)-webkit-animation-duration   表示动画持续的时间

(3)-webkit-animation-timing-function  表示动画使用的时间曲线

【语法】: -webkit-animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out

(4)-webkit-animation-delay    表示开始动画之前的延时

【语法】 -webkit-animation-delay: delay_time;

(5)-webkit-animation-iteration-count  表示动画要重复几次

【语法】-webkit-animation-iteration-count: times_number;

(6) -webkit-animation-direction   表示动画的方向

【语法】-webkit-animation-direction: normal(默认)  | alternate

normal  方向始终向前

alternate 当重复次数为偶数时方向向前,奇数时方向相反

【另外】跟animation有关的其他属性

(1)-webkit-animation-fill-mode : none (默认)| backwards | forwards | both  设置动画开始之前和结束之后的行为(测试结

果不是很清晰)

(2)-webkit-animation-play-state: running(默认) | paused  设置动画的运行状态

综合案例:

@-webkit-keyframes fontbulger {

0% {

font-size: 10px;

}

30% {

font-size: 15px;

}

100% {

font-size: 12px;

}

}

#box {

-webkit-animation-name:  fontbulger;

-webkit-animation-duration: 1s;

-webkit-animation-iteration-count:3;

-webkit-animation-direction: alternate;

-webkit-animation-timing-function: ease-out;

-webkit-animation-fill-mode: both;

-webkit-animation-delay: 2s;

}

<div id=”box”>文字变化</div>

复制"尹琼洁"的博客 webkit-animation css3 动画

时间: 2024-10-09 17:48:34

复制"尹琼洁"的博客 webkit-animation css3 动画的相关文章

如何修改博客园的标题,文本,表格等的显示样式

注:这个修改方法需要有些html,css的知识,不然你就要自己去查格式 1,打开你的博客首页 比如我的是这个:http://www.cnblogs.com/progor/ 2,右键查看网页源代码,在网页源代码中查找到 3.点开href的连接,即可获得你当前所用皮肤的css 4.ctrl+a,复制下所有文本 5.把刚才复制的文本,粘贴到文本编辑器中[我用notepad++],然后ctrl+f查找我们要修改的部分,比如标题1的标签为h1,搜索 6.找到目标后,修改成我们想要的效果[比如我给我的h1加

博客园中实现代码高亮

本文目的:在博客园中引入sublime样式的代码高亮效果. 话不多说,先上效果图: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>helloWorld</title> <style> div{ text-align: center; font-size: 20px; } </style

博客园主题样式修改教程

实现代码高亮 那怎么使用呢?我是先向博客园申请了js代码的权限,申请入口还是在刚刚那个[设置]里: 我这里是批准了所以显示支持js代码,你们要想实现这个代码高亮,那就得先申请(希望博客园的管理员别打我 —..— ) 然后复制下面代码到[博客侧边栏公告]里: <script src="http://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script> <script type="text/jav

修改博客园模板样式

当我们注册博客园以后,首先是选择自己喜欢的首页模板,当我们对博客园给出的模板不满意时,我们就要对已有的模板进行修改. 在这里我采用的模板是SimpleMemory,因为SimpleMemory模板相对简单,便于对样式已有的修改. 这是本人修改两句代码后的修改 详细步骤: 1.寻找自己喜欢的图片,要求图片足够清晰,以免设置背景时不清楚.博客园首页->管理->相册->设置标题(相册名)->ADD->选择文件(上传图片)->ADD,单击图片进入首页,点击Original Im

博客美化

参考链接:https://github.com/esofar/cnblogs-theme-silence 介绍 Silence 是一款界面简洁.运行高效的博客园主题,主要面向于经常混迹博客园的朋友. 简单概括其几个主要特点: 专注阅读.精致漂亮的 UI: 事无巨细的部署文档: 兼容移动端浏览器: 源码结构清晰.易扩展. 安装 step 1:主题下载 通过下面git命令克隆到本地,或者直接下载zip到本地并解压. git clone https://github.com/esofar/cnblog

GShang博客园主题高级版本适配教程详解

主题预览 博客Favicon自定义 导航栏扩展 博客内部公告信息 首页轮播信息 侧边栏公告信息整合 博文发布信息位置调整 博文侧边目录 博文代码块复制 博文作者信息签名 博客捷径应用(更多实用功能正在探索) 博客主题夜间模式 Matlab语法高亮 移动底部功能栏 主题适配 清空主题配置,设置博客皮肤为Custom,确保自己已经开通了JS权限,按以下步骤完成适配: 页面定制CSS代码 页面定制CSS代码引用的是基础版的,为了不影响网页加载,建议直接将代码复制进页面定制CSS代码,而不是引用CSS文

用Typora写博客不要太爽

目录 用Typora写博客不要太爽 问题: 解决: 说明: 用Typora写博客不要太爽 问题: 在本人的博客中,进入管理.选项,可以看到:默认编辑器 TinyMCE Markdown TextBox 第一种估计用的人最多,我连续多年就是用这个写博客的,还写得不亦乐乎,不知疲倦.然而,直到开始学习MarkDown之后,才知道第一种写法的效率,实在太低了.第三种写法才叫灵活强悍,可以直接写最简单的txt格式(纯文本),也可以直接写html代码!老少咸宜,雅俗通吃. 今天要讲的是第二种写法:Mark

记Bili2.0博客主题修改过程

博客主题BiliV2.0更改及优化 主题特色 响应式布局(自适应<360px.<767px的不同尺寸屏幕). 首页全屏背景logo,个性定制. 首页公告消息. 首页轮播,支持定义不同数量的banner. 页脚返回顶部按钮. 博客正文为Github风格Markdown. 博客底部支持博主微信二维码. 博客评论板块调整为发表评论在上,评论列表在下,且评论顺序为倒序,便于查看. 支持博客评论带头像. 博客正文导航目录. 支持切换夜间模式. 支持导航栏扩展. 支持设置博客Tab图标. 支持博客代码块复

【被玩坏的博客园】之canvas装饰博客园侧边栏

最近抽空学了学canvas,然后用canvas做了个小球运动的demo,大致的效果如下: 虽然网上已经有很多这样的demo,但是还是想根据自己的思路来写一个,下面先跟大家讲解一下源代码,先看html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=&q