16顶

利用CSS3实现雷达扫描效果图动画特效

稿源：互联网 2018-09-02 22:42:16 点击： 15597 撤稿纠错

利用CSS3实现雷达扫描效果图特效

以下讨论的是和CSS3 雷达扫描动画相关的利用CSS3实现雷达扫描效果图动画特效教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>round</title>
  <style type="text/css">
  .round {
    border: 1px solid rgba(255, 255, 255, 0.5);
    margin: 50px auto;
}
.w300 {
    border-radius: 298px;
    height: 298px;
    margin-top: 0;
    overflow: hidden;
    width: 298px;
}
.w200 {
    border-radius: 200px;
    height: 200px;
    width: 200px;
}
.w100 {
    border-radius: 100px;
    height: 100px;
    width: 100px;
}
.w1 {
    background-color: #fff;
    border-radius: 1px;
    height: 1px;
    position: relative;
    top: -4px;
    width: 1px;
}
.line {
    background: rgba(0, 0, 0, 0) -moz-linear-gradient(center top , rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5)) repeat scroll 0 0;
    border-left: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 0 0 150px;
    height: 150px;
    left: 0;
    position: absolute;
    top: 0;
    transform: rotate(0deg);
    transform-origin: 0 0 0;
    width: 150px;
}
.roundMove {
    animation: 3s linear 0s normal both infinite running round;
}

@keyframes round {
100% {
    transform: rotate(360deg);
}
}
@keyframes round {
100% {
    transform: rotate(360deg);
}
}
  </style>
</head>
<body style="background: rgb(0, 0, 0) none repeat scroll 0% 0%; margin: 0px;">
  <div class="round w300">
        <div class="round w200">
            <div class="round w100">
                <div class="round w1">
                    <div class="line roundMove"></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

关于利用CSS3实现雷达扫描效果图动画特效的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2018090295253.shtml方便下次再访问哦。

·上一篇： 通过按钮选择数字对应的网页文字变红色的特效
·下一篇： 简单实用的纯CSS实现的横向多级导航特效代码

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

利用CSS3实现雷达扫描效果图动画特效

文章分类LIST >>返回首页

最新游戏

最新新闻