js模仿win10日期悬浮边缘过渡聚焦效果代码
代码语言:html
所属分类:悬停
代码描述:js模仿win10日期悬浮边缘过渡聚焦效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> < <meta charset="utf-8" > <style> .mainDiv{ width: 58px; height: 58px; border: 2px solid rgba(73, 73, 73, 0.1); background-color: rgb(58, 58, 58); margin: 2px; float: left; text-align: center; color: white; line-height: 60px; z-index: 2; } .mainDiv:hover{ border: 2px solid white; cursor: pointer; } #floatDiv{ position: absolute; border-radius: 50%; width: 200px; height: 200px; position: absolute; background-color: rgba(255, 255, 255, 0.45); top: 0px; left: 0px; z-index: 0; box-shadow: 0px 0px 30px white; } </style> </head> <body> <div id="main" style="width: 660px; height: 590px; background-color: rgb(58, 58, 58); padding: 10px;" onmouseover="floatSharw(event)" > <div id="floatDiv.........完整代码请登录后点击上方下载按钮下载查看
网友评论0