太极图HTML+CSS（可旋转）代码记录
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>太极旋转图</title>
<style type="text/css">
body{
margin: 0px;
padding: 0px;
}
.wrap{
width: 200px;
height: 100px;
margin: 50px auto;
/*border: 2px solid red;*//*边框属性:粗细 样式 颜色*/
border-width: 1px 1px 100px 1px;
border-style: solid;
border-radius: 50%;
position: relative;
/*通过属性去调用之前定义好的动画*/
animation: rote 1s linear infinite;
/*rote 就是这个动画的名称*/
/*2s 表示做一次这个动画需要2s时间 决定旋转的快慢*/
/*linear 表示匀速的旋转*/
/*infinite 表示永久旋转*/
}
.wrap:before,
.wrap:after{
content: '';/*激活伪元素的必要因素*/
position: absolute;
top: 50%;
width: 20px;
height: 20px;
border-radius: 50%;
}
.wrap:before{
background-color: #fff;
border: 40px solid #000;
}
.wrap:after{
/*当设置绝对定位时，如果没有参考物（相对定位），
* 那么浏览器就是参考物，即.right这个div相对于浏览器的变化*/
/*相对定位其实就是相对参考物:父相子绝*/
right: 0px;
background-color: #000;
border: 40px solid #fff;
}
/*定义CSS动画*/
@keyframes rote{
from{
transform: rotate(0deg);/*旋转*/
}
to{
transform: rotate(360deg);/*旋转*/
}
}
</style>
</head>
<body>
<div class="wrap"></div>
</body>
</html>
效果如下：
太极图HTML+CSS（可旋转）代码记录的更多相关文章
- 根据判断PC浏览器类型和手机屏幕像素自动调用不同CSS的代码
1.媒体查询方法在 css 里面这样写 -------------------- @media screen and (min-width: 320px) and (max-width: 480px) ...
- css初始化代码
最近老有新项目开发,一直在找存留的CSS初始化代码,索性放到这里备份下, @charset "utf-8"; /* -------------------------------- ...
- 网站哀悼变灰代码集合 兼容所有浏览器的CSS变暗代码
下面这些CSS代码可以把网站的网页变为黑白,只需将代码加到CSS文件或网页最顶端就可以实现素装.建议全国站长动起来.为遇难的同胞哀悼. 如何将网站变成灰色调呢,网站变灰色方法是什么?有哪些?为了方便大 ...
- CSS透明代码
透明往往能产生不错的网页视觉效果,先奉上兼容主流浏览器的CSS透明代码: .transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5 ...
- 各大门户网站的css初始化代码
腾讯QQ官网 css样式初始 body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select ...
- CSS颜色代码 颜色值 颜色名字大全(转载)
CSS颜色代码 颜色值 颜色名字大全 转载处http://flyjj.com/css-colour-code.html 颜色值 CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) ...
- CSS颜色代码大全
CSS颜色代码大全 转载:http://blog.163.com/wujinhongisme@126/blog/static/3613698020095115919389/ RGB ( Red,Gre ...
- 兼容主流浏览器的CSS透明代码
透明往往能产生不错的网页视觉效果下面是兼容主流浏览器的CSS透明代码.transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; ...
- css初始化代码方案
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-06-24) 为了消除各浏览器对css默认的设置,保持网页在各浏览器中的外观保持一致,初始化css就显得非常必要了!很多时候 ...
- Zend Studio 上 安装使用Aptana插件(html,css,js代码提示功能) .
最近装了zend studio 9.0 用了段时间发现写html,css,js代码没提示,要开dreamwaver(对js代码提示也不好).就网上搜索了下,发现了Aptana插件,装上用了下,感觉不错 ...
随机推荐
- Python 微信公众号文章爬取
一.思路 我们通过网页版的微信公众平台的图文消息中的超链接获取到我们需要的接口 从接口中我们可以得到对应的微信公众号和对应的所有微信公众号文章. 二.接口分析 获取微信公众号的接口: https:// ...
- 简丽Framework-开篇
简丽Framework-开篇 简丽Framework 是一个开源java Web开发框架. 开源的框架.库.组件等比比皆是,每个开源产品都有它的定位和价值. 简丽Framework的定位是 ...
- 读取xlsx文件的内容输入到xls文件中
package com.cn.peitest.excel; import java.io.File; import java.io.FileInputStream; import java.io.Fi ...
- [Machine Learning] 逻辑回归 (Logistic Regression) -分类问题-逻辑回归-正则化
在之前的问题讨论中,研究的都是连续值,即y的输出是一个连续的值.但是在分类问题中,要预测的值是离散的值,就是预测的结果是否属于某一个类.例如:判断一封电子邮件是否是垃圾邮件:判断一次金融交易是否是欺诈 ...
- JavaSwing实现的文本比较软件
先看效果:截图1 截图2: 实现思路: 1.界面UI设计 2.功能点 : a 打开文件进行比较 b 粘贴内容进去比较 c 提示帮助 d 窗口可以任意拖动 3.文本比较算法 java类 : ...
- 对象存储Backblaze B2作为ShareX图床的Windows及安卓端配置
标题: 对象存储Backblaze B2作为ShareX图床的Windows及安卓端配置 作者: 梦幻之心星 sky-seeker@qq.com 标签: [对象存储,图床,Backblaze,Shar ...
- 这一次，彻底理解XSS攻击
希望读完本文大家彻底理解XSS攻击,如果读完本文还不清楚,我请你吃饭慢慢告诉你~ 话不多说,我们进入正题. 一.简述 跨站脚本(Cross-site scripting,简称为:CSS, 但这会与层叠 ...
- jsp文件导包
可以在一个页面中用上多个<% @ page %>指令,但是其中的属性只能用一次,不过也有个例外,那就是import属性.因为import属性和Java中的import语句差不多(参照Jav ...
- 茅坑杀手与Alias Method离散采样
说起Alias,你可能第一个联想到的是Linux中的Alias命令,就像中世纪那些躲在茅坑下面(是真的,起码日本有粪坑忍者,没有马桶的年代就是社会的噩梦)进行刺杀的杀手一样,让人防不胜防,对于那些被这 ...
- 漫画 | 小公司卧薪尝胆三年，意外拿到美团offer
今天给大家分享一篇,非科班出生的野生前端从业者的励志成长故事,故事的主人公王大拿(化名),在小公司打杂三年后,意外拿到了美团的offer,成功进阶大厂,跳槽到了美团的核心外卖事业部. 事故主人公:王大 ...