css时尚编程百例源码 |关于css制作网站报告

/* 1. 鼠标悬浮变色 */
a:hover, button:hover{
background-color: #f7d88b;
}
/* 2. 光标样式 */
input{
cursor: pointer;
}
/* 3. 完美的垂直居中 */
.container{
display: flex;
justify-content: center;
align-items: center;
}
/* 4. 动画效果 */
/* 缩放 */
@keyframes zoomin {
from {
transform: scale(1);
}
to {
transform: scale(1.2);
}
}
button{
animation: zoomin .5s ease-in-out;
}
/* 5. 三角形按钮 */
.triangle-btn{
width: 0;
height: 0;
border: 10px solid transparent;
border-bottom-color: #f00; /* 改变此处的颜色可以变换背景色 */
cursor: pointer;
}
/* 6. 背景图片平铺 */
body{
background-image: url(bg.jpg);
background-repeat: no-repeat;
background-size: cover;
}
/* 7. 阴影效果 */
.box{
box-shadow: 3px 3px 5px #aaa;
}
/* 8. 边框变换 */
input{
border: 1px solid #ddd;
transition: border-color .3s;
}
input:focus{
border-color: #f00;
}
/* 9. 点击变换图像 */
img{
transition: transform .3s;
}
img:hover{
transform: scale(1.1);
}
/* 10. 渐变背景色 */
button{
background-color: #f00;
background-image: linear-gradient(0deg, #f00, #0f0);
}

以上是10个CSS时尚编程百例源码，希望这些代码可以帮助到你，让你的网页设计变得更加出彩！