核辐射警报标识之css入门源码

核辐射警报标识之css入门源码今天分享下”核辐射警报标识之css入门源码“这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一起学习一下吧

  今天分享下”核辐射警报标识之css入门源码“这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。

<

主要运用了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 >
 
  <div ></div>
 
  <div ></div>
 
  <div ></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;
   
	<http://www.qlyl1688.com/products/ycxsyd.html>
 
  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 >
 
  <div ></div>
 
  <div ></div>
 
  <div ></div>
 
  <div ></div>
 
  <div ></div>
 
  <div ></div>
 
  </div>
 
  </body>
 
  </html>
    今天的文章就分享到这啦,内容转自divcss5平台,下篇文章再见!

今天的文章核辐射警报标识之css入门源码分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/61750.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注