前端基础HTML5CSS3动画

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$美少女战士$</title><style>/*animation   所有动画属性的简写属性，除了 animation-play-state 属性。  3
animation-name  规定 @keyframes 动画的名称。   3
animation-duration  规定动画完成一个周期所花费的秒或毫秒。默认是 0。   3
animation-timing-function   规定动画的速度曲线。默认是 "ease"。     3
animation-delay     规定动画何时开始。默认是 0。     3
animation-iteration-count   规定动画被播放的次数。默认是 1。     3次  infinite 无限
animation-direction     规定动画是否在下一周期逆向地播放。默认是 "normal"。alternate  反向播放
animation-play-state    规定动画是否正在运行或暂停。默认是 "running"。  3
animation-fill-mode 规定对象动画时间之外的状态。*/.box {height: 300px;width: 300px;background-color: lime;/*动画  先定义后使用*//*动画属性 animation:动画名字  动画持续时间s  延时时间 s  运动曲线  往返运动 *//*动画属性 animation:动画名字  动画持续时间S 延时时间S 运动曲线 往返运动*/animation: donghua 3s  linear 0.5s  infinite  ;}/*执行几次是指单向运动，往算一次，沿原路线返回也算一次，动画结束后直接返回原状态不是往返运动*//*只有在执行多次时才能做往返运动 *//*不做往返运动时不论执行多少次都是单向运动*/@keyframes  donghua{0%{margin-left: 0;margin-top: 0;}/*linear直线的 linear*//*0% 最初20% 50% 75%100% 最终*/25%{margin-top: 300px;margin-left: 300px;}50%{margin-left: 600px;margin-top: 0;}100%{margin-left: 900px;margin-top: 300px;}}/*background-color: #a71d5d;*//*border-radius: 30px;*//*border: 2px solid black;*//*transform: translateX(400px);*//*border-radius: 50%;*/</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

前端基础HTML5CSS3动画相关推荐

web前端基础——实现动画效果
当两个效果之间变换时,可以使用transition过渡属性,但是有多个效果来回变换时,就需要使用动画效果,且动画过程可控(重复播放,画面暂停,最终画面等) 文章目录 1.简介 2.实现步骤 3.复合属 ...
前端基础CSS3-（3D动画）
一.透视属性:定义虚拟眼睛, perspective: : 1.透视写到被观察元素的父盒子上面 2.当透视值小于z值的时候,是什么都看不见的, 3. z值就是物体到屏幕的距离, 4. 而透视,就是虚 ...
前端基础HTML5CSS3提高
HTML5&CSS3提高目标能够说出 3~5 个 HTML5 新增布局和表单标签能够说出 CSS3 的新增特性有哪些一.HTML5新特性概述:HTML5 的新增特性主要是针对于以前的 ...
gif透明背景动画_前端基础系列之bmp、jpg、png、gif、svg常用图片格式浅谈（二）...
IT客栈作者:大腰子 bmp.jpg.png.gif.svg常用图片格式之前为大家介绍了几种WEB前端常用的图片格式,对比了它们的特点,参见<前端基础系列之bmp.jpg.png.gif.s ...
前端基础-HTML的的标签详解
阅读目录一.head内常用标签二. HTML语义化三. 字符实体四. h系列标签五. p标签六. img标签七. a标签八. 列表标签九. table标签十. form标签一. ...
前端基础学习html部分小结
前端基础学习html部分小结 1 了解知识 1.1 网页的组成 html(Hyper Text Markup Language)指的是超文本标记语言,可以加入图片.声音.动画.多媒体等内容.还可以从一 ...
蒲公英 · JELLY技术周刊 Vol.33: 前端基础课堂开课啦～
蒲公英 · JELLY技术周刊 Vol.33 页面文件太大?图片过大了吧:页面加载白屏?很有可能是字体文件还没加载完:页面加载时间过长?多半是主进程被阻塞--该怎么办呢?快来小葵,咳咳,「蒲公英」前端 ...
前端基础：CSS 3
前端基础:CSS 3 文章目录前言一.什么是CSS 0. CSS的简单介绍 1. 什么是CSS 2. CSS发展史 3. CSS的快速入门及优势 4. 四种CSS导入方式二.选择器 1. 三种基 ...
前端基础（HTML、CSS、JS）
前端基础(HTML.CSS.JS) 1 HTML 1.1 文件标签 1.2 排版标签 1.3 字体标签 1.4 列表标记 1.4.1 有序列表 1.4.2 无序列表 1.5 图片标签 1.6 超链接标 ...

前端基础HTML5CSS3动画

前端基础HTML5CSS3动画相关推荐

最新文章

热门文章