LV1 之------DAY4 css3选择器&过渡特效
一、css3 选择器
详细参考：选择器详细参考
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* .box + ul{
border: 1px solid #f00;
}
h3::first-letter{
color: red; */
/* 单词转换为 大写 */
/* text-transform: uppercase;
}
h3{
text-transform: uppercase;
text-transform:capitalize;
}
ul li:first-child{
color: red;
}
ul li:last-child{
color: blue;
} */
/* .box2 p:first-child{
color: aqua;
}
.box2 p:first-of-type{
color: red;
} */
/* .box ~ ul{
border: 1px solid #000;
} */
/* input[name='user']{
border: 1px solid #f00;
}
input[name*='user']{
border: 1px solid #f00;
} */
/* input[name$='user']{
border: 1px solid blue;
}
input[name^='user']{
border: 1px solid blue;
} */
/* ul{
margin: 0;
padding: 0;
width: 1260px;
height: 500px;
border: 1px solid #000;
}
li{
width: 300px; */
/* height: 200px; */
/* margin-left: 20px; */
/* float: left; */
/* outline: 1px solid #f00;
} */
/* li:nth-child(1){
margin-left: 0;
}
li:nth-child(5){
margin-left: 0;
} */
/* li:nth-child(4n+1){
margin-left: 0;
} */
/* li:nth-child(2n+1){
background: #dedede;
} */
/* li:nth-child(odd){
background: #dedede;
}
li:nth-child(even){
background: red;
} */
/* li:nth-of-type(1){
color: red
} */
/* input:checked{
width: 30px;
height: 30px;
} */
/* input:checked+label{
color: red;
}
ul li:not(.two){
color:red
} */
input::selection{
background: deeppink;
}
</style>
</head>
<body>
<!-- <div class="box">我是div</div>
<ul>
<li>我是li 1</li>
<li>我是li 2</li>
<li>我是li 3</li>
</ul>
<ul>
<li> 我是第二个 ul 里面的 li</li>
<li> 我是第二个 ul 里面的 li</li>
</ul>
<ul>
<li> 我是第二个 ul 里面的 li</li>
<li> 我是第二个 ul 里面的 li</li>
</ul>
<h3>this is title</h3>
<div class="box2">
<h3>我是h3</h3>
<p>我是第一行p</p>
<p>我是第二行p</p>
<p>我是第三行p</p>
</div>
<input type="text" name="users">
<input type="text" name="userName">
<input type="text" name="myuser"> -->
<!-- <ul>
<p>我是p </p>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul> -->
<!-- <input type="checkBox" checked="checked"> <label for="">吃饭</label>
<input type="checkBox"> <label for="">睡觉</label>
<input type="checkBox"> <label for="">写代码</label> -->
<!-- <ul>
<li>1</li>
<li class="two">1</li>
<li>1</li>
<li>1</li>
</ul> -->
asdfasfasdfasdfasd
asdfasdf
<br>
asdfasdfasdf
<input type="text">
</body>
</html>
二、过渡： transition
transition ：
参与过渡的属性 如果省略 表明 是全部属性 也可使用all
时间 (必填项 s为单位)
线型 （由慢到快 由快到慢 匀速linear 。。。。。）
延迟
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
background: deeppink;
}
.box:hover {
width: 500px;
height: 300px;
background: deepskyblue;
/* 过渡
transition ：
参与过渡的属性 如果省略 表明 是全部属性 也可使用all
时间 (必填项 s为单位)
线型 （由慢到快 由快到慢 匀速linear 。。。。。）
延迟
*/
transition:height 2s ease-out , width 1s linear 1s;
transition: .5s linear;
-webkit-transition: .5s linear;
-moz-transition: .5s linear;
-ms-transition: .5s linear;
-o-transition: .5s linear;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
- 过渡应用：
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="container headerWrap">asdfasd</div>
</header>
<section class="solgan"></section>
<section class="container slideWrap">
<div class="slide">
<ul class="clearfix">
<li><img src="images/slide01.png" alt=""></li>
<li><img src="images/slide02.png" alt=""></li>
<li><img src="images/slide03.jpg" alt=""></li>
</ul>
<div class="arrow arrowLeft"></div>
<div class="arrow arrowRight"></div>
</div>
<div class="ad">ad1</div>
<div class="ad">ad2</div>
</section>
</body>
</html>
三、 变换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
perspective: 100;
-webkit-perspective: 100;
}
.box{
width: 200px;
height: 200px;
margin: 20px auto;
transition: all 5s linear;
}
.box1{
background: deeppink;
}
.box1:hover{
/* 变换：位移(x轴,y轴) */
transform: translateZ(100px);
transform: translate(100px,100px);
}
.box2{
background: deepskyblue;
}
.box2:hover{
/* 变换:缩放(x轴，y轴) */
transform: scaleX(1.5);
transform: scaleX(0.5);
transform: scale(0.1,0.1);
transform: scale(-1,-1);
transform: scale(2,2);
transform-origin: left top;
}
.box3{
background: salmon;
}
.box3:hover{
/* 变换:2d旋转(度数deg) */
transform: rotate(-36deg);
/* 3d */
transform: rotateY(45deg);
transform: rotateY(360deg);
-webkit-transform-style: preserve-3d;
/* 变换中心 */
/* transform-origin: left top; */
}
.box4{
background: yellowgreen;
}
.box4:hover{
transform: skew(-30deg,-30deg);
}
</style>
</head>
<body>
<div class="box box1">box1 translate位移</div>
<div class="box box2">box2 scale缩放</div>
<div class="box box3">box3 rotate旋转</div>
<div class="box box4">box4 skew扭曲</div>
</body>
</html>
- 变换应用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
perspective: 400;
-webkit-perspective: 400;
}
.box{
width: 300px;
height: 300px;
margin:50px auto;
position: relative;
border: 1px solid #000;
transition: .5s;
transform-style: preserve-3d;
}
.box1{
width: 300px;
height: 300px;
position: absolute;
left: 0;
top: 0;
z-index: 2;
background: deeppink;
}
.box2{
width: 300px;
height: 300px;
position: absolute;
left: 30px;
top: 30px;
transform: rotateY(180deg);
background: yellowgreen;
}
.box:hover{
transform: rotateY(180deg);
}
.box:hover .box1{
/* 背面隐藏 */
/* backface-visibility:hidden; */
}
</style>
</head>
<body>
<div class="box">
<div class="box1">box1</div>
<div class="box2">box2</div>
</div>
</body>
</html>
------------------------------------------------DAY4简概 笔记---------------------------------------------------
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
