Partage d'un exemple simple de la façon de créer une petite horloge avec 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>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!