十天精通CSS3_学习笔记

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

十天精通CSS3

                
                大漠
            Web前端工程师

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

最热最新

怀揣梦想的小白

::before 跟 ::after用于在content的前面跟后面插入内容
属性里面的content为内容
通过::before ::after可以为元素的前后添加内容跟相应的样式

查看全部

0 采集收起来源：CSS3选择器 ::before和::after
2019-01-25
怀揣梦想的小白

关于first-child 跟first-child-type

查看全部

0 采集收起来源：CSS3 first-of-type选择器
2019-01-23
怀揣梦想的小白

表达式的n从0开始

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—nth-child(n)
2019-01-23
怀揣梦想的小白

ul > li指的是子li 也就是平级的li 而不是一个li

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—first-child
2019-01-23
ZhiLuffy

opacity 是设置透明度，它的值在0~1之间， .5就是0.5，这里省略了0，也就是半透明的意思；
还有就是-webkit-transform:和-moz-transform：和transform这三个具体意思不咋理解
这里是考虑了各个浏览器的兼容性所加的前缀，这个transform目前还没有成为W3C标准，为了让浏览器识别所加的；
就像有人的first-name是小波，但他的姓氏可能是李，可能是王，加上姓人家才知道喊的是他；
-webkit-是谷歌浏览器前缀
-moz-火狐前缀，另外还有safari和ie的，

查看全部

0 采集收起来源：CSS3中的变形--缩放 scale()
2019-01-23
怀揣梦想的小白

text-shadow:x,y轴的偏移距离负值往反方向模糊程度 color

查看全部

0 采集收起来源：CSS3文字与字体文本阴影text-shadow
2019-01-25
怀揣梦想的小白

@font-face 用于加载服务器的字体文件
需font-family：名称
src:
1.@font-face用于导入
2.在font-family上正常使用

查看全部

0 采集收起来源：CSS3文字与字体嵌入字体@font-face
2019-01-25
怀揣梦想的小白

设置文字溢出显示省略号三部曲
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;

查看全部

0 采集收起来源：CSS3文字与字体 text-overflow 与 word-wrap
2019-01-23
怀揣梦想的小白

例 to top left 表示向左上角，从哪里向左上角呢？从相反方向到左上角，即表示从右下角到左上角

查看全部

0 采集收起来源：CSS3颜色渐变色彩
2019-01-23
怀揣梦想的小白

此处的width虽为210 但是border为70 也就是说四个角都有70px 然后内容的宽度为70 加起来就等于五个图片

查看全部

0 采集收起来源：CSS3边框为边框应用图片 border-image
2019-01-23
怀揣梦想的小白

当x轴偏移量为负数时，线往左边走；
当y轴偏移量为负数时，线往上面走；
阴影模糊半径越大越模糊；
阴影扩展半径越大，线越粗

查看全部

1 采集收起来源：CSS3边框阴影 box-shadow（二）
2019-01-23
怀揣梦想的小白

内阴影出现在左上角，外阴影出现在右下角，偏移量指的是在出现的位置扩展阴影

查看全部

0 采集收起来源：CSS3边框阴影 box-shadow（一）
2019-01-23
慕田峪4466426

border-radius是向元素添加圆角边框。
5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */
实心上半圆：把高度（height）设为宽度（width）的一半，并且只设置左上角和右上角的半径与元素的高度一致（大于也是可以的）。

查看全部

0 采集收起来源：CSS3边框圆角效果 border-radius
2019-01-17
慕粉0815224883

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>制作3D旋转导航</title>
<style>
@import url("http://www.w3cplus.com/demo/css3/base.css");
/*任务一：引入本地字体文件*/
@font-face {
font-family: 'sansationregular';
src: url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.eot');
src: url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.eot?#iefix') format('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/embedded-opentype'),
url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.woff') format('woff'),
url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.ttf') format('truetype'),
url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.svg#sansationregular') format('svg');
font-weight: normal;
font-style: normal;
}
body {
background-color:#edecec;
}

/* basic menu styles */
.nav-menu {
display: block;
background: #74adaa;
width:950px;
margin: 50px auto 150px;
}
.nav-menu > li {
display: inline;
float:left;
border-right:1px solid #94c0be;
}
.nav-menu > li:last-child {
border-right: none;
}
.nav-menu li a {
color: #fff;
display: block;
text-decoration: none;
/*调用本地字体*/
font-family: 'sansationregular';
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
text-transform: capitalize;
overflow: visible;
line-height: 20px;
font-size: 20px;
padding: 15px 30px 15px 31px;
}

/* animation domination */
.three-d {
/* 任务三、设置3D舞台布景 */
-webkit-perspective: 200px;
-moz-perspective: 200px;
-ms-perspective: 200px;
-o-perspective: 200px;
perspective: 200px;

/*任务四、设置3D舞台布景过渡效果*/
-webkit-transition: all .07s linear;
-moz-transition: all .07s linear;
-ms-transition: all .07s linear;
-o-transition: all .07s linear;
transition: all .07s linear;
position: relative;
}

