CSS3基础入门

CSS3是构建网页样式的一种标准，通过CSS3，我们可以让网页更加美观，更具吸引力，下面是CSS3基础入门。

1. CSS3选择器：

/* 标签选择器 */p {
    color: red;
}
/* ID选择器 */#idName {
    font-size: 20px;
}
/* 类选择器 */.className {
    font-style: italic;
}
/* 属性选择器 */[title="hello"] {
    background-color: yellow;
}

2. CSS3布局方式：

/* 盒子模型 */div {
    width: 200px;
    height: 200px;
    background-color: red;
    margin: 10px;
    padding: 20px;
    border: 2px solid black;
}
/* 浮动布局 */.left {
    float: left;
    width: 50%;
}
.right {
    float: right;
    width: 50%;
}
/* 弹性布局 */.container {
    display: flex;
    justify-content: center;
}
.item {
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color: red;
}

3. CSS3动画效果：

/* 载入动画 */@keyframes loading {
0% {
    transform: rotate(0deg);
}
100% {
    transform: rotate(360deg);
}
}
.loading-circle {
    border: 3px solid #ccc;
    border-top: 3px solid #000;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: loading 0.6s linear infinite;
}
/* 过渡动画 */.transition {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: width 0.3s ease-out;
}
.transition:hover {
    width: 200px;
}
    

通过学习CSS3基础入门，你将为构建更好的网页样式打下坚实的基础。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！