在css3中,有一些特别方便有趣的方式来让自己定义的图形和图片‘活’起来。
前言
1. 了解‘过渡’ 2D转换
2. 案例
1. 1 过渡(transition)
用法与参数:Transition:(参数一 参数二)
- 参数一:要过渡的属性
- 参数二:过渡的时间
过渡是css3中具有颠覆性的特征之一,可以实现元素不同状态间的平滑过渡(补间动画),经常用来制作动画效果。
- 补间动画:自动完成从始至终的状态的过渡,不用管中间的状态。
- 帧动画:扑克牌切换,通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片。
1.2 2D转换
- 2D转换可以实现原色的位移,旋转,变形,缩放,甚至支持矩阵方式,配合即将学习的动画知识,可以取代大量之前只能靠flash才可以实现的效果。
- 在css3中,可以通过transform(变形)来实现2d或者3d的转换,其中2d中有缩放移动,旋转。
1.2.1缩放
用法与参数:scale(x,y)
可以对元素进行水平和垂直方式的缩放,x,y的取值可以为小数,不可为负数。
1.2.2移动
用法和参数:translate(x,y)
x为水平方向移动,y为垂直方向移动
可以以改变元素的位置,x,y可以为负数。
1.2.3旋转
用法与参数:rotate(deg)
可以对元素惊醒旋转,正值为顺时针,负值为逆时针
1.2.4改变圆心
transform-origin:(方位)如:top 配合旋转 可改变图形圆心位置旋转方式。
2 案例
2.1气泡案例
当鼠标移入在这个气泡上,会实现丝滑气泡动态效果的动画
2.1.1
首先在body里定义一个div,并命名类为box。在style中开始编写css样式 实现动态效果。如下
.box {
width: 300px;
height: 150px;
margin: 100px auto;
border-radius: 20px;
background: url(./images/paopao.png) no-repeat,
url(./images/paopao.png) no-repeat right bottom;
background-color: skyblue;
transition: all 2s;
}
2.1.2
设置 .box
元素的宽度为 300 像素高度为 150 像素。
width: 300px;height: 150px;
2.1.3
设置 .box
元素的外边距,上下各 100 像素,左右自动(使其水平居中)。
margin: 100px auto;
2.1.4
设置元素的边角为 20 像素的圆角,使其看起来更加柔和。
border-radius: 20px;
2.1.5
设置了两个背景图像:
background:
url(./images/paopao.png) no-repeat,
url(./images/paopao.png) no-repeat right bottom;
:
第二个背景图片位置设置在右下角(right bottom
)。实现同一张图片,不同的动画效果
2.1.6
设置所有可过渡属性的变化时间为 2 秒,意味着在状态变化时(如鼠标悬停)会平滑过渡。
transition: all 2s;
2.1.7
伪类选择器,用于定义当鼠标悬停在 .box
元素上时的样式。
.box:hover
2.1.9
当鼠标悬停时,第一个背景图像的位置变化为左下角(left bottom
)。
第二个背景图像的位置变化为右上角(right top
)。
background-position: left bottom, right top;
效果总结
当用户将鼠标悬停在类为 .box
元素的泡泡背景上时,背景图像的位置会发生变化,并且这种变化会在 2 秒内平滑过渡。背景图像在鼠标悬停时移动,给人一种动态的视觉体验。十分丝滑,且简单。
2.2火箭移动
当鼠标移动到页面上(body),自左下向右上出来一个小火箭。
body{
height: 100%;
background-color: #60cac7;
}
html{
height: 100%;
}
.img{
position: absolute;
bottom: 0px;
left: 0px;
width: 50px;
transform: translate(-81px,100px) rotate(10deg);
transition: all 2s;
}
body:hover img{
transform: translate(500px,-500px) rotate(45deg);
}
2.2.1
html
和 body
的高度为百分百。这两行代码确保网页的高度占满整个浏览器窗口。方便我们鼠标移入时动画能触发。
body { height: 100%;
background-color: #60cac7; }
html { height: 100%; }
2.2.2
.img
类的样式设置
.img{
position: absolute;
bottom: 0px;
left: 0px;
width: 50px;
transform: translate(-81px,100px) rotate(10deg);
transition: all 2s;
}
2.2.3
将该元素的定位方式设置为绝对定位。
position: absolute;
bottom: 0px;
left: 0px;
2.2.4
使用 transform属性对元素进行变换:
transform: translate(-81px,100px) rotate(10deg);
2.2.5
将元素在水平方向上向左移动 81 像素,在垂直方向上向下移动 100 像素。将元素顺时针旋转 10 度。
transform: translate(-81px,100px) rotate(10deg);
2.2.6
设置所有可过渡的属性在变化时的持续时间为 2 秒。这意味着当元素的样式发生变化时,变化会平滑地过渡。
transition: all 2s;
2.2.7
body:hover img
的样式设置
当鼠标悬停在 body
元素上时,选择所有 img
元素
body:hover img{
}
当鼠标悬停时,元素的变换会更新为:
translate(500px,-500px);将元素在水平方向上向右移动 500 像素,在垂直方向上向上移动 500 像素。将元素顺时针旋转 45 度。
transform: translate(500px,-500px) rotate(45deg);
效果总结
这段代码的总体效果是,我们将鼠标悬停在页面的任意位置时,位于左下角的小火煎会平滑地移动到右上角并旋转30°,同时背景颜色保持不变。
2.3盾牌,位置还原
当鼠标移入这个页面的时候,页面上显示的盾牌碎片将合体,成为一个完整的盾牌
body{
background-color: #74c66d;
height: 100%;
}
html{
height:100% ;
}
div{
width: 430px;
height: 500px;
margin: 400px auto;
}
img:nth-child(1){
transform: translate(-45px,-45px);
transition: all 2s;
}
img:nth-child(2){
transform:translate(0px,-45px);
transition: all 2s;
}
img:nth-child(3){
transform:translate(45px,-45px);
transition: all 2s;
}
img:nth-child(4){
transform:translate(-45px,0px);
transition: all 2s;
}
img:nth-child(5){
transform:scale(1.5,1.5);
transition: all 2s;
}
img:nth-child(6){
transform:translate(45px,0px);
transition: all 2s;
}
img:nth-child(7){
transform:translate(-45px,45px);
transition: all 2s;
}
img:nth-child(8){
transform:translate(0px,45px);
transition: all 2s;
}
img:nth-child(9){
transform:translate(45px,45px);
transition: all 2s;
}
body:hover img {
transform: translate(0%,0%)
}
在body中我们插入盾牌碎片,集齐九个盾牌碎片即可召唤出世界上最强的刺不穿的盾。打败巨龙,营救公主。所以我们我们这么写代码。
2.3.1
html
和 body
的高度为百分百。这两行代码确保网页的高度占满整个浏览器窗口。方便我们鼠标移入时动画能触发。
body { height: 100%;
background-color: #60cac7; }
html { height: 100%; }
2.3.2
选择 div
中的第一个 img
元素。nth-child(1)
是一个伪类选择器,用于选择父元素中的第一个子元素。对第一个 img
元素应用变换;
img:nth-child(1) {
将该图像在水平方向上向左移动 45 像素,在垂直方向上向上移动 45 像素。
transform:translate(-45px, -45px);
设置所有可过渡的属性在变化时的持续时间为 2 秒。
transition: all 2s;}
2.3.3
其余body中div的九个盾牌碎片img同理,只需要就改下伪类元素里的数字,再修改碎片的初始移动位置,再通过鼠标移入的hover来让盾牌碎片重新合体为一个完整的盾牌。就可以打败巨龙。
body:hover img {
transform: translate(0%,0%)
}