css如何设置图转30度,使用CSS实现左右30度的摆钟

利用只是点：animation、transform、transform-origin，摆动位置统一，就会实现同角度摆动。

代码实现：

#box{

width:300px;

height:300px;

border: 1px solid rgba(0, 140, 255, 0.623);

position: relative;

}

.center-circle{

width:20px;

height:20px;

background-color:rgb(216, 166, 28);

border-radius: 10px;

position: absolute;

top:0;

left:0;

bottom: 0;

right: 0;

margin: auto;

}

.plate-circle{

width:48px;

height:48px;

border-radius: 50%;

background-color: rgb(216, 166, 28);

position: absolute;

top:276px;

left:126px;

animation: pendulum-animation 4s linear infinite;

transform-origin改变被转换元素的位置，默认值：50% 50% 0

将摆盘的转换位置定位与center-circle的中心的重合

transform-origin: 50% -127px;

}

.connecting-line{

width:4px;

height:150px;

background-color: rgb(216, 166, 28);

position:absolute;

top: 50%;

left: 148px;

animation: pendulum-animation 4s linear infinite;

/*将摆盘的转换位置定位与center-circle的中心的重合*/

transform-origin: 50% 0;

}

@keyframes pendulum-animation{

0% {transform: rotate(0deg);}

25% {transform:rotate(-30deg)}

50% {transform: rotate(0deg);}

75% {transform: rotate(30deg);}

100% {transform: rotate(0deg);}

}

css如何设置图转30度,使用CSS实现左右30度的摆钟相关推荐

css 雪碧图计算方式,前端必备 CSS Sprites雪碧图生成工具
[摘要] CSS Sprites又称css精灵或者谐音css雪碧,是一种网页图片应用处理方式,今天为大家分享一个一键生成css雪碧图片的工具,复杂的事情简单化,提高开发效率. CSS Sprites又 ...
html css实现自动滑动的轮播图,CSS 轮播图的实现（纯CSS，连续滑动无倒滑效果）...
简单demo:使用HTML+CSS 实现轮播图(三张图为例,分别为:红.绿.蓝)的效果. 实现效果: 不能发视频,截图来代替吧示意图1.png 示意图2.png 示意图3.png 实现思路使用 d ...
css 怎么设置盒子水平居中,用一段css实现盒子垂直水平居中方法(8种)-案例
效果图 - 在线案例 css3中的属性:transform: translate(x,y) .box { width: 100px; height: 100px; background: orange ...
html css图标怎么跟文字并排,CSS高级技巧：精灵图、字体图标、CSS三角做法、CSS用户界面样式、vertical-align属性应用、溢出文字省略号、常见布局技巧...
CSS高级技巧目录 1.精灵图使用原因:一个网页往往会有很多小的背景图片作为装饰,为了有效减少接收和发送请求的次数,提供页面加载速度,所以出现了精灵技术.核心原理就是将小图片整合到一张图里,这样浏览 ...
css怎么设置图片的对比度？
css怎么设置图片的对比度?下面本篇文章给大家介绍一下使用css设置图片对比度的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css怎么设置图片的对比度? 在CSS中,可以使 ...
android设置webview光标颜色,CSS自定义设置元素闪烁光标颜色
这次给大家带来CSS自定义设置元素闪烁光标颜色,CSS自定义设置元素闪烁光标颜色的注意事项有哪些,下面就是实战案例,一起来看一下. 前言因为业务需求, 要求我们的input框内的文本与悬浮的光标颜色不 ...
html中精灵图片路径,css中精灵图是什么意思？
css中精灵图是什么意思?有什么用?下面本篇文章就来给大家介绍一下CSS 精灵图.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css中精灵图是什么意思? css精灵图(sprit ...
html设置自动滚动条,css滚动条设置
用css怎么设置div滚动条的样式,可改变大小的 overflow: auto; 在需要时内容会自动添加滚动条 overflow: scroll; 总是显示滚动条 overflow-x: hidden ...
css怎么设置背景图片自适应大小
在css中,可以利用"background-size"属性设置背景图片自适应大小,该属性用于设置背景图片的大小,只需要给背景图片元素添加"background-size: ...

css如何设置图转30度,使用CSS实现左右30度的摆钟

css如何设置图转30度,使用CSS实现左右30度的摆钟相关推荐

最新文章

热门文章