正文

环形文字+css3制作图形+animation无限正反旋转的一个小demo

codebook  codebook  2022-12-20  376

关键词：

少啰嗦，先看效果图：

技术分享图片

（注意文字和太极图均可旋转，太极图使用css写成的！）

css：

/*太极图css--*/

.Taiji margin: 100px;
width: 192px;
height: 96px;
background-color: #eee;
border-color: #333;
border-style: solid;
border-width: 4px 4px 100px 4px;
border-radius: 100%;
position: relative;
-webkit-animation: circleReverse 32s infinite linear; /*无限旋转*/

.Taiji:before
content: "";
width: 24px;
height: 24px;
border: 36px solid #333;
background-color: #eee;
border-radius: 100%;
position: absolute;
top: 50%;
left: 0;

.Taiji:after
content: "";
width: 24px;
height: 24px;
border: 36px solid #eee;
background-color: #333;
border-radius: 100%;
position: absolute;
top: 50%;
right: 0;

/*太极图 css--end*/

/*环形文字css--*/
.circular
width: 232px;
height: 232px;
position: absolute;
left: -20px;
top: -20px;
font-size: 11px;
font-family: "microsoft yahei";
color: #333;
-webkit-animation: circle 16s infinite linear; /*无限旋转*/

.circular path fill: none;
.circular svg display: block; overflow: visible;

/*环形文字css--end*/

/*旋转动画css--animation*/
@-webkit-keyframes circle /*其父元素逆向旋转所以首先要抵消掉旋转的360度*/
0% transform:rotate(0deg);
100% transform:rotate(-720deg);

@-webkit-keyframes circleReverse
0% transform:rotate(0deg);
100% transform:rotate(360deg);

/*css--end*/

html：

<div class="Taiji">
　　<div class="circular">以无法为有法    以无限为有限    夫唯不争    天下莫能与之争</div>
</div>

javascript：

/*封装函数，文档中如果需要环形文字只需写带有circular的class名的容器就行了（用几个就写几个）。举个栗子：<div class="circular">以无法为有法</div>*/

function $$(selector, context)
context = context || document;
var elements = context.querySelectorAll(selector);
return Array.prototype.slice.call(elements);

