css动画效果的各种实现方法与区分，使用transition实现一个简单的翻牌效果

html-css025

css动画效果的各种实现方法与区分，使用transition实现一个简单的翻牌效果,第1张

感觉自己总是混淆css各种动画效果，所以再这里总结一下

1. transition ，所在元素块样式变动时启动，可用于样式变动时 产生过渡动画效果

| transition-property | 规定设置过渡效果的 CSS 属性的名称。 |

| transition-duration | 规定完成过渡效果需要多少秒或毫秒。 |

| transition-timing-function | 规定速度效果的速度曲线。 |

| transition-delay | 定义过渡效果何时开始。 |

2. tranform :用于平移，旋转，缩放，透视

语法

animation-name 规定需要绑定到选择器的 keyframe 名称。

animation-duration规定完成动画所花费的时间，以秒或毫秒计。

animation-timing-function规定动画的速度曲线。

animation-delay规定在动画开始之前的延迟。

animation-iteration-count规定动画应该播放的次数。

animation-direction规定是否应该轮流反向播放动画。

animationname 必需。定义动画的名称。

keyframes-selector 必需。动画时长的百分比。值：0-100%,from（与 0% 相同）,to（与 100% 相同）

css-styles 必需。一个或多个合法的 CSS 样式属性。

4.@media :可以根据屏幕大小响应式改变样式

接下来利用transition和transfrom实现一个简单的翻牌效果,先看效果

代码如下：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8" />

<title>canvas实例--制作时钟</title>

</head>

<body>

<canvas id="canvas" width="500" height="500" >

您的浏览器版本太低啦！可以换了！

</canvas>

<script>

//获取canvas

var canvas = document.getElementById("canvas")

//设置环境

var cxt = canvas.getContext("2d")

//制作时钟的函数

function DrawClock() {

//清除画布

cxt.clearRect(0,0,500,500)

//获取当前时间的时，分，秒

var now = new Date()

var hour = now.getHours()

var min = now.getMinutes()

var sec = now.getSeconds()

//小时必须获取浮点型（小时+分数--->转化为的小时）

hour = hour + min / 60

//将24小时转换为12小时

hour = hour >12 ? hour - 12 : hour

//制作表盘

cxt.beginPath()

cxt.lineWidth = 10

cxt.strokeStyle = "#ABCDEF"

cxt.arc(250, 250, 200, 0, 360, false)

cxt.stroke()

cxt.closePath()

//刻度

//时针

for (var i = 0i <12i++) {

cxt.save()

cxt.lineWidth = 7

cxt.strokeStyle = "red"

//设置0,0点

cxt.translate(250, 250)

//再设置旋转角度

cxt.rotate(i * 30 * Math.PI / 180)

cxt.beginPath()

cxt.moveTo(0, -170)

cxt.lineTo(0, -190)

cxt.closePath()

cxt.stroke()

cxt.restore()

}

//分针

for (var i = 0i <60i++) {

//为避免不同颜色的重叠，

//在时针刻度与分针刻度重叠的位置，不画分针

if (i % 5 == 0) continue

cxt.save()

//设置刻度粗细

cxt.lineWidth = 5

cxt.strokeStyle = "purple"

//设置画布的0,0点

cxt.translate(250, 250)

//设置旋转角度

cxt.rotate(i * 6 * Math.PI / 180)

//画分针刻度

cxt.beginPath()

cxt.moveTo(0, -180)

cxt.lineTo(0, -190)

cxt.closePath()

cxt.stroke()

cxt.restore()

}

//时针

cxt.save()

//设置时针风格

cxt.lineWidth = 7

cxt.strokeStyle = "pink"

//设置异次元空间的0,0点

cxt.translate(250, 250)

//设置旋转角度

cxt.rotate(hour * 30 * Math.PI / 180)

cxt.beginPath()

cxt.moveTo(0, -140)

cxt.lineTo(0, 10)

cxt.closePath()

cxt.stroke()

cxt.restore()

//分针

cxt.save()

//设置分针风格

cxt.lineWidth = 5

cxt.strokeStyle = "orange"

//设置异次元空间的0,0点

cxt.translate(250, 250)

//设置旋转角度

cxt.rotate(min * 6 * Math.PI / 180)

cxt.beginPath()

cxt.moveTo(0, -160)

cxt.lineTo(0, 15)

cxt.closePath()

cxt.stroke()

cxt.restore()

//秒针

cxt.save()

//风格

cxt.strokeStyle = "yellow"

cxt.lineWidth = 3

//重置0，0点

cxt.translate(250, 250)

//设置旋转角度

cxt.rotate(sec*6*Math.PI/180)

//画图

cxt.beginPath()

cxt.moveTo(0, -170)

cxt.lineTo(0, 20)

cxt.stroke()

//画出时针，分针，秒针的交叉点

cxt.beginPath()

cxt.arc(0, 0, 5, 0, 360, false)

cxt.closePath()

//设置填充样式

cxt.fillStyle = "blue"

cxt.fill()

//设置笔触样式--->秒针已设置

cxt.stroke()

//设置秒针前端的小圆点

cxt.beginPath()

cxt.arc(0, -150, 5, 0, 360, false)

cxt.closePath()

//设置填充样式

cxt.fillStyle = "blue"

cxt.fill()

//设置笔触样式

cxt.stroke()

cxt.closePath()

cxt.restore()

}

//调用函数

DrawClock()

//设置时钟转动起来

setInterval(DrawClock, 1000)

</script>

</body>

</html>