css3的一些动画（代码及演示）
CSS3 的一些动画（代码及演示）1. 过渡：Transition(实现元素不同状态间的平滑过渡）补间动画：从初始状态到终了状态。帧动画：按固定顺序和速度播放。属性：Transition-property：all；所有属性均过渡Transition-duration：1s； 设置过渡时间Transition-timing-function:linear;设置运动曲线（...
CSS3 的一些动画（代码及演示）
1. 过渡：
Transition(实现元素不同状态间的平滑过渡）
补间动画：从初始状态到终了状态。
帧动画：按固定顺序和速度播放。
属性：
Transition-property：all； 所有属性均过渡
Transition-duration：1s； 设置过渡时间
Transition-timing-function:linear;设置运动曲线
（linear 线性，ease 减速，ease-in加速，
ease-out减速， ease-in-out 先减速后加速）
Transition-delay：1s；过渡延迟
综合属性：
Transition：让哪些属性过渡 过渡持续时间 运动曲线 延迟时间
Transition：all 3s linear 0s;
案例演示:
<style>
.box1{
width: 200px;
height: 200px;
background-color: red;
margin: 100px auto;
/*transition: width 2s linear 0s;*/
transition: all 2s linear 0s;
}
.box1:hover{
width: 600px;
background-color: green;
}
</style>
</head>
<body>
<div class="box1">
</div>
</body>
2. 2D动画
实现元素的位移，旋转，变形，缩放。
（1）缩放
Transform：scale（x，y）
Transform：scale（2，0.5）
X 为水平缩放倍数，y为垂直缩放倍数
案例:
<style>
.box{
width: 1000px;
margin: 100px auto;
}
.box div{
width: 300px;
height: 150px;
background-color: red;
float: left;
margin-right: 15px;
color: white;
text-align: center;
}
.box .box2{
background-color: green;
transition:all 2s linear 0s;
}
.box .box2:hover{
background-color: blue;
transform: scale(2,0.5);
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
(2) 位移
Transform：translate（水平，垂直）
Transform：translate（-100px，100px）
实例:
<style>
.box {
width: 200px;
height: 200px;
background: green;
transition: all 1s;
}
.box:hover {
transform: translateX(100px);
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
(3)旋转：
Transform：rotate（90deg);
实例：
<style>
.box{
width: 1000px;
margin: 100px auto;
}
.box div{
width: 300px;
height: 150px;
border:1px solid #000;
background-color: red;
float: left;
margin-right: 30px;
}
div:nth-child(2) {
background-color: pink;
transition: all 2s linear 0s;
}
div:nth-child(2):hover {
transform: rotate(-360deg);
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
3.3D动画：
（1）3D旋转
transform：rotateX(360deg）/rotateY/rotateZ
实例：
<style>
.box{
width: 1000px;
margin: 100px auto;
}
.box div{
width: 300px;
height: 150px;
border:1px solid #000;
background-color: red;
float: left;
margin-right: 30px;
}
div:nth-child(2) {
background-color: pink;
transition: all 2s linear 0s;
}
div:nth-child(2):hover {
transform: rotate(-360deg);
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
（2）3D位移
Transform:TranslateX/Y/Z;
实例：
<style>
.rotateX {
width: 300px;
height: 226px;
margin: 200px auto;
perspective: 110px;
}
img {
transition: transform 2s;
}
.rotateX:hover img {
transform: translateX(100px);
}
</style>
</head>
<body>
<div class="rotateX">
<img src="images/1.jpg" alt=""/>
</div>
</body>
（3）3D立方体：
<style>
.box {
width: 250px;
height: 250px;
border: 1px dashed red;
margin: 100px auto;
position: relative;
/*border-radius: 50%;*/
/* 让子盒子保持3d效果*/
transform-style: preserve-3d;
/*transform:rotateX(30deg) rotateY(-30deg);*/
animation: gun 8s linear infinite;
}
.box > div {
width: 100%;
height: 100%;
position: absolute;
text-align: center;
line-height: 250px;
font-size: 60px;
color: #daa520;
}
.left {
background-color: rgba(255, 0, 0, 1);
/* 变换中心*/
transform-origin: left;
/* 变换*/
transform: rotateY(90deg) translateX(-125px);
}
.right {
background: rgba(0, 0, 255, 1);
transform-origin: right;
/* 变换*/
transform: rotateY(90deg) translateX(125px);
}
.forward {
background: rgba(255, 255, 0, 1);
transform: translateZ(125px);
}
.back {
background: rgba(0, 255, 255, 1);
transform: translateZ(-125px);
}
.up {
background: rgba(255, 0, 255, 1);
transform: rotateX(90deg) translateZ(125px);
}
.down {
background: rgba(99, 66, 33, 1);
transform: rotateX(-90deg) translateZ(125px);
}
@keyframes gun {
0% {
transform: rotateX(0deg) rotateY(0deg);
}
100% {
transform: rotateX(360deg) rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="box">
<div class="up">上</div>
<div class="down">下</div>
<div class="left">左</div>
<div class="right">右</div>
<div class="forward">前</div>
<div class="back">后</div>
</div>
</body>
4.3D精灵图：
<style>
body{
background-color: white;
}
.box{
width: 280px;
height:280px;
/*border:1px solid black;*/
margin: 100px auto;
position: relative;
}
.box > div{
width: 100%;
height: 100%;
position: absolute;
/*border:1px solid black;*/
border-radius: 50%;
transition: all 2s linear 0s;
backface-visibility: hidden;
}
.box1{
background:url(images/1.jpg) left 0 no-repeat;
}
.box2{
background:url(images/2.jpg) right 0 no-repeat;
transform: rotateY(180deg);
}
.box:hover .box1{
transform: rotateY(180deg);
}
.box:hover .box2{
transform: rotateY(0deg);
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
4. animation动画
Animation属性格式：
Animation：动画名称 持续时间 执行次数 方向 运动曲线 执行延迟
（1）动画名称
Animation-name：donghua；
（2）执行一次时间
Animation-duration：4s；
（3）执行次数
animation-iteration-count：1；
（4）动画方向
Animation-direction：normal/alternate
（5）动画执行延迟
Animation-delay：1s；
（6）结束后效果：
（7）Animation-fill-mode：forwards 末尾状态
Backwards 初始状态
动画实例：
<style>
.box{
width: 150px;
height: 150px;
background-color: red;
margin: 100px auto;
animation: donghua 4s linear 0s;
}
@keyframes donghua{
0%{
transform: translateX(0px) translateY(0px);
background-color: red;
}
25% {
transform: translateX(500px) translateY(0px);
}
50% {
transform: translateX(500px) translateY(200px);
background-color: green;
}
75% {
transform: translateX(0px) translateY(200px);
}
100% {
transform: translateX(0px) translateY(0px);
background-color: red;
}
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！
更多推荐
14
0- 0
已为社区贡献3条内容
所有评论(0)