$$(‘.circular‘).forEach(function(el)
var NS = "http://www.w3.org/2000/svg";

var svg = document.createElementNS(NS, "svg");
svg.setAttribute("viewBox", "0 0 100 100");

var circle = document.createElementNS(NS, "path");
circle.setAttribute("d", "M0,50 a50,50 0 1,1 0,1z");
circle.setAttribute("id", "circle");

var text = document.createElementNS(NS, "text");
var textPath = document.createElementNS(NS, "textPath");
textPath.setAttributeNS("http://www.w3.org/1999/xlink", ‘xlink:href‘, ‘#circle‘);
textPath.textContent = el.textContent;
text.appendChild(textPath);

svg.appendChild(circle);
svg.appendChild(text);

el.textContent = ‘‘;
el.appendChild(svg);
);

参考：

http://www.jqhtml.com/8045.html

https://www.w3cplus.com/css3/css-secrets/circular-text.html

css3animation实现环形路径平移动画

注意 @keyframesto/from的学习<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title></head><body><style>/*顺时针自转*/@key 查看详情

css3实现动画效果，怎样使他无限循环动下去？

使用css3动画效果在页面只能动一次，怎样无限循环下去一、实现CSS3无限循环动画代码示例。代码如下：CSS:@-webkit-keyframesgogogo0%-webkit-transform:rotate(0deg);border:5pxsolidred;50%-webkit-transform:rotate(180deg);background:black;border:5pxsolidyellow;100%-web... 查看详情

利用css3-animation来制作逐帧动画

参考：https://www.qianduan.net/css3-animation/ 利用css3-animation来制作逐帧动画常见用法：animation:mymove4sease-out1sbackwards;@-webkit-keyframesmymove/*SafariandChrome*/{from{left:0px;}to{left:200px;}}解释：m 查看详情

css3动画使用

...向前播放，normal动画每次都是循环向前播放练习如下：该图形的变化从左上角到右上角来回跳动的一个过程linear 规定以相同速度开始至结束的过渡效果ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（默认值）ea... 查看详情

css3文字颜色动态渐变

浏览Animate.css官网的时候发现Animate.css这几个字母的颜色会慢慢变化，个人觉得还是很有意思，本以为是利用animate改变color,结果F12后发现好多奇怪的css属性。先来看看我的实现方法简易实现方法h2{height:60px;color:#f35626;-webkit-animation... 查看详情

点击播放css3动画

...数，与transition不同，animation可以设置循环次数，如果想无限循环可以设置infinite。希望能帮到你！追答谢谢有问题继续交流本回答被提问者和网友采纳参考技术B用animation-iteration-count吧动画播放的次数，与transition不同，animation... 查看详情

css3实现匀速无限滚动效果

<divclass="ddiv"style="">　　//这里的图片是一个圆圈　　<imgclass=‘dimg‘src="video_c.png"></div>.dimg{　　//infinite无限循环linear匀速运动　　animation:2sanimation1infinitelinear;}@keyframesanimation1{ 　　0%{ 查看详情

动画---css3animation

...称{from{开始位置}0%to{结束}100%}animation-iteration-count:infinite;无限查看详情

css3图片文字实现动画效果

...<div><imgsrc="images/xxx.jpg"></div><div>文字XXXXXXXXXXXXXXXXXXXXXXXX</div></div>左边图片，右边文字。实现页面加载完成之后，左边的图片以动画的方式先显示出来，等到图片显示完成后，文字在显示出来，这... 查看详情

css3的动画特效--动画序列（animation）

...下animation动画添加各种参数（1）infinite参数，表示动画将无限循环。在速度曲线和播放次数之间还可以插入一个时间参数，用以设置动画延迟的时间。如希望使图标在1秒钟后再开始旋转，并旋转两次，代码如下.close:hover::before{-w... 查看详情

利用css3中animation和@key-frames制作以下效果,实现红色div在距离顶部？

参考技术A1.注意：这个CSS的animation和@keyframes一定要在元素设置了有效定位：fixed；absolute；relative时才能起作用！！！查看详情

css3-动画

一、制作关键帧：1）@keyframes动画名称{from{开始}to{结束}}2）@keyframes动画名称{0%{}中间可以添加任意关键帧100%{} }二、调用关键帧animation:①animation-name(动画名称）②animation-duration(动画的时间)③animation-delay(动画的延迟时间)④ani... 查看详情

css3中动画属性transformtransition和animation

...过渡效果等等，这些功能再一次证明了CSS3功能的强大和无限潜能。　　CSS3实现元素变形的基础来源于新增的transform属性，该属性查看详情

如何使用 CSS3 动画制作类似原子的动画？

】如何使用CSS3动画制作类似原子的动画？【英文标题】：HowtomakeanatomlikeanimationusingCSS3animations?【发布时间】：2012-09-2706:19:15【问题描述】：我从3-4天开始就一直在尝试这个，但我不知道如何制作这个动画，甚至不确定是否可以... 查看详情

使用css3制作各种形状

...以减少图片的使用。以前只能在Photoshop等图像编辑软件中制作的复杂图形现在使用CSS3就可以完成了。通过使用新的CSS属性，像transform和border-radius，我们可以创建非常漂亮和复杂的图形效果。圆形圆形在设置CSS时要设置宽度和高... 查看详情

css3动画transformtransition和animation的区别

css3属性中关于制作动画的三个属性：Transform,Transition,Animation。1、transform：描述了元素的静态样式，本身不会呈现动画效果，可以对元素进行旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。div{　　transform:scale... 查看详情

css3新属性的总结

...，先列一个简单的提纲，重要的还是圆角、阴影、渐变、文字缩略，最最重要的是过度transition，变换transform和animation圆角阴影渐变圆形渐变线性渐变跳变重复渐变蒙版倒影滤镜多背景文字方向文字缩略过渡transition 变换transform... 查看详情

用bootstrap和css3制作按钮式下拉菜单

利用bootstrap框架的字体图标和下拉菜单效果，以及css3的动画效果，可以做出比较优雅的按钮式下拉菜单样式 <style>.myBtnStyle.dropdown-menuspan{margin:5px;}.myBtnStyle.dropdown-menu{animation:0.5slinearfadeIn;//css3新特性animation}@keyframesf 查看详情