css的时间效果图 |select safari css

.time{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #42b983;
color: #fff;
text-align: center;
line-height: 100px;
font-size: 24px;
position: relative;
overflow: hidden;
}
.time:before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
border: 2px solid #fff;
z-index: 10;
transform: scale(0);
transition: transform 0.5s cubic-bezier(0.1,0.9,0.2,1);
}
.time:hover:before{
transform: scale(1.5);
}

上面的代码中，大家首先定义了一个class为time的元素，它的样式包含了一个圆形的背景、字体颜色、对齐方式等等。接着大家在它的:before伪元素里设置了一个白色的圆形边框，并给它定义了一个初始状态的缩放transform属性。这样，当鼠标悬停在.time元素上时，其:before伪元素就变成了一个放大了的白色圆形，形成了一种类似时钟的效果。

这里大家使用了transition属性来定义了一个0.5秒的缩放动画。同时，大家使用了cubic-bezier函数来控制动画的加速和减速过程，使得动画更加平滑自然。

通过CSS3的动画特性，大家可以轻松创建出许多炫酷的效果，只要您稍稍调整一下属性值，就可以实现自己想要的效果。当然，复杂的动画效果需要更多的代码和技巧，有些效果还需要借助JavaScript来实现。但是只要掌握了基础的CSS3动画技能，就可以轻松地制作出一些惊艳的效果。