Rumah >hujung hadapan web >tutorial css >css3如何制作小时钟的简单实例分享
css3如何制作小时钟的简单实例分享
- 黄舟asal
- 2017-09-01 15:15:471419semak imbas
css3如何制作小时钟的简单实例分享
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding:0;
margin:0;
}
#hd{
width:700px;
height:700px;
background: url("zhong2.jpg") no-repeat;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
/*设置模糊背景*/
box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
/*box-shadow: 10px 10px 10px black;*/
position: relative;
margin:0 auto;
border-radius: 50%;
}
#hd img{
width:35px;
position: absolute;
left:335px;
top:113px;
animation: run 60s linear infinite;
/*设置旋转基准点*/
transform-origin: 50% 67%;
}
@keyframes run {
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div id="hd">
<img src="zhizhen3.jpg" alt="">
</div>
</body>
</html>
Atas ialah kandungan terperinci css3如何制作小时钟的简单实例分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：关于CSS鼠标悬浮DIV后如何显示DIV外的按钮的示例详解Artikel seterusnya：CSS鼠标悬浮DIV后显示DIV外的按钮问题详解