十天精通CSS3_学习笔记

首页免费课十天精通CSS3 笔记

十天精通CSS3

                
                大漠
            Web前端工程师

                    查看讲师更多课程 
                    大漠讲师的其他课程
                
Sass进阶篇
中级·46635
免费课程
                                
Sass入门篇
中级·104427
免费课程
                                
玩转Bootstrap（JS插件篇）
中级·128648
免费课程
                                
玩转Bootstrap（基础）
初级·314544
免费课程
                                
                难度初级
            
                时长 5小时 0分
            
                学习人数
            
综合评分9.40
                            485人评价
                        查看评价
                                9.7
                                内容实用
                            
                                9.3
                                简洁易懂
                            
                                9.2
                                逻辑清晰

最热最新

慕先生9034914
1. 用逗号隔开每组 background 的缩写值；
2. 如果有 size 值，需要紧跟 position 并且用 "/" 隔开；
3. 如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。
4. background-color 只能设置一个。
查看全部

0 采集收起来源：CSS3背景 multiple backgrounds
2019-08-19
慕灬宁

ul>li 时候可以让每一个li都有变化
:last-child//:first-child 是针对第一或者是最后.
标签做样式时不需要前面加 (点 . )直接标签加上{}就可以.

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—last-child
2019-08-19
慕先生9034914
```
background-size: auto | <长度值> | <百分比> | cover | contain
```
<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；
cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；
contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。
查看全部

0 采集收起来源：CSS3背景 background-size
2019-08-19
慕先生9034914
```
text-shadow: X-Offset Y-Offset blur color;
```
Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；
查看全部

0 采集收起来源：CSS3文字与字体文本阴影text-shadow
2019-08-19
慕先生9034914

@font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。

查看全部

0 采集收起来源：CSS3文字与字体嵌入字体@font-face
2019-08-19
慕灬宁
```
可以实现点击变化:
( ! ! 必不可少的两个条件 :)
<h2><Brand</a></h2>
<div class="menuSection" 
    content for Brand
</div>
```
例如 :
#brand:target{
background:yellow;
}
<div class="menuSection" id="brand">
<h2><a href="#brand">Brand</a></h2>
<p>content for Brand</p>
</div>
( !! 点击变化时,一个变化,其他恢复原样 !! )
查看全部

0 采集收起来源：CSS3 结构性伪类选择器—target
2019-08-19
慕灬宁

跟选择器,重点是 : (冒号 :root)
:Root{
background:blue;
color:white;
}
<div>:Root选择器修改HTML元素的背景颜色</div>

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—root
2019-08-19
慕灬宁
语法注意: ^ ...开头的任何字符串 //$ ...以它结尾的任何字符串 // * ...包含此字符串的.
```
a[]{background:red;}
a[href$="doc"]{background:green;}
a[title*="box"]{background:blue;}
```
<a href="##" class="columnNews">
<a href="##" class="columnVideo">
<a href="##" class="columnAboutUs">
<a href="1.doc"></a>
<a href="2.doc"></a>
<a href="##" title="this is a box">
<a href="##" title="box1">
<a href="##" title="there is two boxs">
查看全部

0 采集收起来源：CSS3选择器属性选择器
2019-08-19
RazorE

鼠标放上去字会摇的菜单

查看全部

0 采集收起来源：CSS3背景制作导航菜单综合练习题
2019-08-19
慕灬宁