.three-d:not(.active):hover {
cursor: pointer;
}
/*任务五、给不是当前状态的3D舞台的悬浮与聚焦状态设置变形效果*/
.three-d:not(.active):hover .three-d-box,
.three-d:not(.active):focus .three-d-box {
-wekbit-transform: translateZ(-25px) rotateX(90deg);
-moz-transform: translateZ(-25px) rotateX(90deg);
-o-transform: translateZ(-25px) rotateX(90deg);
-ms-transform: translateZ(-25px) rotateX(90deg);
transform: translateZ(-25px) rotateX(90deg);
}

.three-d-box {
/*任务六、给3D舞台中“.three-d-box”设置过渡与变形效果*/
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
-webkit-transform: translatez(-25px);
-moz-transform: translatez(-25px);
-ms-transform: translatez(-25px);
-o-transform: translatez(-25px);
transform: translatez(-25px);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-pointer-events: none;
-moz-pointer-events: none;
-ms-pointer-events: none;
-o-pointer-events: none;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
}
/*任务七、给导航设置3D前，与3D后变形效果*/
.front {
-webkit-transform: rotatex(0deg) translatez(25px);
-moz-transform: rotatex(0deg) translatez(25px);
-ms-transform: rotatex(0deg) translatez(25px);
-o-transform: rotatex(0deg) translatez(25px);
transform: rotatex(0deg) translatez(25px);
}

.back {
-webkit-transform: rotatex(-90deg) translatez(25px);
-moz-transform: rotatex(-90deg) translatez(25px);
-ms-transform: rotatex(-90deg) translatez(25px);
-o-transform: rotatex(-90deg) translatez(25px);
transform: rotatex(-90deg) translatez(25px);
color: #FFE7C4;
}

.front, .back {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #74adaa;
padding: 15px 30px 15px 31px;
color: white;
-webkit-pointer-events: none;
-moz-pointer-events: none;
-ms-pointer-events: none;
-o-pointer-events: none;
pointer-events: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/*任务八、设置导航当前状态与悬浮状态下的背景效果*/
.nav-menu li .active .front,
.nav-menu li .active .back,
.nav-menu li a:hover .front,
.nav-menu li a:hover .back {
background-color: #51938f;
-webkit-background-size: 5px 5px;
background-size: 5px 5px;
background-position: 0 0, 30px 30px;
background-image: -webit-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
background-image: -moz-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
background-image: -ms-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
background-image: -o-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
background-image: linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
}
.nav-menu ul {
position: absolute;
text-align: left;
line-height: 40px;
font-size: 14px;
width: 200px;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
-webkit-transform-origin: 0px 0px;
-moz-transform-origin: 0px 0px;
-ms-transform-origin: 0px 0px;
-o-transform-origin: 0px 0px;
transform-origin: 0px 0px;
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
-ms-transform: rotateX(-90deg);
-o-transform: rotateX(-90deg);
transform: rotateX(-90deg);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
/*任务九、显示下拉导航菜单，并其设置一个变形效果*/
.nav-menu > li:hover ul {
display: block;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}
</style>
</head>
<body>
<div id="nav">
<ul class="nav-menu clearfix unstyled">
<li><a href="#" class="three-d active">
Home
HomeHome
</a></li>
<li><a href="#" class="three-d">
Services
ServicesServices
</a></li>
<li><a href="#" class="three-d">
Products
ProductsProducts
</a></li>
<li><a href="#" class="three-d">
About
AboutAbout
</a></li>
<li><a href="#" class="three-d">
Contact
ContactContact
</a></li>
<li><a href="#" class="three-d">
Blog
BlogBlog
</a>
<ul class="clearfix unstyled drop-menu">
<li><a href="#" class="three-d">
Html5
Html5Html5
</a></li>
<li><a href="#" class="three-d">
Css3
Css3Css3
</a></li>
<li><a href="#" class="three-d">
JavaScript
JavaScriptJavaScript
</a></li>
<li><a href="#" class="three-d">
Videogames
VideogamesVideogames
</a></li>
</ul>
</li>
<li><a href="#" class="three-d">
Shop On-line
Shop On-lineShop On-line
</a></li>
</ul>
</div>
</body>
</html>

查看全部

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

慕桂英42414

only-child选择器对父元素只含有一个子元素时才
生效，且只有一个子元素时。

查看全部

1 采集收起来源：CSS3 only-child选择器

2019-01-13

首页上一页 65 66 67 68 69 70 71 下一页尾页

0/150

提交

取消

开始学习

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

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

微信扫码，参与3人拼团

热搜

最近搜索清空

十天精通CSS3