本文详细介绍了CSS中的各种高级技巧，包括如何使用overflow属性控制内容溢出，通过nth-of-type选择器添加文件图标，理解并应用BFC（块格式化上下文），创建电影排行榜的布局，实现阴影和过渡效果，以及使用字体图标和transform实现位移、缩放和旋转等3D效果。案例涵盖了从简单的元素定位到复杂的交互设计，适合进阶学习。
文章目录
38.overflowe
overflow:hidden 超出容器的部分会被隐藏。
overflow:auto 超出德部分会出现滚动条
overflow-x overflow-y 设置为 hidden 或者是auto
案例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
article {
overflow: auto;
overflow-y: auto;
overflow-x: hidden;
width: 300px;
height: 300px;
border: 1px dashed balck;
margin: 200px auto 0;
}
p {
text-align: center;
color: #FF0000;
}
</style>
<body>
<article>
<img src="001.jpg" >
</article>
<!-- <p>
overflow: auto;
</p> -->
<p>
overflow-x: hidden;
</p>
<p>
overflow-y: auto;
</p>
</body>
</html>
案例2：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
section {
width: 800px;
margin: 100px auto;
}
section article {
float: left;
width: 200px;
height: 300px;
overflow: hidden;
border-radius: 4px;
}
#text-a {
background-color: #373334;
color: white;
}
#text-b {
background-color: #C8D7D2;
}
#text-c {
background-color: #F3F2F0;
}
#text-d {
background-color: #D74339;
}
h1 {
margin: 10px 10px 5px 50px;
}
p {
margin: 12px 50px;
}
section:hover article {
width: 50px;
}
section article:hover {
width: 650px;
overflow: auto;
}
</style>
</head>
<body>
<section>
<article id="text-a">
<h1>金刚经</h1>
<p>
如是我闻，一时，佛在舍卫国祗树给孤独园，与大比丘众千二百五十人俱。尔时，世尊食时，著衣持钵，入舍卫大城乞食。于其城中，次第乞已，还至本处。饭食讫，收衣钵，洗足已，敷座而坐。时，长老须菩提在大众中即从座起，偏袒右肩，右膝着地，合掌恭敬而白佛言：“希有！世尊！如来善护念诸菩萨，善付嘱诸菩萨。世尊！善男子、善女人，发阿耨多罗三藐三菩提心，应云何住，云何降伏其心？”佛言：“善哉，善哉。须菩提！如汝所说，如来善护念诸菩萨，善付嘱诸菩萨。汝今谛听！当为汝说：善男子、善女人，发阿耨多罗三藐三菩提心，应如是住，如是降伏其心。”“唯然，世尊！愿乐欲闻。” 佛告须菩提：“诸菩萨摩诃萨应如是降伏其心！所有一切众生之类：若卵生、若胎生、若湿生、若化生；若有色、若无色；若有想、若无想、若非有想非无想，我皆令入无余涅盘而灭度之。如是灭度无量无数无边众生，实无众生得灭度者。何以故？须菩提！若菩萨有我相、人相、众生相、寿者相，即非菩萨。” “复次，须菩提！菩萨于法，应无所住，行于布施，所谓不住色布施，不住声香味触法布施。须菩提！菩萨应如是布施，不住于相。何以故？若菩萨不住相布施，其福德不可思量。须菩提！于意云何？东方虚空可思量不？”“不也，世尊！”“须菩提！南西北方四维上下虚空可思量不？”“不也，世尊！”“须菩提！菩萨无住相布施，福德亦复如是不可思量。须菩提！菩萨但应如所教住。”
</p>
</article>
<article id="text-b">
<h1>金刚经</h1>
<p>
须菩提白佛言：“世尊！颇有众生，得闻如是言说章句，生实信不？”佛告须菩提：“莫作是说。如来灭后，后五百岁，有持戒修福者，于此章句能生信心，以此为实，当知是人不于一佛二佛三四五佛而种善根，已于无量千万佛所种诸善根，闻是章句，乃至一念生净信者，须菩提！如来悉知悉见，是诸众生得如是无量福德。何以故？是诸众生无复我相、人相、众生相、寿者相；无法相，亦无非法相。何以故？是诸众生若心取相，则为著我人众生寿者。若取法相，即著我人众生寿者。何以故？若取非法相，即著我人众生寿者，是故不应取法，不应取非法。以是义故，如来常说：‘汝等比丘，知我说法，如筏喻者；法尚应舍，何况非法。’”
</p>
</article>
<article id="text-c">
<h1>金刚经</h1>
<p>
“须菩提！于意云何？如来得阿耨多罗三藐三菩提耶？如来有所说法耶？”须菩提言：“如我解佛所说义，无有定法名罗三藐三菩提，亦无有定法，如来可说。何以故？如来所说法，皆不可取、不可说、非法、非非法。所以者何？一切贤圣，皆以无为法而有差别。”
</p>
</article>
<article id="text-d">
<h1>金刚经</h1>
<p>
“须菩提！于意云何？若人满三千大千世界七宝以用布施，是人所得福德，宁为多不？”须菩提言：“甚多，世尊！何以故？是福德即非福德性，是故如来说福德多。”“若复有人，于此经中受持，乃至四句偈等，为他人说，其福胜彼。何以故？须菩提！一切诸佛，及诸佛阿耨多罗三藐三菩提法，皆从此经出。须菩提！所谓佛法者，即非佛法。
</p>
</article>
</section>
</body>
</html>
注意: 上面这个段代码的作用。
section:hover article {
width: 50px;
}
section article:hover {
width: 650px;
overflow: auto;
}
有关hover
hover 先会影响父元素，在影响子元素。（上面的属性）
39. 文件图标的添加(css高级选择器的使用)
xxx：nth-of-type(index) 同级兄弟选择器 index 指：同类型兄弟元素中的排名
使用了： 代表是一个伪类选择器
属性选择器：
li a[href$='.pptx']{ // $代表结尾， href属性中的值以pptx结尾的 超链接
}
li a[href^='.pptx']{ // ^代表开头， href属性中的值以pptx开头的 超链接
}
案例：
用的图片
使用的属性选择器的案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=0.5>
<title></title>
</head>
<style>
ul li a {
background-image: url(imgs/bg.png);
background-repeat: no-repeat;
padding-right: 20px;
background-position-x: right;
}
ul li a[href$='.docx'] { background-position-y: 2px; }
ul li a[href$='.pptx'] { background-position-y: -47px; }
ul li a[href$='.xlsx'] { background-position-y: -72px; }
ul li a[href$='.pdf'] { background-position-y: -122px; }
ul li a[href$='.html'] { background-position-y: -145px; }
ul li a[href$='.swf'] { background-position-y: -191px; }
ul li a[href$='.zip'] { background-position-y: -214px; }
ul li a[href$='.mp3'] { background-position-y: -241px; }
ul li a[href$='.exe'] { background-position-y: -269px; }
ul li a[href$='.txt'] { background-position-y: -296px; }
ul li a[href$='.jpg'] { background-position-y: -169px; }
</style>
<body>
<ul>
<li><a href="xxx.docx">word文档</a></li>
<li><a href="xxx.pptx">PowerPoint文档</a></li>
<li><a href="xxx.jpg">图片文件</a></li>
<li><a href="xxx.jpg">图片文件</a></li>
<li><a href="xxx.jpg">图片文件</a></li>
<li><a href="xxx.jpg">图片文件</a></li>
<li><a href="xxx.xlsx">Excel文档</a></li>
<li><a href="xxx.pdf">PDF文档</a></li>
<li><a href="xxx.html">HTML网页</a></li>
<li><a href="xxx.swf">Flash文件</a></li>
<li><a href="xxx.zip">ZIP压缩文件</a></li>
<li><a href="xxx.mp3">MP3音乐文件</a></li>
<li><a href="xxx.exe">EXE执行程序</a></li>
<li><a href="xxx.txt">TXT文本文档</a></li>
</ul>
</body>
</html>
40.是时候了解BFC了
41.电影排行榜（css的高级选择器的使用）
css重置
css重置，就是将页面上的元素的样式进行初始化
由于某些标签天生会自带一些样式，
比如
p标签 自带 上下边距
<button> 标签自带边框
列表<li> 自带列表符号以及内边距
选择器：
li:first-child { li中的第一个元素
}
li:nth-of-type(even){ even 表示偶数的意思
}
案例：
案例中所用的图片
案例效果：
案例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
* {
margin: 0; padding: 0; border: none; list-style: none; /* css重置 */
}
img {
height: 80px; vertical-align: middle;
}
ul {
width: 600px; margin: 50px auto;
border-radius: 4px;
overflow: hidden;
}
ul li {
height: 90px; line-height: 90px;
}
ul li:first-child {
height: 40px; background: #22A4FF;
line-height: 40px;
font-weight: bold;
}
ul li:nth-of-type(even) {
background: #eee;
}
ul li div {
float: left;
text-align: center;
}
ul li div:nth-child(1) {
width: 120px;
}
ul li div:nth-child(2) {
width: 250px;
}
ul li div:nth-child(3) {
width: 100px;
}
ul li div:nth-child(4) {
width: 130px;
}
ul li span {
display: inline-block;
width: 18px; height: 18px;
background: url(imgs/star.png);
background-position-y: -175px;
}
</style>
<body>
<div class="container">
<ul>
<li>
<div>海报</div>
<div>IMDB电影排行</div>
<div>评分</div>
<div>年份</div>
</li>
<li>
<div><img src="imgs/01.jpg"></div>
<div> NO.1《肖申克的救赎》</div>
<div><span></span>9.2</div>
<div>1994</div>
</li>
<li>
<div><img src="imgs/02.jpg" ></div>
<div> NO.2《教父》</div>
<div><span></span>9.1</div>
<div>1972</div>
</li>
<li>
<div><img src="imgs/03.jpg" ></div>
<div> NO.3《教父2》</div>
<div><span></span>9.0</div>
<div>1974</div>
</li>
<li>
<div><img src="imgs/04.jpg" ></div>
<div> NO.4《黑暗骑士》</div>
<div><span></span>9.0</div>
<div>2008</div>
</li>
<li>
<div><img src="imgs/05.jpg" ></div>
<div> NO.5《十二怒汉》</div>
<div><span></span>8.9</div>
<div>1957</div>
</li>
<li>
<div><img src="imgs/06.jpg" ></div>
<div> NO.6《辛德勒的名单》</div>
<div><span></span>8.9</div>
<div>1993</div>
</li>
<li>
<div><img src="imgs/07.jpg" ></div>
<div> NO.7《指环王：王者归来》</div>
<div><span></span>8.9</div>
<div>2003</div>
</li>
<li>
<div><img src="imgs/08.jpg" ></div>
<div> NO.8《低俗小说》</div>
<div><span></span>8.9</div>
<div>1994</div>
</li>
<li>
<div><img src="imgs/09.jpg" ></div>
<div> NO.9《黄金三镖客》</div>
<div><span></span>8.8</div>
<div>1966</div>
</li>
<li>
<div><img src="imgs/10.jpg" ></div>
<div> NO.10《指环王：魔戒现身》</div>
<div><span></span>8.8</div>
<div>2001</div>
</li>
</ul>
</div>
</body>
</html>
还有许多的选择器：（如下）
42.阴影效果
-webkit-appearance : none; 作用：去掉默认的外观 appearance 外观 webkit 谷歌浏览器内核名称
伪元素选择器：
由于复选框input是一个单标签，里面无法包含其他的元素。使用下面方法就可以在input中包含一个伪元素了。
input[type='checkbox']::after {
content: ""; 在伪元素中添加内容。
}
线性渐变：
盒子阴影：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
* {
padding: 0; margin: 0;
}
input[type='checkbox'] {
-webkit-appearance: none;
margin: 50px;
border: 10px solid #c1c1c1;
border-radius: 50px;
width: 170px; height: 70px;
background: #888;
position: relative;
box-shadow: 0 0 10px 1px #3f3f3f inset;
outline: none;
transition: 0.5s;
}
input[type='checkbox']::after {
content: "";
display: block;
width: 60px; height:60px;
position: absolute;
left: -5px; top: -5px;
border-radius: 30px;
background:linear-gradient(to bottom,#d3d3d3,#9e9e9e);
box-shadow: 0px 2px 2px 0px #eee inset, 2px 1px 2px 0px #333;
transition: 0.5s;
}
input[type='checkbox']:checked {
background: #7FC555;
}
input[type='checkbox']:checked::after {
left: 95px;
}
</style>
<body>
<input type="checkbox">
</body>
</html>
43.过渡效果（制作动画的重要手段）
transition 过渡，转换
案例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<style type="text/css">
.box {
margin: 100px;
width: 123px; height: 45px;
background: url(imgs/01.jpg);
animation: run 1s infinite;
}
@keyframes run{
0% {
background: url(imgs/01.jpg);
}
6% {
background: url(imgs/02.jpg);
}
12% {
background: url(imgs/03.jpg);
}
18% {
background: url(imgs/04.jpg);
}
24% {
background: url(imgs/05.jpg);
}
30% {
background: url(imgs/06.jpg);
}
36% {
background: url(imgs/07.jpg);
}
42% {
background: url(imgs/08.jpg);
}
48% {
background: url(imgs/09.jpg);
}
54% {
background: url(imgs/10.jpg);
}
60% {
background: url(imgs/11.jpg);
}
66% {
background: url(imgs/12.jpg);
}
72% {
background: url(imgs/13.jpg);
}
78% {
background: url(imgs/14.jpg);
}
84% {
background: url(imgs/15.jpg);
}
90% {
background: url(imgs/16.jpg);
}
96% {
background: url(imgs/17.jpg);
}
}
</style>
<body>
<div class="box">
</div>
</body>
</html>
案例2：
transion: width 1s ease-in 2s ;
width 要过渡的属性
1s 过渡的时间
ease-in 过渡方式
2s 延迟时间
一般的过渡方式有下面的：
先慢后快再慢 ease
线性 linear
慢速开始 ease-in
慢速结束 ease-out
慢速开始慢速结束 ease-in-out
演示代码
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:50px;
background:#666;
color:white;
font-weight:bold;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
/* Firefox 4: */
#div1 {-moz-transition-timing-function: linear;}
#div2 {-moz-transition-timing-function: ease;}
#div3 {-moz-transition-timing-function: ease-in;}
#div4 {-moz-transition-timing-function: ease-out;}
#div5 {-moz-transition-timing-function: ease-in-out;}
/* Safari and Chrome: */
#div1 {-webkit-transition-timing-function: linear;}
#div2 {-webkit-transition-timing-function: ease;}
#div3 {-webkit-transition-timing-function: ease-in;}
#div4 {-webkit-transition-timing-function: ease-out;}
#div5 {-webkit-transition-timing-function: ease-in-out;}
/* Opera: */
#div1 {-o-transition-timing-function: linear;}
#div2 {-o-transition-timing-function: ease;}
#div3 {-o-transition-timing-function: ease-in;}
#div4 {-o-transition-timing-function: ease-out;}
#div5 {-o-transition-timing-function: ease-in-out;}
div:hover
{
width:300px;
}
code {
color: red;
}
</style>
</head>
<body>
<h3>
transition : width 2s <code>过渡方式</code>
</h3>
<div id="div1" style="top:100px">linear</div><br>
<div id="div2" style="top:150px">ease</div><br>
<div id="div3" style="top:200px">ease-in</div><br>
<div id="div4" style="top:250px">ease-out</div><br>
<div id="div5" style="top:300px">ease-in-out</div>
<p>请把鼠标指针移动到红色的 div 元素上，就可以看到过渡效果。</p>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>
如果先要深入的学习过渡方式的设定：需要去了解 ：贝塞尔曲线。
案例3：利用过渡制作出来的hover效果
transition:2s 代表 这个元素的所有样式变化，都会用2秒钟的时间来进行过渡。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
* {
padding: 0; margin: 0;
}
.item {
width: 100px; height: 100px;
float: left;
margin-left: 200px; margin-top: 50px;
transition: width 1s ease-in 2s;
}
.item span {
position: relative;
top: -20px;
white-space: nowrap;
}
.item:nth-child(1) {
background: sandybrown;
}
.item:nth-child(1):hover {
border-radius: 50px;
}
.item:nth-child(2) {
border-radius: 50px;
background: #FFC0CB;
}
.item:nth-child(2):hover {
background: #D74339;
}
.item:nth-child(3) {
border-radius: 50px;
background: orangered;
}
.item:nth-child(3):hover {
background: orangered;
box-shadow: 0 0 25px 5px orangered;
}
.item:nth-child(4) {
background: gray;
}
.item:nth-child(4):hover {
height: 200px;
}
.item:nth-child(5) {
background: gray;
}
.item:nth-child(5):hover {
opacity: 0.1;
}
</style>
<body>
<div class="item">
<span>改变border-radius</span>
</div>
<div class="item">
<span>改变background-color</span>
</div>
<div class="item">
<span>改变box-shadow</span>
</div>
<div class="item">
<span>改变height</span>
</div>
<div class="item">
<span>改变opacity</span>
</div>
</body>
</html>
伪类选择器：
input[type='checkbox']:checked{
}
点击后，会改变元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
* {
padding: 0; margin: 0;
}
input[type='checkbox'] {
-webkit-appearance: none;
margin: 50px;
border: 10px solid #c1c1c1;
border-radius: 50px;
width: 170px; height: 70px;
background: #888;
position: relative;
box-shadow: 0 0 10px 1px #3f3f3f inset;
transition: 0.6s;
outline: none;
}
input[type='checkbox']:checked {
background: #6FB500;
}
input[type='checkbox']::after {
content: "";
display: block;
width: 60px; height:60px;
position: absolute;
left: -5px; top: -5px;
border-radius: 30px;
background:linear-gradient(to bottom,#d3d3d3,#9e9e9e);
box-shadow: 0px 2px 2px 0px #eee inset, 2px 1px 2px 0px #333;
transition: 0.6s;
}
input[type='checkbox']:checked::after {
left: 95px;
}
</style>
<body>
<input type="checkbox">
</body>
</html>
44.字体图标的使用
网站名称：iconfont
在这个网站中可以进行下载文字图标
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<link rel="stylesheet" type="text/css" href="font/iconfont.css"/>
<style>
* { margin: 0; padding: 0;}
ul {
list-style: none;
color: white;
background: brown;
width: 250px;
margin: 50px;
}
ul li:first-child {
background: red;
}
ul li {
height: 45px; line-height: 45px;
padding-left: 10px;
font-size: 18px;
font-weight: bold;
}
ul li span {
padding-right: 10px; font-weight: normal;
}
.iconfont {
font-size: 18px;
}
</style>
<body>
<ul>
<li><span class="iconfont icon-caidan"></span>商品分类</li>
<li><span class="iconfont icon-lianyiqun"></span>女装/内衣</li>
<li><span class="iconfont icon-nanzhuang"></span>男装/户外运动</li>
<li><span class="iconfont icon-nvxie"></span>女鞋/男鞋/箱包</li>
<li><span class="iconfont icon-meizhuang"></span>美妆/个人护理</li>
<li><span class="iconfont icon-leimucuzhubao"></span>腕表/眼睛/珠宝首饰</li>
<li><span class="iconfont icon-shumashouji"></span>手机/数码/电脑办公</li>
<li><span class="iconfont icon-muying"></span>母婴玩具</li>
</ul>
</body>
</html>
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1587029398873'); /* IE9 */
src: url('iconfont.eot?t=1587029398873#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAl0AAsAAAAAECwAAAklAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCEAgqSKI5CATYCJAMkCxQABCAFhG0HgQMbaQ0jETaUk0In++eB7TYlcCTV0AAKjwPKE/JTds99ZGf8YmiEBs2Fd/3/dOvvG8SpaalTK1YrtWLbCq4PGPMBxEO1H3t7e/cV8aYW6Rq6NUKnVhrTPRSW1oZposNCwiJVs/dxvzv2py86n9srJNtd60jVBIlMVdvEYIX15P+I8mOmJ8vWl+P3mxV7EZPq0ovJISITlUYiLy3khSSi8f8GDdrqWAhxsZjKapLOrJyoP8fzAAHgwQ64AIqISlABByqwD2FOXXVlMXBCMag5TARDsEu5lsDRJCBhwEZj5wBMtL8eveGFOACDhgO/KKUisgxCZZmMBldr1fJwDSxoLwMA14MADsAFAIhrYEpqeBxAvNk4TJMJeAUAkczggD4vZNYZMyaOKWE0Wm2MUryZANVyAXRPBxcYoIcOKjTI8zePBQwUUJOPs6YOXQMQYIQagAFGTwM4gDHTADZg4qzIY4qhAQRgSjSABIzGvus5AC6drAsAEgDsK8B3CRSYISElsb2zhwIdQXJFIgMayeU5jiSfFoQKrGxsDAk+zgJK6kQRuE1rpEhBlYCkiHT1qjFrNGvHrk6ndlyxZC+86iPYftmCNe9Sz7RVwFKv5gvGrkVszRrDeorkEwK9PSrLdbKYpUpprH1mgUXAebEacVsRYoNlw2duYDgkJ9Psl66UqprbDWGoe7PXQ+whEFwoMwCJVmFmEc4aQopatzHW0NLAINR0qeoTwxCOEGZGkQbQrg4QEJ/C4XmVNvHYzvWqx23OL+N4lmahl0IYxBBuJxFT+ksoxTquXJ/drEUP1zBcxK8XD5smlScpPy3FkcIegyobc6vNYtYuM1nrYg1Zm7PICyyEjDahgYiNMPCpqq3hRWqyX6xDlXY8SfXNhzQcaecoAEOsKyZNKJj30zmlwP0BlMTg8eaTxeb+aFt0bFuT2JGU4KHcmRYQVfVpiBXw0K+uO/JopjxAmoIWLbZq6IFX1ZqMvjVdImDnmGeXTp5OtJby9dG2knWxbL0Uhs1m8fjZ2vOdzQxclP7zQbel3rmO4ELXlnb5uWjKEL5bLkN+GtfWVuql/HgFOzfDTuWIPaQtNWowSEamWX52XD6lppQHqw/OYFJCx7FVNet+IXvWwgAIxJmuLXRn/vnS1gnzk8WerhuZ5mCw8z32K6PrxJKGHq2CxeL6q9LBvW/KN2SI5/Yi16LyYCbVoQXIbph6Pm1xSjrcOzmQ4tV6Za3uPRPiDDFypDsuh9sPdl+V0qV6I7eyalbFslYxrmAErEW5KBlFWgk7xNg29HyQn2xxQr+82H0cc0bBTlbFJTO3un6jFDsYs3rOdYxsiwZOtbAPS8NyvwwsCUq80m9LkAkwRk5x+F3+GXV4nWG335XiLPz/dWHdQsf34Lq8lz99GqnbIe6QdIo7T819GwqEFwG3NlG0UGSjt+6Rgvai9czbFSl+DulH+JP1zc9ZuFB0xG4j07okP6kKd24mw3IdA+VzvD/tPvNC/kk2J9BBkddMOlfhBUlbmFa7jcc3G8DPHMKm1PWX8qzUyWsNVcNVYnU49GodJS+WZTSUPUo4ih28WtwXlVLIIfB6bprZo/g+JMknMa8i15IAO1+C52sXoCx29cLIAjFKv8rsETcNryc4hSlRddLVwZU/wlBjMpan1GkyAhyr4yqpGq81TtKzyl+lrjaTzRVYsqVYyaJjBbm8aIsUY4WzSu7fbT6qWOay8ohM5JgRLqoVRwJyTjNR1JrPpRJOhOlDStUNUVu1/RV1Nv55jDWfko0mO6cBiCNFteEZjiLZlp3mEvh8OZguEtq6qIwVFim8aEEuHWv0vPVUCeGJfXyxYkVzufDxJC2xSUDxyGwTrxPCcZTrUvRzPDehiwsz7pXS5UtGdfBbEO/c+HNlsTk1TsBqtR3XEXd0Sz88eal/y2NRud6UP2nPjk8KvRTHbS9wiNct1yYaXV/Bns2epwNNGEDgp9g9Q+3Dyrfzoy7dL3C03nB1W0WR0d25o278O/o0ssKxhTDpVGY8VKZLn+rUrmwzTZmYF3gl0uC3tjrUcfyx57y+z5rOErtq8Z7OpNTruETZvq5t3emO0xnyQlWa4bQH6v9hEVuFQPvYz2sxfe7/6r4HHWVmxzMTWj+ENyeoRlnmtP25PVTla7i6olSv7LMksCGmaM+e0LDEloXVRfKtpPXZUS57xuaOz8rKNwy+pdKpNm7IbT+66+tvamvF3gjTOJxfYRaeYKZY3RF3+GDhSK3NI1dgDN5HlpW7pvhqdEJk4hj3uaMKjqs2jcw+VKEbYZdAuTjN9XOe+3+GiXWobPS/pvH+v7cLN18zbnLZ7B3S7pVTV27lHL6cO0N9by1m/d8Yh/f1dHig3zzMaZpFq8LOP1KoM+lxztOk7LU7I3xHbP5e2EwP9LvMaNvpyM6FjQP3/ZSF+O/mAsRddVfRdtc+0SVC/KUs+eH/lWlrnBK86ahu65fkkjc5rOwiYzSJFR30gGdcTZWFpg4L9128IU71rHreiUMp+0681o+DhEMZFDJHlDmt2CpjEzJ7WdDIL0yd5vX54SKpt0yZ5ruEIoL8QrFcDL1qAADtlIzEW+1qSb7NsHBIjsJ7Dh4sh1MDAICvwl6Lwbd5tnzD6MM8nFbq2nHKtkRVFtKB3zj8/7pddw5EzaCatmQFxLp+dVBwPlDF1tUNoO7cXBQf62sLvc5u2F5DPPozHiyYZAOqV2nNg3YDm6UdimVg05cWvW1vpqEjbwW6kjaza28HdCOdXIq+ebauRV/UEReGQxpWbJQWSz69CXTeW4HuS5st7zwdqNGXTh5jdc/ZSfDsnBLmFMGvARbeSS2Zz5y5T1KFwZRc59O+lGbsHRy2+9/YnRylbVyQleqY5xJk6i3cxDlkjIeQ+phEvv1jNJx2O3m/cCu87cw8SBGUm8oRUKIxryZ4jtw5N4t1/4koBQOlOVu+zb9IKsN7B57ceJQg3sGV2nIsi1uVlKM2ykigD6Y86waiThli5LAHmtKPihEht1VVYzA4cad6FWVh23/AHmtw+Lbld4xRIqNGiy76GGKMyfz2LywaC30R89Sha4MWlNXU8GVlw0nhppY4PjCyRcNWeWmI3YgoEh7xQz90Zc00EsgRuk4HAAA=') format('woff2'),
url('iconfont.woff?t=1587029398873') format('woff'),
url('iconfont.ttf?t=1587029398873') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1587029398873#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-shumashouji:before {
content: "\3457";
}
.icon-nanzhuang:before {
content: "\e60e";
}
.icon-lianyiqun:before {
content: "\e681";
}
.icon-meizhuang:before {
content: "\e661";
}
.icon-muying:before {
content: "\e662";
}
.icon-leimucuzhubao:before {
content: "\e64a";
}
.icon-nvxie:before {
content: "\e61b";
}
.icon-caidan:before {
content: "\e613";
}
具体图标的使用，在网站下载后，会有具体的使用文档。查看即可。
45.transform的位移效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
* {
margin: 0; padding: 0;
}
.box {
float: left; position: relative; width: 300px; height: 300px;
margin: 100px 200px; overflow: hidden;
}
.box > img {
width: 300px; height: 300px;
}
.box > p{
transition: 1s; position: absolute; left: 0px; top: 0px;
}
.box h2 {
color: white; width: 200px;
transform: translateX(10px) translateY(250px);
}
.box p {
color: white;
}
.box p:nth-of-type(1) {
transform: translateY(140px) translateX(-150px);
}
.box p:nth-of-type(2) {
transform: translateY(180px) translateX(-110px);
transition: 1s 0.1s;
}
.box p:nth-of-type(3) {
transform: translateY(220px) translateX(-100px);
transition: 1s 0.2s;
}
.box:hover p:nth-of-type(1) {
transform: translateY(140px) translateX(10px);
}
.box:hover p:nth-of-type(2) {
transform: translateY(180px) translateX(10px);
}
.box:hover p:nth-of-type(3) {
transform: translateY(220px) translateX(10px);;
}
</style>
<body>
<div class="box">
<img src="imgs/8.png" >
<h2>Taylor Swift</h2>
<p class="p1">Birthday:1989.12.13</p>
<p class="p2">Height:180cm</p>
<p class="p3">Weight:56kg</p>
</div>
</body>
</html>
46.transform的缩放和旋转
缩放案例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
* {
margin: 0; padding: 0;
}
img {
float: left; width: 300px; height: 300px;
margin: 100px 100px; transition: 1s;
}
img:nth-child(1):hover {
transform: scale(1.5);
}
img:nth-child(2):hover {
transform: scale(0.8);
}
</style>
<body>
<img src="imgs/1.png" >
<img src="imgs/2.png" >
</body>
</html>
缩放案例2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
* {
margin: 0; padding: 0;
}
.box {
float: left; position: relative; width: 300px; height: 300px;
margin: 100px 200px; overflow: hidden;
}
.box > img {
width: 300px; height: 300px; transition: 2s;
}
.box > *{
transition: 1s; position: absolute; left: 0px; top: 0px;
}
.box h2 {
color: white; width: 200px;
transform: translateX(10px) translateY(250px);
}
.box p {
color: white;
}
.box p:nth-of-type(1) {
transform: translateY(140px) translateX(-150px);
}
.box p:nth-of-type(2) {
transform: translateY(180px) translateX(-110px);
transition: 1s 0.1s;
}
.box p:nth-of-type(3) {
transform: translateY(220px) translateX(-100px);
transition: 1s 0.2s;
}
.box:hover p:nth-of-type(1) {
transform: translateY(140px) translateX(10px);
}
.box:hover p:nth-of-type(2) {
transform: translateY(180px) translateX(10px);
}
.box:hover p:nth-of-type(3) {
transform: translateY(220px) translateX(10px);;
}
.box:hover img {
transform: scale(1.3);
}
</style>
<body>
<div class="box">
<img src="imgs/8.png" >
<h2>Taylor Swift</h2>
<p class="p1">Birthday:1989.12.13</p>
<p class="p2">Height:180cm</p>
<p class="p3">Weight:56kg</p>
</div>
</body>
</html>
旋转案例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
* {
margin: 0; padding: 0;
}
.box {
float: left; position: relative; width: 300px; height: 300px;
margin: 100px 200px; overflow: hidden;
}
.box > img {
width: 300px; height: 300px; transition: 2s;
}
.box > *{
transition: 1s; position: absolute; left: 0px; top: 0px;
}
.box h2 {
color: white; width: 200px;
transform: translateX(10px) translateY(250px);
}
.box p {
color: white;
}
.box p:nth-of-type(1) {
transform: translateY(140px) translateX(-150px);
}
.box p:nth-of-type(2) {
transform: translateY(180px) translateX(-110px);
transition: 1s 0.1s;
}
.box p:nth-of-type(3) {
transform: translateY(220px) translateX(-100px);
transition: 1s 0.2s;
}
.box:hover p:nth-of-type(1) {
transform: translateY(140px) translateX(10px);
}
.box:hover p:nth-of-type(2) {
transform: translateY(180px) translateX(10px);
}
.box:hover p:nth-of-type(3) {
transform: translateY(220px) translateX(10px);;
}
.box:hover img {
transform: scale(1.3) rotateZ(-15deg);
}
</style>
<body>
<div class="box">
<img src="imgs/8.png" >
<h2>Taylor Swift</h2>
<p class="p1">Birthday:1989.12.13</p>
<p class="p2">Height:180cm</p>
<p class="p3">Weight:56kg</p>
</div>
</body>
</html>
旋转案例2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
* {
margin: 0; padding: 0;
}
img {
float: left; width: 300px; height: 300px;
margin: 100px 100px; transition: 1s;
}
img:nth-child(1):hover {
transform: rotateZ(45deg);
}
img:nth-child(2):hover {
transform: rotateX(45deg);
}
img:nth-child(3):hover {
transform: rotateY(45deg);
}
</style>
<body>
<img src="imgs/1.png" >
<img src="imgs/2.png" >
<img src="imgs/3.png" >
</body>
</html>
综合案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>明星资料卡</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="box">
<!--1-->
<!--figure 用作文档中插图的图像-->
<!--第一个图片-->
<figure class="view1">
<!--alt 如果无法显示图像，浏览器将显示替代文本-->
<img src="imgs/1.png" alt=""/>
<!--<figcaption> 标签定义 figure 元素的标题。-->
<!--"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。-->
<figcaption>
<h2>Billboard三首排行第一</h2>
<p class="pp p1">Shake It Off</p>
<p class="pp p2">Black Space</p>
<p class="pp p3">Bad Blood</p>
</figcaption>
</figure>
<!--第二张图片-->
<figure class="view2">
<img src="imgs/2.png" alt="">
<figcaption>
<h2>Taylor Swift</h2>
<p class="info info1">Birthday:1989.12.13</p>
<p class="info info2">Height:180cm</p>
<p class="info info3">Weight:56kg</p>
</figcaption>
</figure>
<figure class="view3">
<img src="imgs/3.png" alt="">
<figcaption>
<h2>Back To December</h2>
<p>
I'm so glad you made time to see me.
How's life, tell me how's your family?
I haven't seen them in a while.
You've been good, busier then ever.
We small talk, work and the weather
Your guard is up and I know why...
</p>
</figcaption>
</figure>
<figure class="view4">
<img src="imgs/4.png" alt="">
<figcaption>
<h2>1989</h2>
<span class="info4">Taylor Swift</span>
<span class="info4 info5">《1989》</span>
</figcaption>
<div class="box1"></div>
</figure>
<figure class="view5">
<img src="imgs/5.png" />
<figcaption>
<h2>Taylor Swift-《22》</h2>
<p style="color: black;">
I don't know about you, but I’m feeling 22,
Everything will be alright if you keep me next to you,
You don't know about me, but I bet you want to,
Everything will be alright if we just keep dancing like we're... 22 22
</p>
</figcaption>
<div class="box2"></div>
</figure>
<figure class="view6">
<img src="imgs/6.png" />
<figcaption>
<h2>Out of the Woods</h2>
</figcaption>
</figure>
<figure class="view7">
<img src="imgs/7.png" />
</figure>
<figure class="view8">
<img src="imgs/8.png" />
<figcaption>
<h2></h2>
<p>Taylor Swift</p>
<div class="top"></div>
<div class="left"></div>
</figcaption>
</figure>
<figure class="view9">
<img src="imgs/9.png" />
</figure>
</div>
<!--添加音乐图标-->
<img src="imgs/musicBtn.png" class="musicbtn" onClick="playPause(this)"/>
<audio src="mp3/Taylor Swift - We Are Never Ever Getting Back Together.mp3" autoplay="autoplay" id="musicPlayer"></audio>
</body>
</html>
@charset "utf-8";
*{
margin: 0;
padding: 0;
}
figure{
position: relative;
width: 450px;
height: 450px;
float: left;
/*显示多出的部分，隐藏掉*/
overflow: hidden;
}
h2,div,span,p{
transition: all 2s;
}
figure img{
transition: all 0.3s;
/*元素的不透明级，默认为1*/
opacity: 1;
}
figure:hover img{
opacity: 0.5;
}
/*第一个框格*/
.view1 img{
transform: translateX(0);
}
.view1:hover img{
/*X移动50px*/
transform: translateX(50px);
}
.view1 h2{
position: absolute;
left: 50px;
top: 60px;
color: white;
transform: translateX(0);
}
.view1:hover h2{
transform: translateX(50px);
}
.view1 .pp{
position: absolute;
left: 100px;
width: 100px;
background: dodgerblue;
transition: all 0.3s;
}
.view1 .p1{
bottom: 0px;
transform: translateY(300px);
}
.view1:hover .p1{
transform: translateY(-200px);
}
.view1 .p2{
top: 200px;
transform: translateX(500px);
}
.view1:hover .p2{
transform: translateX(0px);
}
.view1 .p3{
top: 275px;
transform: translateX(-500px);
}
.view1:hover .p3{
transform: translateX(0px);
}
/*第二个框格*/
.view2:hover img{
transform: translateX(-20px);
}
.view2 h2{
position: absolute;
left: 20px;
top: 60px;
color: white;
}
.view2 .info{
position: absolute;
left: 20px;
background: white;
width: 120px;
transform: translateX(-300px);
}
.view2 .info1{
top: 100px;
transition: all 0.3s;
}
.view2:hover .info1{
transform: translateX(0px);
width: 160px;
}
.view2 .info2{
top: 150px;
transition: all 0.3s 0.1s;
}
.view2:hover .info2{
transform: translateX(0px);
}
.view2 .info3{
top: 200px;
transition: all 0.3s 0.2s;
}
.view2:hover .info3{
transform: translateX(0px);
}
/*第三个框格*/
.view3 img{
transform: translateY(0);
}
.view3:hover img{
transform: translateY(-20px);
}
.view3 h2{
position: absolute;
top: 100px;
left: 60px;
color: white;
transform: translateY(-200px);
}
.view3:hover h2{
transform: translateY(0);
}
.view3 p{
position: absolute;
left: 80px;
bottom: 0px;
transform: translateY(0px);
opacity: 0;
}
.view3:hover p{
transform: translateY(-100px);
opacity: 1;
}
/*第四个框格*/
.view4 h2{
position: absolute;
left: 20px;
top: 60px;
color: white;
transform: translateY(50px);
opacity: 0;
}
.view4:hover h2{
transform: translateY(0px);
opacity: 1;
}
.view4 div{
position: absolute;
left: 0px;
bottom: -200px;
width: 140%;
height: 200px;
background: red;
}
.view4:hover div{
/*设置旋转元素的基点位置*/
transform-origin: 0% 0%;
transform: rotate(-20deg);
background: cornflowerblue;
}
.view4 .info4{
position: absolute;
right: 90px;
bottom: 80px;
/*显示在最上面 第99页*/
z-index: 99;
transform: translateY(100px);
}
.view4 .info5{
right: 20px;
}
.view4:hover .info4{
transform: translateY(0px);
}
/*第5个框格*/
.view5 h2{
position: absolute;
left: 15%;
top: 15%;
color: white;
transform: translateX(-50px);
}
.view5:hover h2{
transform: translateX(0px);
}
.view5 p{
position: absolute;
left: 15%;
top: 25%;
color: white;
transform: translateY(100px);
opacity: 0;
width: 70%;
}
.view5:hover p{
transform: translateY(0px);
opacity: 1;
}
.view5 div{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
border: 3px solid black;
transform: rotate(0deg) translateY(-450px);
transform-origin: 0% 0%;
}
.view5:hover div{
transform: rotate(180deg) translateX(-450px) translateY(-450px);
}
.view6:hover img{
transform: scale(1.5);
}
.view6 h2{
position: absolute;
top: 50%;
left: 45%;
/*font 定义字体的粗细
normal 正常 等同400
bold 粗体 等同700
100|200|300|~900 字体粗细的绝对值*/
font: 900;
transform: rotate(0deg);
}
.view6:hover h2{
transform: rotate(315deg);
transition: all 3s;
}
/*第7个框格*/
.view7 img{
transform: scale(1);
transition: all 1s;
}
.view7:hover img{
transform: scale(0.8);
}
/*第8个框格*/
.view8{
position: relative;
}
.view8 .top{
position: absolute;
left: 125px;
top: 70px;
width: 0;
height: 200px;
border-top: 2px solid #ccc;
border-bottom: 2px solid #ccc;
}
.view8:hover .top{
width: 240px;
}
.view8 .left{
position: absolute;
left: 140px;
top: 55px;
width: 200px;
height: 0px;
border-left: 2px solid #ccc;
border-right: 2px solid #ccc;
}
.view8:hover .left{
height: 240px;
}
.view8 p{
color: black;
font-weight: 900;
position: absolute;
top: 30%;
left: 55%;
font-size: 14px;
opacity: 0;
transform: rotate(0deg) translateY(500px) scale(1);
transition: all 3s;
}
.view8:hover p{
opacity: 1;
transform: rotate(360deg) translateY(0px) scale(2);
}
/*第9个框格*/
.view9 img{
position: absolute;
transition: all 3s;
transform: rotate(0deg) scale(1);
}
.view9:hover img{
transform: rotate(10deg) scale(1.1);
}
/*音乐按钮设置CSS*/
.musicbtn{
position:absolute;
right:20px;
top:20px;
width:40px;
height:40px;
animation:xuanzhuan 2s infinite;
}
@keyframes xuanzhuan{
from{}
to{transform:rotate(360deg);
-webkit-transform:rotate(360deg);}
}
47.透视与3D
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
body {
text-align: center;
overflow: hidden;
}
.poker {
transition: 1s;
box-shadow: 0 0 13px 0 #777;
border-radius: 5px;
margin: 200px;
}
.poker:hover {
transform: perspective(100px) rotateY(45deg);
}
</style>
<body>
<img class="poker" src="imgs/图片1.png" >
</body>
</html>
48.一个完整的3D立方体（感觉这章好难）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
/* basic menu styles */
.block-menu {
display: block;
}
.block-menu li {
display: inline-block;
}
.block-menu li a {
color: #fff;
display: block;
text-decoration: none;
font-family: 'Passion One', Arial, sans-serif;
font-smoothing: antialiased;
text-transform: uppercase;
overflow: visible;
line-height: 20px;
font-size: 24px;
padding: 15px 10px;
}
/* animation domination */
.three-d {
perspective: 200px;
transition: all .07s linear;
position: relative;
cursor: pointer;
}
/* complete the animation! */
.three-d:hover .three-d-box,
.three-d:focus .three-d-box {
transform: translateZ(-25px) rotateX(90deg);
}
.three-d-box {
transition: all .3s ease-out;
transform: translatez(-25px);
transform-style: preserve-3d;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
}
/*
put the "front" and "back" elements into place with CSS transforms,
specifically translation and translatez
*/
.front {
transform: rotatex(0deg) translatez(25px);
}
.back {
transform: rotatex(-90deg) translatez(25px);
color: #ffe7c4;
}
.front,
.back {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: black;
padding: 15px 10px;
color: white;
pointer-events: none;
box-sizing: border-box;
}
</style>
<body>
<ul class="block-menu lazy ">
<li><a href="/" class="three-d lazy ">
Home
<span aria-hidden="true" class="three-d-box lazy ">
<span class="front lazy ">Home</span>
<span class="back lazy ">Home</span>
</span>
</a></li>
<li><a href="/demos" class="three-d lazy ">
Demos
<span aria-hidden="true" class="three-d-box lazy ">
<span class="front lazy ">Demos</span>
<span class="back lazy ">Demos</span>
</span>
</a></li>
<li><a href="/demos" class="three-d lazy ">
Demos
<span aria-hidden="true" class="three-d-box lazy ">
<span class="front lazy ">Demos</span>
<span class="back lazy ">Demos</span>
</span>
</a></li>
<li><a href="/demos" class="three-d lazy ">
Demos
<span aria-hidden="true" class="three-d-box lazy ">
<span class="front lazy ">Demos</span>
<span class="back lazy ">Demos</span>
</span>
</a></li>
<!-- more items here -->
</ul>
</body>
</html>
这个反复练习吧。
那两个案例特别重要
扫一扫
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
