css3三剑客都有

CSS3与HTML5是前端开发中必不可少的两个技术。而CSS3中的三剑客，分别是选择器、属性和动画。下面我们分别来看看这三个方面：

选择器

/* id选择器 */#div1{
    color: red;
}
/* 类选择器 */.box{
    width: 100px;
    height: 100px;
    background-color: yellowgreen;
}
/* 标签选择器 */p{
    font-size: 16px;
}
/* 通用选择器 */*{
    margin: 0;
    padding: 0;
}

属性

/* border-radius圆角 */.box{
    width: 100px;
    height: 100px;
    border-radius: 50%;
}
/* box-shadow盒子阴影 */.box{
    width: 100px;
    height: 100px;
    box-shadow: 0 0 10px gray;
}
/* transform变形 */.box{
    width: 100px;
    height: 100px;
    background-color: yellowgreen;
    transform: rotate(45deg);
}
/* transition过渡 */.box{
    width: 100px;
    height: 100px;
    background-color: yellowgreen;
    transition: all 1s;
}
.box:hover{
    transform: rotate(180deg);
}

动画

/* @keyframes关键帧 */@keyframes move{
0%{
    transform: translateX(0);
}
100%{
    transform: translateX(200px);
}
}
/* animation动画 */.box{
    width: 100px;
    height: 100px;
    background-color: yellowgreen;
    animation: move 2s infinite;
}
    

以上就是CSS3中三剑客的简单介绍和使用方法，希望能对大家有所帮助。

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