纯css实现悬浮球效果

效果如下：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.container{width: 100px;height: 100px;padding:0px;border-radius: 50%;border:2px solid deepskyblue;background: white;position: absolute;left:400px;top:100px;overflow: hidden;}.ball{width: 100px;height: 100px;position: relative;box-shadow: 5px 5px 10px deepskyblue;border-radius: 50%;background: linear-gradient(167deg,lightskyblue 57%,deepskyblue 88%);}@keyframes  gun{50%{transform:rotate(180deg);}100%{transform: rotate(360deg);}}.mask{width: 97px;height: 83px;position: absolute;border-radius: 28px;background: white;top: -45px;z-index: 1;animation: gun 10s linear infinite;}</style>
</head>
<body><div class="container"><div class="mask"></div><div class="ball"></div></div></body>
</html>

纯css实现悬浮球效果相关推荐

移动端元素跟随移动-防苹果悬浮球效果（转载）
非常感谢原作者的分享,毕竟自己折腾了快一天还是有很多问题,感觉主要就卡在了事件对象的获取上和兼容性的问题:第一段代码是我自己的,在页面没有滚动条的情况下没问题,有滚动条时就出现Bug了: //这个函数 ...
纯CSS制作的图形效果
纯CSS制作的图形效果很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容 ...
不可思议的纯 CSS 实现鼠标跟随效果
不可思议的纯 CSS 实现鼠标跟随效果原文:不可思议的纯 CSS 实现鼠标跟随效果直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS ...
css 实现标签切换,CSS_纯CSS实现Tab切换标签效果代码，本文实例讲述了纯CSS实现Tab切 - phpStudy...
纯CSS实现Tab切换标签效果代码本文实例讲述了纯CSS实现Tab切换标签效果代码.分享给大家供大家参考.具体如下: 这是一款纯CSS实现的Tab简洁版,很不错的效果,希望大家喜欢. 运行效果截图如 ...
HTML+CSS实现弹跳球效果
HTML+CSS实现弹跳球效果效果图如下: HTML部分源代码如下: <!DOCTYPE html> <html lang="en"><head&g ...
HTML制作手风琴效果,纯js+html和纯css+html制作手风琴效果，css手风琴
纯js+html和纯css+html制作手风琴效果,css手风琴本文分享了纯js+html制作手风琴和纯css+html制作手风琴两种效果,供大家参考,具体内容如下一.纯css+html的手风琴效 ...
用纯css模拟下雪的效果
下雪效果只是一类效果的名称,可以是红包雨等一些自由落体的运动效果,本文就是用纯css模拟下雪的效果,更多效果大家可以自行发挥. 1.前言由于公司产品的活动,需要模拟类似下雪的效果.浏览器实现动画无非 ...
微信小程序悬浮球效果
用的是微信文档里的组件movable-area和movable-view <movable-area class="movable-area"><movable- ...
HTML5纯css实现爱心动画效果DW、vscode来自程序员的浪漫表白
HTML5纯css实现爱心动画效果DW来自程序员的浪漫表白一.拉面版 css部分 *{/* 初始化页面元素内外边距*/margin:0;padding: 0;}body{/* 弹性布局元素垂直水平居 ...

纯css实现悬浮球效果

纯css实现悬浮球效果相关推荐

最新文章

热门文章