CSS3有趣的特效

CSS3是Web前端中常用的样式表语言之一，它可以为网页添加丰富的特效和动态效果，让网页看起来更加生动，吸引人。下面就是一些我认为很有趣的CSS3特效，希望能够给大家带来灵感和启发。

/*1.悬浮效果*/a:hover{
    color: red;
    font-weight: bold;
    text-decoration: underline;
}
/*2.边框效果*/.box{
    border: 2px dashed #000;
}
/*3.渐变效果*/.bg{
    background: -webkit-gradient(linear, left top, left bottom, from(#FFA500), to(#FF4500));
    background: -moz-linear-gradient(top, #FFA500, #FF4500);
    background: linear-gradient(to bottom, #FFA500, #FF4500);
}
/*4.动画效果*/@keyframes rotate{
0%{
    transform: rotate(0deg);
}
100%{
    transform: rotate(360deg);
}
}
.box{
    animation: rotate 2s linear infinite;
}
/*5.缩放效果*/.box{
    transform: scale(0.8);
}
/*6.倾斜效果*/.box{
    transform: skew(30deg, 10deg);
}
/*7.阴影效果*/.box{
    box-shadow: 10px 10px 5px #888888;
}
/*8.字体特效*/.text{
    font-size: 60px;
    font-weight: bold;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
/*9.透明度效果*/.box{
    opacity: 0.5;
}
/*10.过渡效果*/.box{
    transition: background 1s ease-in-out;
}
.box:hover{
    background: #00FF00;
}
    

以上是一些非常有趣的CSS3特效，它们可以帮助我们更好的实现想要的效果，同时还可以让网页内容更加生动有趣，吸引用户的注意力。希望大家可以尝试使用这些特效，并且不断探索更多的CSS3特效，让我们的网页变得更加美观和丰富多彩。

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