css3前端笔记

在网页设计中，CSS是一个很重要的部分。CSS3对于前端设计师来说是必须要学习的一项技能。 下面将详细介绍CSS3的一些最常用的特性。

CSS3选择器

/* 选择器：属性选择器 */a[href^="https://"] {
    color: #f00;
}
/* 选择器：nth-child() */div:nth-child(2n+1) {
    background-color: #ccc;
}
/* 选择器：伪类选择器 */a:hover {
    color: #00f;
}

CSS3边框

/* 边框：圆角效果 */div {
    border-radius: 10px;
}
/* 边框：透明度 */div {
    border: 2px solid rgba(255,255,255, 0.5);
}
/* 边框：阴影 */div {
    box-shadow: 5px 5px 5px #ccc;
}

CSS3背景

/* 背景：线性渐变 */div {
    background: -webkit-linear-gradient(red, blue);
    background: -o-linear-gradient(red, blue);
    background: -moz-linear-gradient(red, blue);
    background: linear-gradient(red, blue);
}
/* 背景：径向渐变 */div {
    background: radial-gradient(circle at top left, red, blue);
}
/* 背景：背景动画 */div {
    background-image: url(img/bg.jpg);
    animation: bgAnimation 10s ease-in-out infinite alternate;
}
@keyframes bgAnimation {
0% {
    opacity: 0.1;
}
100% {
    opacity: 1;
}
}

CSS3动画

/* 动画： 鼠标悬停 */div {
    transition: all 0.5s ease;
}
div:hover {
    transform: scale(1.2);
}
/* 动画：关键帧 */div {
    animation: shake 0.5s ease-in-out;
}
@keyframes shake {
50% {
    transform: rotate(10deg);
}
100% {
    transform: rotate(-10deg);
}
}
    

CSS3字体图标

/* 字体图标：FontAwesome *//* 使用： */

以上内容中只包含了最基本的CSS3特性。随着技术的发展，CSS3的功能还将不断地加强和扩展。希望这篇笔记能够帮助大家更好地掌握CSS3的基础特性。

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