html5css特效代码

第一种代码实现的特效是：CSS实现邮票效果。

.ticket {
    width: 200px;
    height: 200px;
    border: 1px solid #ccc;
    background: url() no-repeat center;
    position: relative;
    overflow: hidden;
}
.ticket:before, .ticket:after {
    content: "";
    position: absolute;
    z-index: -1;
}
.ticket:before {
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border: 10px solid #999;
}
.ticket:after {
    top: -15px;
    left: -15px;
    right: -15px;
    bottom: -15px;
    border: 15px solid #999;
}

第二种代码实现的特效是：HTML5视频的嵌入。

Your browser does not support the video tag.

第三种代码实现的特效是： CSS3实现3D旋转立方体。

.cube {
    perspective: 100px;
    transform-style: preserve-3d;
}
.cube .front, .cube .back, .cube .right, .cube .left, .cube .top, .cube .bottom {
    position: absolute;
    width: 200px;
    height: 200px;
    background: white;
    opacity: 0.7;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.4);
}
.cube .front {
     transform: translateZ(100px);
 }
.cube .back {
     transform: rotateX(180deg) translateZ(100px);
 }
.cube .right {
     transform: rotateY(90deg) translateZ(100px);
 }
.cube .left {
     transform: rotateY(-90deg) translateZ(100px);
 }
.cube .top {
     transform: rotateX(90deg) translateZ(100px);
 }
.cube .bottom {
     transform: rotateX(-90deg) translateZ(100px);
 }
    

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