.nav li::before,.nav li::after{
content:"";
position:absolute;    }
关于content! : connent你可以理解为让before/after生效，没有connent:""你设置的样式不会添加进去，connent:""的引号内可以输入你想添加的文本.
关于right :
.nav li::after{
right: 0;        }
position：absolute是相对于该元素的父元素来定位的，所以right=0实际上是把这个空格位置紧贴在它的父元素也就是<li>的脸上，所以最后前后贴脸的两个空格才能重合起来。
/*删除第一项和最后一项导航分隔线*/
.nav li:first-child::before{
background:none;
}
(!! 注意 :这一块的写法 !!
伪元素 :     .nav li :after //.nav li :first-child::before )
总代码 :
.nav li{
position:relative;
display:inline-block;
padding:0 16px;
font-size: 13px;
text-shadow:1px 2px 4px rgba(0,0,0,.5);
list-style: none outside none;
}
/*使用伪元素制作导航列表项分隔线*/
.nav li::before,.nav li::after{
content:"";
position:absolute;
top:14px;
height: 25px;
width: 1px;
}
.nav li::after{
right: 0;
background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));
background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));
background: -o-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));
background: -ms-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));
background: linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));
}
.nav li::before{
left: 0;
background: -moz-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
background: -webkit-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
background: -o-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
background: -ms-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
background: linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
}
/*删除第一项和最后一项导航分隔线*/
.nav li:first-child::before{
background:none;
}
.nav li:last-child::after{
background :none;
}

查看全部

0 采集收起来源：CSS3背景制作导航菜单综合练习题
2019-08-19
慕灬宁

一个可以让鼠标放上去字体左右摇晃的效果 :
.nav a{
display: inline-block;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.nav a:hover{
-webkit-transform:rotate(10deg);
-moz-transform:rotate(10deg);
-o-transform:rotate(10deg);
-ms-transform:rotate(10deg);
transform:rotate(10deg);
}
***使用伪元素和渐变 :
/*使用伪元素制作导航列表项分隔线*/
.nav li::before,.nav li::after{

content:"";

position:absolute;

top:14px;

height: 25px;

width: 1px;

}

.nav li::after{

right: 0;

background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));

background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));

background: -o-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));

background: -ms-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));

background: linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));

}

.nav li::before{

left: 0;

background: -moz-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);

background: -webkit-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);

background: -o-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);

background: -ms-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);

background: linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);

}

查看全部

0 采集收起来源：CSS3背景制作导航菜单综合练习题
2019-08-19
慕粉1944048001
原理：
那些看上去很酷酷的CSS3 3D效果其实就颠来倒去那几个属性（本文提到的这几个），折腾来折腾去，这里这个效果显然也是如此。
首先HTML结构，如下：
```
舞台
    容器
        图片
        图片
        图片
        ...
```
对于舞台，很简单，加个视距，比方说800像素：
```
 perspective: 800px;
```
对于容器，很简单，加个3D视图声明，如下：
```
transform-style: preserve-3d;
```
查看全部

0 采集收起来源：制作3D旋转导航综合练习题
2019-08-18

慕粉1944048001

animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。主要具有四个属性值：none、forwards、backwords和both。其四个属性值对应效果如下：

属性值	效果
none	默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处
forwards	表示动画在结束后继续应用最后的关键帧的位置
backwards	会在向元素应用动画样式时迅速应用动画的初始帧
both	元素动画同时具有forwards和backwards效果

查看全部

0 采集收起来源：CSS3中设置动画时间外属性

2019-08-18

慕粉1944048001

animation-play-state属性主要用来控制元素动画的播放状态。
参数：
其主要有两个值：running和paused。
其中running是其默认值，主要作用就是类似于音乐播放器一样，可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放，这里的重新播放不一定是从元素动画的开始播放，而是从暂停的那个位置开始播放。另外如果暂停了动画的播放，元素的样式将回到最原始设置状态。

查看全部

0 采集收起来源：CSS3中设置动画的播放状态
2019-08-18

首页上一页 38 39 40 41 42 43 44 下一页尾页

0/150

提交

取消

开始学习

课程须知: 1.html+CSS相关基础知识 2.具有一定的网页制作经验 3.此课程不支持IE9版本以下，建议使用 chrome、safari、firefox、opera浏览器学习本课程。

老师告诉你能学到什么？: 1.系统学习CSS3相关知识 2.轻松制作出各种绚丽的效果

微信扫码，参与3人拼团

热搜

最近搜索清空

十天精通CSS3