纯css3实现的太极八卦并且会转动的css3特效

最新推荐文章于 2024-04-15 01:03:43 发布
最新推荐文章于 2024-04-15 01:03:43 发布
阅读量1k 收藏 2
点赞数
分类专栏： div+css html5+css3 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>纯CSS3实现太极图形样式代码 - 代码笔记</title>
<style>
	.square{
		width:400px;height:400px;position:relative; 
		
		transform:rotate(45deg); 
		-webkit-transform:rotate(45deg); 
		-moz-transform:rotate(45deg); 
		
		animation:rotate infinite linear 5s;margin:10% auto;
		-webkit-animation:rotate infinite linear 5s;margin:10% auto;
		-moz-animation:rotate infinite linear 5s;margin:10% auto;
	}
	.rect{width:400px;height:200px;position:relative;border:1px #d2d2d2 solid;border-bottom:none;}
	.inner_circle{width:200px;height:200px;border-radius:200px;position:absolute;z-index:1;}
	.dot{width:50px;height:50px;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;border-radius:50%;}
	.rect_one{border-radius:200px 200px 0 0;background:white;}
	.rect_one_one{bottom:-100px;left:0;background:black;}
	.rect_one_two{background:white;}
	.rect_two{border-radius:0 0 200px 200px;background:black;}
	.rect_two_one{bottom:100px;right:0;background:white;}
	.rect_two_two{background:black;}
	@keyframes rotate{
		from{
		transform:rotate(0deg);
		-webkit-transform:rotate(0deg);
		}to{
		transform:rotate(360deg);
		-webkit-transform:rotate(360deg);
	}}
</style>
</head>

<body>

<div class="square">
	<div class="rect rect_one">
		<div class="inner_circle rect_one_one">
			<div class="dot rect_one_two"></div>
		</div>
	</div>
	<div class="rect rect_two">
		<div class="inner_circle rect_two_one">
			<div class="dot rect_two_two"></div>
		</div>
	</div>
</div>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>来源:<a href="http://www.daimabiji.com/" target="_blank">代码笔记</a></p>
</div>
</body>
</html>

夏末_阳光依然耀眼
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
生成一个太极八卦阵的动画HTML代码
weixin_35756892的博客
01-03 468
太极八卦阵是中国武术中的一种招式，可以用HTML代码来创建动画。下面是一个简单的示例，使用HTML、CSS和JavaScript实现： <html> <head> <style> /* 定义动画的样式 */ @keyframes spin { from { transform: rotate(0deg); } ...
纯css网页底部固定漂浮居中效果
12-14
兼容ie系列ff+google的纯css网页底部固定漂浮居中效果免费下载
10个超漂亮的CSS 3D特效，面试了几家公司都被拒绝了
最新发布
m0_60452293的博客
04-15 300
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
纯 CSS 实现十个还不错的 Loading 效果
祈澈菇凉
06-06 296
作者：Jimmyhttps://juejin.cn/post/7080542771387301896loading_banner.png在推特上面看到T. Afif[1]介绍的十个Loading效果。如上图。Yeah，很赞哦，挺实用的，遂记录下来。为保证运行正常，咱先规定下：*{ box-sizing:border-box; } 复制代码1. 平滑加载1....
css实现太阳升起效果
richest_qi的博客
08-09 632
使用css动画实现太阳升起效果。
css3 filter图片美化的10种特效（只支持webkit内核）
夏末、阳光依然耀眼...˜˜羽悠﹏ˇ⊙ˇ
12-16 1310
滤镜 .photo{ width:500px; height:658ox; margin:0 auto; border:solid 1px #000; padding:2px;} .filter1{ -webkit-filter:grayscale(1);} /*去色*/ .filter2{ -webkit-filter:sepia(1);} /*黄昏色*/
纯CSS3实现苹果iphone6手机模型特效特效代码
03-20
总的来说，纯CSS3实现苹果iPhone6手机模型特效是一项展示前端开发者技巧的挑战，它要求对CSS3的各个特性有深入理解和灵活运用。通过实践这个项目，开发者不仅可以提升CSS技能，还能更好地理解如何用CSS3创造出富有...
CSS3特效-CSS3实现烟花特效
12-19
在本文中，我们将深入探讨如何使用CSS3来创建引人入胜的烟花特效。CSS3是层叠样式表（Cascading ...然而，需要注意的是，虽然CSS3特效能提升用户体验，但过度使用可能会影响页面性能，因此在设计时应兼顾美观与性能。
纯CSS3实现发光动画按钮特效.rar_纯CSS3实现发光动画按钮特效
09-24
一款基于纯CSS3的发光按钮，按钮发光的颜色是随机的，这样一排...之前我们也介绍过不少样式很独特的CSS3按钮，比如纯CSS3 3D开关按钮、纯CSS3实现动感弹性按钮等，都非常不错，也有HTML5动画按钮，大家可以自己看看。
纯CSS3实现纸飞机动画特效特效代码
03-20
【纯CSS3实现纸飞机动画特效特效代码】是一个利用CSS3的强大功能来创建互动式动画效果的技术分享。在现代网页设计中，动画效果能够提升用户体验，增加网站的吸引力。这款CSS3纸飞机动画特效尤其适用于登录页面、信息...
纯css3实现的风车效果特效代码
03-20
一共用了两种方法方法CSS3风车效果，一种是css3+图片实现的风车，另一种是纯css3实现的风车效果，把鼠标放在圆点上，风车会快速旋转，图片方法实现风车时，制作了一张风车图片供调用，相比之下，无图片版的CSS3风车...
使用一个div做出旋转的八卦图
weixin_33709364的博客
04-28 155
2019独角兽企业重金招聘Python工程师标准>>> ...
纯CSS实现正方体旋转效果
【前端学习】
04-03 3447
效果如图：鼠标hover到物体上时出现特效！ 源码如下 <!doctype html> <html> <head> <meta charset="utf-8"> <title>超绚丽CSS3多色彩发光立方体旋转动画</title> <style> *{ margin:0 auto; ...
CSS
java火推阳光的博客
12-05 121
css引入样式 CSS选择器 链接的处理 分组和嵌套 定位 盒子模型 浮动 float 伪类 伪元素
阳光的光圈通过旋转 ，动画实现
一站到底s的博客
04-23 370
缩放动画（单一动画） <set xmlns:android="http://schemas.android.com/apk/res/android"> <scale android:duration="5000" android:fillBefore="true" android:fromXScale="1.1" ...
CSS3渐变 圆角矩形 太阳效果
weixin_43832192的博客
03-16 482
CSS3渐变 圆角矩形 太阳效果<style> .div1 { width: 150px; height: 100px; background-image: radial-gradient(red,yellow,blue); } .div2 { width: 100px; height: 100px; border-radius: 50%; background-image: radi...
旋转的八卦图，纯CSS实现
Altaba的博客
01-16 4164
欢迎来到Altaba的博客不废话，直接上源码，旋转八卦图的核心在于CSS代码的编写，所有首先呈上CSS代码： .yang-yin2{ width: 198px; height: 396px; border: solid black; border-width: 2px 200px 2px 2px;
[css] 用css画一个太阳
歌谣的博客
02-22 1357
[css] 用css画一个太阳 // css .sun { margin: 200px; width: 200px; height: 200px; border-radius: 50%; background: red; box-shadow: 0 0 21px #fe9e9e; position: relative; } // ::before & ::after 辅助 .sun::b
CSS3画八卦太极图（绕一个圆旋转）
lyx_lyq的博客
07-22 2344
html代码：     css代码： @-webkit-keyframes action2{                                        /*动画*/             100%{transform:rotate(360deg);}         }         .div2{             width: 200
纯CSS3实现边框跑马灯特效
05-17
可以使用CSS3的动画属性和伪元素来实现边框跑马灯特效。 首先，需要给元素设置一个固定的宽度和高度，并设置边框样式。然后，使用伪元素::before和::after来创建两个半透明的遮罩层，覆盖在元素的边框上方。 接下来，使用CSS3的动画属性来使伪元素移动。将伪元素的宽度设置为0，然后使用@keyframes关键字定义动画，让伪元素从左侧或右侧移动到另一侧，并将宽度逐渐增加到与元素相同的宽度。 最后，使用animation属性将动画应用到伪元素上，并设置动画的持续时间、延迟时间和循环次数。 下面是一个示例代码： HTML代码： ```html <div class="marquee"> <p>这是一个边框跑马灯特效</p> </div> ``` CSS代码： ```css .marquee { width: 500px; height: 100px; padding: 20px; border: 2px solid #000; position: relative; } .marquee::before, .marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 0; background-color: rgba(255, 255, 255, 0.5); } .marquee::before { left: 0; animation: marquee-left 5s ease-in-out infinite; } .marquee::after { right: 0; animation: marquee-right 5s ease-in-out infinite; } @keyframes marquee-left { 0% { width: 0; transform: translateX(0); } 50% { width: 100%; transform: translateX(0); } 100% { width: 0; transform: translateX(100%); } } @keyframes marquee-right { 0% { width: 0; transform: translateX(0); } 50% { width: 100%; transform: translateX(0); } 100% { width: 0; transform: translateX(-100%); } } ``` 在这个示例中，我们创建了一个宽度为500px、高度为100px的div元素，并设置了2px的黑色边框。然后，在div元素上使用了伪元素::before和::after，并设置它们的宽度为0，背景色为半透明白色。 接着，使用@keyframes关键字分别定义了两个动画marquee-left和marquee-right，让伪元素从左侧或右侧移动到另一侧，并将宽度逐渐增加到与元素相同的宽度。最后，将动画应用到伪元素上，并设置了动画的持续时间、延迟时间和循环次数。 这样，一个简单的边框跑马灯特效就完成了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值