设为首页收藏本站

PHPIN.NET

 找回密码
 立即注册
查看: 559|回复: 0

[HTML5/CSS3] HTML标签和纯CSS3画太极图{鼠标经过太极开始旋转}

[复制链接]

374

主题

381

帖子

2554

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2554
发表于 2014-11-26 09:05:37 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
用最少的HTML标签和纯CSS3画太极图,鼠标经过太极开始旋转。

先看效果截图:
太极.jpg


HTML代码:
  1. <!doctype html>
  2. <html lang="zh-cn">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>太极</title>
  6. <style class="cp-pen-styles">
  7. html,body,div,:before,:after{box-sizing:border-box;margin:0;}
  8. html,body{height:100%;}
  9. #taiji{position:relative;top:50%;left:50%;width:200px;height:200px;margin:-100px 0 0 -100px;background-image:linear-gradient(0deg,black 50%,white 50%);border-radius:50%;box-shadow:5px 5px 40px #666666;transition:all 6s ease-in-out;}
  10. #taiji:hover{transform:rotate(3600deg);}
  11. #taiji:before,#taiji:after{content:"";display:block;position:absolute;width:50%;height:50%;top:25%;border-radius:50%;border-width:35px;border-style:solid;}
  12. #taiji:before{left:0;border-color:black;background-color:white;}
  13. #taiji:after{right:0;border-color:white;background-color:black;}
  14. </style>
  15. </head>
  16. <body>
  17. <div id="taiji"></div>
  18. </body>
  19. </html>
复制代码
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|PHPIN.NET ( 冀ICP备00000001号 )|网站地图  

GMT+8, 2016-12-3 23:30

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表