前端学习笔记 - 用CSS实现一个背景色为红色，半径为200px的圆，并设置不停的上下移动动画

返回目录

一、DOM

<body><div class="box"></div>
</body>

二、CSS

<style>.box {width: 200px;height: 200px;background-color: red;border-radius: 50%;position: relative;left: 0;top: 0;animation: move 2s linear infinite;}/*此方式为动画方式，使用的是定位的top属性还可以设置transform: translateY();margin-top*/@keyframes move {form {top: 0;}50% {top: 100px;}to {top: 0;}}
</style>

三、结果

前端学习笔记 - 用CSS实现一个背景色为红色，半径为200px的圆，并设置不停的上下移动动画相关推荐

前端学习笔记 - HTML+CSS
基础认知网页什么是网页网站是指在因特网上根据一定的规则,使用 HTML 等制作的用于展示特定内容相关的网页集合. 网页是网站中的一"页",通常是 HTML 格式的文件,它要通 ...
前端学习笔记：CSS学习之选择器篇
一.初识选择器 1.语法: 选择器{/* 注意添加";" */样式; } exp: body {font-size: 12px;color: red;} 二.标签选择器标签选择器 ...
第四次网页前端学习笔记（css）
学习网址:[优极限] HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础全套完成版_哔哩哔哩_bilibili 一.css的属性是否重复: 1.rep ...
个人前端学习笔记 html5+css（保持更新）
2022年7月5日 HTML基础知识一.路径的使用 1.绝对路径的使用:表示含有盘符的路径地址==-不建议在服务器(工作)中使用== -补充:插件的名字:Image preview(在编辑器代码前显 ...
前端学习笔记之CSS网页布局
CSS网页布局阅读目录一网页布局方式二标准流三浮动流四定位流一网页布局方式 #1.什么是网页布局方式布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式,比如wor ...
前端学习笔记之CSS属性设置
CSS属性设置阅读目录一字体属性二文本属性三背景属性四盒子模型五盒子模型各部分详解一字体属性 1.font-weight:文字粗细取值描述 normal 默认值,标准粗细 ...
前端学习笔记day48 CSS介绍
1. CSS-----层叠样式表设置样式的三种方式: 1. 直接在标签内写style属性设置该标签的样式(又叫内联标签) 2. 在head标签中写style标签设置body标签中子标签的样式: 3. ...
前端学习笔记（CSS、JS基础篇）
CSS篇注意:css注释使用/ /,而不是或者//,否则很容易导致不明错误!!! div padding:内边距.盒子内容与盒子边框的距离设置,相当于给盒子加了厚度,使用 ...
前端学习笔记（HTMLCSS）（06）CSS盒子模型练习
前端学习笔记(HTML&CSS)(06) 练习一:图片列表 <!DOCTYPE html> <html lang="en"> <head> ...

前端学习笔记 - 用CSS实现一个背景色为红色，半径为200px的圆，并设置不停的上下移动动画

返回目录

一、DOM

二、CSS

三、结果

前端学习笔记 - 用CSS实现一个背景色为红色，半径为200px的圆，并设置不停的上下移动动画相关推荐

最新文章

热门文章