1.画一条0.5px的线:
div {
width: 200px;
height: 1px;
background-color:pink;
transform:scaleY(0.5);
}
在浏览器中,理论上1px已经是最小的单位,此时我们可以缩放的方式,使其变为原来的0.5倍
2.使用css实现淡入淡出 动画效果
.donghua {
width: 200px;
height: 200px;
background-color: pink;
animation-name: bianhua;
animation-duration: 5s;
animation-iteration-count: infinite;
}
@keyframes bianhua {
0% {
opacity: 0;
}
25% {
opacity:0.5;
}
50% {
opacity:1;
}
75% {
opacity:0.5;
}
100% {
opacity:0;
}
}
实现淡入淡出的效果,我们应该考虑到采用动画通过透明度的变化来实现,即需要运用anmiation属性和opacity属性
3.使用css实现一个,选中进行行变色的细边框的表格
css:
table {
margin:100px auto;
}
tr:hover {
background-color: pink;
}
html:
<table border="1" width="300" height="100" cellspacing="0">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
效果:
4.使用div+css实现轮播图
css:
.demo {
width: 600px;
height:330px;
overflow: hidden;
margin:100px auto;
}
ul {
width: 2400px;
height: 330px;
animation: move 10s linear 0s infinite none;
}
ul li {
float:left;
list-style: none;
width:600px;
height: 330px;
box-sizing:border-box;
}
ul li img {
width: 100%;
height: 100%;
}
@keyframes move {
from{
margin-left:0;
}
to {
margin-left:-1800px;
}
}
html:
<div class="demo">
<ul>
<li><img src="images/微信图片_20220415123950.jpg" ></li>
<li><img src="images/微信图片_20220415124003.jpg"></li>
<li><img src="images/微信图片_20220415124010.jpg"></li>
<li><img src="images/微信图片_20220415124023.jpg"></li>
<li><img src="images/微信图片_20220415123950.jpg"></li>
</ul>
</div>
效果图:
5.使用div+css实现一个圆形,红色占60%,绿色占40%
css:
.yuan {
width: 200px;
height: 200px;
border-radius:50%;
background-color: red;
background-image:linear-gradient(to right,transparent 50%,green 0);
}
.yuan::before {
content:"";
display:block;
margin-left: 50%;
height:100%;
border-radius:0 100px 100px 0;
background-color: red;
transform-origin: left;
transform:rotate(144deg);
}
6.要求使用至多两个元素实现以下效果
方法一:
css:
.box {
position:relative;
width: 200px;
height: 100px;
margin:100px auto;
background-color: skyblue;
}
.border {
position:absolute;
top: 0;
left:0;
width: 100px;
border-top:5px solid pink;
}
html:
<div class="box">
<div class="border"></div>
</div>
方法二:
css:
.box {
width: 200px;
height: 100px;
margin:100px auto;
background-color: skyblue;
}
.box::before{
display: block;
content:'';
width:100px;
height:5px;
background-color: pink;
}