singleSpace - 博客园

2020年9月6日

摘要： css文件 :root { --hl: #1b2f90; --bg: #f9f9f6; --white: #f9f9f6; --time: 2s; --time4: calc(var(--time) * 4); --color1: #ffc400; --color2: #003bff; --colo 阅读全文

posted @ 2020-09-06 19:04 singleSpace 阅读(93) 评论(0) 推荐(0)

慕课前端入门-CSS动画

摘要： 1.CSS动画视觉暂留原理：人类具有视觉暂留的特性。人的眼睛在看到一幅画或一个物体后，在0.34秒内不会消失。动画原理：通过把人物的表情、动画变化等分解后，画成许多动作，利用视觉暂留，在一幅画还没有消失前播放下一副画，就会给人造成一种流畅的视觉变化效果 CSS动画：是元素从一种样式逐渐变化为另一阅读全文

posted @ 2020-09-06 14:13 singleSpace 阅读(194) 评论(0) 推荐(0)

2020年9月1日

慕课前端入门-CSS过渡

摘要： 1.过渡过渡transition：允许css的属性值在一定时间区间内平滑地过渡 2.在鼠标单击、获得焦点、被点击、或对元素任何改变中触发，并圆滑的以动画效果改变css的属性值。可以将过渡理解为动画 2.transition-property属性检索或设置对象中的参与过渡的属性。 transi 阅读全文

posted @ 2020-09-01 22:23 singleSpace 阅读(165) 评论(0) 推荐(0)

慕课前端入门-CSS转换

摘要： 1. transform 操作属性说明示例旋转rotate(angle) 2D旋转指定元素按照给定的角度旋转，正数顺时针旋转，负数逆时针旋转transform: rotate(7deg);rotateX(angle) 3D旋转指定对象在X轴(水平方向)上的旋转不用理会逆时针旋转，还是顺时针旋转，结果阅读全文

posted @ 2020-09-01 08:47 singleSpace 阅读(235) 评论(0) 推荐(0)

2020年8月31日

慕课前端入门-CSS文本与字体

摘要： 1. CSS文本属性语法示例阴影文本text-shadowtext-shadow: h-shadow w-shadow blur color;h-shadow：水平方向偏移正右负左v-shadow：垂直方向偏移正下负上blur：模糊color：颜色 p{text-shadow: 5px 5 阅读全文

posted @ 2020-08-31 13:03 singleSpace 阅读(203) 评论(0) 推荐(0)

2020年8月29日

慕课前端入门-CSS背景与渐变

摘要： 1.CSS背景 1.1.CSS背景图像区域 background-clip属性：指定背景绘制区域 border-box:边框盒子。从边框开始绘制，边框之外会被裁剪 padding-box:内边距盒子。从内边距开始绘制，padding之外会被裁剪 content-box:内容盒子。从内容开始绘制，co 阅读全文

posted @ 2020-08-29 13:16 singleSpace 阅读(315) 评论(0) 推荐(0)

2020年8月27日

慕课前端入门-CSS选择器

摘要： 1.CSS选择器通配符选择器:*{margin: 0} 元素选择器:body 类选择器:.red ID选择器:#green 后代选择器:ul li 选择器示例基本选择器子元素选择器：父元素>子元素只能选择父元素的子元素section>div{color: red;}相邻兄弟选择器：父元素+兄弟相邻阅读全文

posted @ 2020-08-27 19:50 singleSpace 阅读(174) 评论(0) 推荐(0)

2020年8月25日

慕课前端入门-HTML5属性变化

摘要： 1.input html5新增的属性有email、url、tel、number、date picker(date、datetime、datetime-local、month、week、time)、range、search、color <!DOCTYPE html> <html> <head> <me 阅读全文

posted @ 2020-08-25 13:43 singleSpace 阅读(141) 评论(0) 推荐(0)

2020年8月21日

黑马jQuery教程4

摘要： 1.案例-评分 <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> *{padding:0;margin: 0;} li{list-style-type: none;float: left; color: red 阅读全文

posted @ 2020-08-21 02:04 singleSpace 阅读(223) 评论(0) 推荐(0)

2020年7月15日

黑马JQuery教程2

摘要： 1.Class类操作 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style type="text/css"> div{ width: 100px;height: 100px;margin-top:10p 阅读全文

posted @ 2020-07-15 16:19 singleSpace 阅读(239) 评论(0) 推荐(0)