HTML+CSS3（十）——CSS3新特性之动画

最新推荐文章于 2022-03-17 21:42:47 发布

C-A-L-D

最新推荐文章于 2022-03-17 21:42:47 发布

阅读量275

点赞数

分类专栏： Web前端-html+css3

本文链接：https://blog.csdn.net/qq_42952262/article/details/103866583

版权

Web前端-html+css3 专栏收录该内容

17 篇文章 3 订阅

订阅专栏

HTML+CSS3（一）——认识浏览器

HTML+CSS3（二）——HTML 初识

HTML+CSS3（三）——HTML基本标签

HTML+CSS3（四）——表单pattern正则属性

HTML+CSS3（五）——CSS基础

HTML+CSS3（六）——行内元素和块级元素

HTML+CSS3（七）——display属性（前面文章已讲过，这里转载一篇）

HTML+CSS3（八）——CSS权重

HTML+CSS3（九）——CSS高级技巧

HTML+CSS3（十）——CSS3新特性之过渡

HTML+CSS3（十）——CSS3新特性之2D变形和3D变形

HTML+CSS3（十）——CSS3新特性之动画

HTML+CSS3（十一）——案例

HTML+CSS3（十二）——CSS常见问题

语法格式：

animation:动画名称 动画时间 运动曲线  何时开始(默认0)  播放次数(默认1)  是否反方向(逆向alternate);

运动曲线的值：

@keyframes 动画名称 {
  from{ 开始位置 }  0%
  to{  结束  }  100%
}

使用动画需要有两个步骤：
1. 使用@keyframes创建动画
2. 使用animation绑定动画到对应元素

body {
  background: white;
}
img {
  width: 200px;
}
.animation {
  animation-name: goback;
  animation-duration: 5s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}
@keyframes goback {
  0%{}
  49%{
    transform: translateX(1000px);
  }
  55%{
    transform: translateX(1000px) rotateY(180deg);
  }
  95%{
    transform: translateX(0) rotateY(180deg);
  }
  100%{
    transform: translateX(0) rotateY(0deg);
  }
}

测试：

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
<style>
div {
    width: 100px;
    height: 100px;
    background: red;
    transition:transform 2s, width 2s, height 2s;   
}
 
div:hover {
    width: 200px;
    height: 200px;
    transform: rotate(180deg);
    animation: donhua 2s;        /*动画名称 动画耗时*/
}
 
@keyframes donhua
{
    0% {background-color: red ;}
    25% {background-color:green;}
    50% {background-color: gold;}
    100% {background-color: dodgerblue;}
 
}
.p
{
    margin: 200px auto
}
    </style>
</head>
<body>
 
    <div class="p"></div>
    
</body>
</html>

css3新特性之多列

多列：

1. column-count 规定元素应该被分隔的列数
2. column-gap 规定列之间的间隔
3. column-rule 设置列之间的宽度、样式和颜色规则

C-A-L-D

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS3（十）——CSS3新特性之动画

目录：HTML+CSS3（一）——认识浏览器HTML+CSS3（二）——HTML 初识HTML+CSS3（三）——HTML基本标签HTML+CSS3（四）——表单pattern正则属性HTML+CSS3（五）——CSS基础HTML+CSS3（六）——行内元素和块级元素HTML+CSS3（七）——display属性（前面文章已讲过，这里转载一篇）HTML+CSS3（八...
复制链接

扫一扫