zoukankan      html  css  js  c++  java
  • CSS实现核辐射警告标志

      今天做了下360的前端星计划测试题,碰到一个有趣的css题,实现如下图效果,记得上次也是在360面试的时候碰到一个有趣的css实现宝马logo,不得不说360的面试题还是很有创意的。

      我一直努力想用一个div实现这个效果,但是想了很久,也没找到一个较好的解决方法,暂且先用笨办法实现了,主要运用了CSS的几个属性transform-origin/rotate/skewY,还不懂的赶快去看看哈。

    三个div实现

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>核辐射警告标志</title>
    </head>
    <style type="text/css">
    html,body {
    width: 100%;
    height: 100%;
    }
    #warning {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 200px;
    height: 200px;
    border-radius: 100%;
    background-color: yellow;
    overflow: hidden;
    }
    .sector {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 50%;
    transform-origin: 0% 100%;
    }
    .sector:nth-child(1) {
    transform: rotate(30deg) skewY(-30deg);
    background: black;
    }
    .sector:nth-child(2) {
    transform: rotate(-90deg) skewY(-30deg);
    background: black;
    }
    .sector:nth-child(3) {
    transform: rotate(-210deg) skewY(-30deg);
    background: black;
    }
    </style>
    <body>
    <div id="warning">
    <div class="sector"></div>
    <div class="sector"></div>
    <div class="sector"></div>
    </div>
    </body>
    </html>

    六个div实现

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>核辐射警告标志</title>
    </head>
    <style type="text/css">
    html,body {
    width: 100%;
    height: 100%;
    }
    #warning {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 200px;
    height: 200px;
    border-radius: 100%;
    overflow: hidden;
    }
    .sector {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 50%;
    transform-origin: 0% 100%;
    }
    .sector:nth-child(1) {
    transform: rotate(30deg) skewY(-30deg);
    background: black;
    }
    .sector:nth-child(2) {
    transform: rotate(-30deg) skewY(-30deg);
    background: yellow;
    }
    .sector:nth-child(3) {
    transform: rotate(-90deg) skewY(-30deg);
    background: black;
    }
    .sector:nth-child(4) {
    transform: rotate(-150deg) skewY(-30deg);
    background: yellow;
    }
    .sector:nth-child(5) {
    transform: rotate(-210deg) skewY(-30deg);
    background: black;
    }
    .sector:nth-child(6) {
    transform: rotate(-270deg) skewY(-30deg);
    background: yellow;
    }
    </style>
    <body>
    <div id="warning">
    <div class="sector"></div>
    <div class="sector"></div>
    <div class="sector"></div>
    <div class="sector"></div>
    <div class="sector"></div>
    <div class="sector"></div>
    </div>
    </body>
    </html>

      其实这两个只能算一种方法,我期待的是只用一个div就可以实现,欢迎各位大开脑洞,一起挑战更多有趣的css!

  • 相关阅读:
    for循环练习-----ATM取款
    面向对象基础项目----图书管理系统(数组)
    Java基础学习(二)-- 二维数组、String、StringBuffer以及类和对象之详解
    Java基础学习(一) -- Java环境搭建、数据类型、分支循环等控制结构、简单一维数组详解
    js 解决由于&#65279(bom文件格式)产生的空白行
    自适应网站设计对百度友好的关键:添加applicable-device标签(转)
    浏览器内核控制标签--meta
    HTML5的元素与结构标签
    <img>标签的补充
    HTML <head> 头部中的各类标签
  • 原文地址:https://www.cnblogs.com/lewiscutey/p/9079455.html
Copyright © 2011-2022 走看看