css3 animate 和关键帧 @-webkit-keyframes

最新推荐文章于 2023-08-02 19:09:11 发布
最新推荐文章于 2023-08-02 19:09:11 发布
阅读量237 收藏
点赞数
原文链接：http://www.cnblogs.com/mingjixiaohui/p/5368672.html
版权 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			margin:0 auto;
			width:540px;
			height:405px;
			background:url('img/cat2.jpg') center no-repeat;
			/* 定义3D空间 */
			-webkit-transform-style: preserve-3d;
			/* 沿X轴旋转 20秒线性过过渡动画 无限次播放 */
			-webkit-animation-name: x-spin;/*定义动画名称为x-spin*/
			-webkit-animation-duration: 20s;/*定义动画时间为20s*/
			-webkit-animation-iteration-count: infinite;/*定义动画过渡为线性转换*/
			-webkit-animation-timing-function: linear;/*定义动画过渡为线性转换*/
		}
		/* 调用动画 */
		@-webkit-keyframes x-spin{
			/* 引用x-spin动画 */
			0% {
				/* 设置第一个关键帧为开始位置 */
				-webkit-transform:rotateZ(0deg);
			}
			50%{
				/* 沿X轴旋转180 */
				-webkit-transform:rotateZ(180deg);
			}
			100%{
				-webkit-transform:rotateZ(360deg);
			}
		} 
	</style>
</head>
<body>
	<div></div>
</body>
</html>

　　

转载于:https://www.cnblogs.com/mingjixiaohui/p/5368672.html

