css3冷门工作例子 |btn.css

/* 1. HTML5视频控制样式 */
video::-webkit-media-controls {
display: flex;
justify-content: space-between;
background-color: transparent;
color: white;
}
video::-webkit-media-controls-play-button {
background-color: transparent;
border: none;
}
video::-webkit-media-controls-timeline {
height: 5px;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 2.5px;
}
video::-webkit-media-controls-current-time-display {
color: white;
margin-right: 10px;
}
video::-webkit-media-controls-time-remaining-display {
color: white;
margin-left: 10px;
}

这段代码以webkit为基础，使用CSS3来控制HTML5视频的控制样式。它允许你自定义各种视频控件，是视频网站开发者的利器。

/* 2. 圆形图片 */
.circle-image {
border-radius: 50%;
overflow: hidden;
}
.circle-image img {
display: block;
width: 100%;
height: auto;
}

这段代码创建的CSS3圆形图片可以用于创建圆形头像或图标。只需要将图片放置在.circle-image的div内嵌的img标签中，就可以轻松实现圆形图片效果。

/* 3. 条纹背景 */
.stripe-background {
background-size: 200% 100%;
background-image: linear-gradient(-45deg, rgba(255,255,255,.2) 25%, transparent 25%, transparent 50%,
rgba(255,255,255,.2) 50%, rgba(255,255,255,.2) 75%, transparent 75%, transparent);
animation: animateStripe 1s linear infinite;
}
@keyframes animateStripe {
0% {
background-position: 0 0;
}
100% {
background-position: 200% 0;
}
}

这段代码创建了一个动画的条纹背景。它使用CSS3 linear-gradient属性实现条纹效果，并使用CSS3动画实现无限滚动动画效果。这种效果可以用于做网页背景。

/* 4. 图片悬浮时浮现 */
.hover-float {
position: relative;
}
.hover-float::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.hover-float:hover::before {
opacity: 1;
}

这段代码在图片悬浮时给图片添加浮现效果。它使用了CSS3的::before伪元素和opacity属性实现渐变效果，是一种常用的图片效果。