CSS
CodeCode!
“Stay hungry,stay foolish!”
展开
-
css:社交按钮分享hover发光特效
效果<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="css/style.css"/> <!-- font-awesome --> <link rel="stylesheet" href="https://cdn.staticfile.org/font-原创 2020-08-25 14:49:52 · 641 阅读 · 1 评论 -
CSS 游戏动画案例
CSS 游戏动画图下载地址:http://www.aigei.com/s?q=%E4%BD%90&type=2d效果点击放技能<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #d2{ width: 300px; height:原创 2020-08-16 18:42:51 · 337 阅读 · 0 评论 -
CSS loading 动画案例
CSS loading 动画案例效果:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .loading{ margin: 0 auto; width: 300px; height: 300px; position: relative原创 2020-08-16 17:44:05 · 826 阅读 · 0 评论 -
8、CSS 动画( animation)
动画( animation)动画属性:animation:综合性的动画设置属性animation-name:动画名称animation-duration: 动画的时间周期animation-timing-function: 动画变化的速度,默认ease,liner,ease-in,ease-out,或贝塞尔黄线animation-delay: 延时时间animation-iteration-count: 动画循环次数 ,infinite:无限循环 animation-directio原创 2020-08-16 17:42:35 · 158 阅读 · 0 评论 -
CSS定位应用
定位应用图片定位在框框里用了绝对定位对对于父元素的相对定位<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #d1{ width: 400px; height: 500px; background: skyblue; margin原创 2020-08-16 14:59:17 · 83 阅读 · 0 评论 -
7、CSS定位的说明和应用
文章目录固定定位(fixed)相对定位(relative)绝对定位(absolute)静态定位粘性定位(sticky)固定定位(fixed)固定定位(fixed):根据浏览器的位置定位,会脱离正常的文档流。(不占原来的空间)position:fixed; 必须配合 left , right , top , bottom 才能具体定位到浏览器的具体位置上。<!DOCTYPE html><html> <head> <meta charset="utf-8原创 2020-08-16 14:57:00 · 222 阅读 · 0 评论 -
5、CSS 过渡动画
过渡动画设置过渡的属性设置过渡的时间设置过渡的速度设置过渡的延迟时间<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #d1{ width: 100px; height: 100px; background: skyblue;原创 2020-08-14 17:19:23 · 151 阅读 · 0 评论 -
4/CSS文字属性
字体属性字体大小字体粗细字体样色字体排布字体行高字体阴影<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #d1{ width: 600px; height: 200px; background: skyblue; /.原创 2020-08-14 16:32:10 · 115 阅读 · 0 评论 -
3/ CSS浮动与清除浮动
浮动可以解决文字包围图片的问题浮动可以解决莫名奇妙的间隔问题浮动可以向左,向右进行排版对齐浮动:可以设置元素,脱离正常的文档流,向左或右,靠近父元素的边缘或者是设置了浮动的其他元素的元素的边缘靠拢。--浮动可以解决文字包围图片的问题<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="tex.原创 2020-08-14 16:01:20 · 89 阅读 · 0 评论 -
CSS选择器---笔记
文章目录属性选择器:子元素选择器直接子元素选择器选择某个元素后面的元素:选择元素后面的多个元素:创建伪元素:属性选择器:[属性名称]:单独选择某个属性[属性名称 = 属性值 ] : 选择这个属性具体的某个值的元素<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css">原创 2020-08-13 17:39:29 · 81 阅读 · 0 评论 -
1、样式选择器,顺序
1/直接在 style 上定的内容优先级最高。同样的选择器,谁在后面谁的优先级比较高2/选择器的优先级,在其余情况相同情况下,继承的样式 < 浏览器模式的样式 < 标签样式 < class样式 < id样式 < style属性样式3/可以使用在属性后面使用 !important 将属性优先级提升到最大4/写得越具体越复杂的选择器,优先级越高。#d3{ color: #FFFF00; font-size: 333px;}#d1{ color: forest.原创 2020-08-13 15:41:23 · 121 阅读 · 0 评论