weixin_33920401
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
关于CSS动画@-webkit-keyframes的两种实现方式
debugtoday的博客
02-28 6528
关于CSS动画@-webkit-keyframes的两种实现方式
css3 动画的实现
青蛙king的博客
12-15 2393
js 的方法实现动画（这是一个实验功能，此功能某些浏览器尚在开发中。详见这里）。@keyframes+animation：这是一个实现动画的组合，必须一起使用。transition：表示过渡。transition 可以单独使用，transform：表示变形。使用 transform 实现动画时有两种选择：transform+transition：一次性动画。transform 定义行为，transition 驱动，但一次仅能驱动一次。
CSS
qq_34516556的博客
09-07 387
动画 1.@keyframes @keyframes mymove { 0% {top:0px; left:0px; background:red;} 25% {top:0px; left:100px; background:blue;} 50% {top:100px; left:100px; background:yellow;} 75% {top:100px; left:0px;...
@keyframes和它的几个前缀
emmmmimport的博客
07-27 1439
关于@keyframes的几个前缀如-webkit-、-o-、-moz-及其对应兼容的浏览器，以及没有去进行了解的其他@keyframes的前缀如-ms-和-khtml-。
css3动画
qq_43327962的博客
03-24 280
css3动画 通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。 CSS3 @keyframes 规则 如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。 @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。 Chrome 和...
animate-css-styled-components:动画css的简单端口，用于样式组件
05-11
动画CSS样式的组件动画css的简单端口，用于样式组件安装安装animate-css-styled-components [sudo] npm i --save animate-css-styled-components如何使用导入animate-css-styled-components模块，调用全局动画import...
animate-css-grid：CSS网格的无痛过渡
02-23
动画CSS网格 无缝设置所有CSS网格属性的动画，... yarn add animate-css-grid或npm install animate-css-grid import { wrapGrid } from 'animate-css-grid' const grid = document . querySelector ( ".grid" ) ; wra
css3强大的动画效果animate使用说明及浏览器兼容介绍
12-03
好吧，第一篇是关于css3动画的使用。 昨天突然看到jing.fm（这个音乐网站非常不错，很多效果我都很喜欢，如果你有兴趣，可以去围观下）上音乐播放时，专辑的转动效果很不错，所以准备自己动手写下，以备后用。结果第...
animate.css-uni-app动画样式文件
11-04
animate.css------uni-app动画样式文件
css3-animate动画特效大全
01-08
css3-animate动画特效大全 主要以css3 的@keyframes 规则来创建动画。
CSS动画@-webkit-keyframes
Elaine的前端学习日记
02-25 1万+
@-webkit-keyframes：以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。0% 是动画的开始时间，100% 动画的结束时间。 p'y .div1 { width: 200px;height: 200px;background-color:
CSS3实现的4种水波特效
热门推荐
一个喜欢面朝大海，等待春暖花开的小姑娘
09-26 3万+
（一）第一种方法 （1）HTML结构 （2）CSS样式 html{ font-size: 20px; } body{ background:#444; } @-webkit-keyframes opac{ from { opacity: 1; width:0; heigh
[每天进步一点点~] uni-app css 实现 10种 loading加载动画效果
DarlingYL的博客
01-20 4864
第一种 效果图： 检测动画.gif 需要准备一张下面的底图，因为我写不出这种分成无数线段的圆。。。 加载loading底图.png 代码： <template> <view class="load-box"> <view class="loading"></view> </view> &...
uniApp 很帅很帅的纯css加载动画，文字可滚动
最新发布
蓝斑.json的博客
08-02 788
【代码】uniApp 很帅很帅的纯css加载动画，文字可滚动。
Keyframes介绍使用
qq_42483491的博客
06-26 1万+
Animation动画 css3为Animation动画提供的几个属性如下： animation-name:指定动画名称，该属性指定一个已有的关键帧定义。 animation-duration:指定动画持续时间。 animation-timing-funtion:指定动画变化速度。 animation-delay：指定动画延迟多长时间才开始执行。 animation-iteration-count...
css动画效果
yiXin_Chen的博客
12-23 116
css动画使用步骤: 1. 定义动画关键帧 2. 在选择器中通过animation属性使用动画关键帧 定义动画关键帧: 语法: @keyframes 名字{ 0%{ 样式效果 } .... 100%{ 样式效果 } } animation属性的参数要求: 参.
css动态特效 @keyframes
linan996的博客
10-27 8050
文章目录一.创建动画效果二.在css选择器中引用三.参数解释animation（调用动画以及参数的解释，与-webkit-animation通用）duration（动画执行的时间）timing-function（动画执行的速度）delay（动画延迟多久开始）iteration-count（动画执行的次数）direction（是否轮流播放）四.题外话（一些css函数）1.缩放函数2.旋转函数3.倾斜函数**今天又是咸鱼的一天！！！** 一.创建动画效果 css动画效果创建： 百分比（0%、100%）表示动画
【HTML、CSS练习题3】
m0_46312303的博客
07-20 2813
HTML、CSS练习题（三）
@keyframes—定义动画关键帧
桃花扇的博客
04-06 594
@keyframes用来定义动画名和关键帧，其语法规则如下 @keyframes run { 0% { //有动画性质的属性的改变情况 } 25% { } 50% { } 75% { } 100% { } } 即将动画执行的过程分为若干段，在每一段中定义该段中最后一帧的元素的状态 【注】 1....
.animate{ -webkit-transition:-webkit-transform 1s; -moz-transition:-moz-transform 1s; -ms-transition:-ms-transform 1s; -o-transition:-o-transform 1s; transition:transform 1s; }
07-17
这段代码定义了一个 `.animate` 类的 CSS 样式。它设置了一系列属性来控制元素的过渡效果。 ```css .animate { -webkit-transition: -webkit-transform 1s; -moz-transition: -moz-transform 1s; -ms-transition: -ms-transform 1s; -o-transition: -o-transform 1s; transition: transform 1s; } ``` 这段代码的作用是为具有 `.animate` 类的元素设置了一个 1 秒的过渡效果。通过 `-webkit-transition`、`-moz-transition`、`-ms-transition`、`-o-transition` 和 `transition` 属性，指定了在变换属性 `transform` 上进行过渡效果。当应用了 `.animate` 类的元素发生变换时，将以 1 秒的时间进行平滑过渡。可以根据需要调整过渡时间和变换属性来实现不同的动画效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值