div+css实现原子核环形旋转动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现原子核环形旋转动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <style> body{ background-color:rgb(255, 255, 255); margin:0px; padding:0px; display:flex; flex-direction:row; align-items:center; box-sizing: border-box; filter:contrast(1.4); } .csscon{ width:100%; height:100vh; background-color:rgb(0, 0, 0); filter:invert(0.1); } .ob1{ box-sizing: border-box; width:200px; height:200px; position:absolute; top:calc(50% - 100px); left:calc(50% - 100px); background: rgb(255,140,140); background: radial-gradient(circle, rgba(255,140,140,0) 50%, rgb(255, 70, 70) 100%); border:20px solid rgb(255, 146, 146); border-style:double; border-radius:50%; transform:rotateX(60deg) rotateY(0deg); animation-name:revo1; animation-duration:18s; animation-timing-function:linear; animation-iteration-count:infinite; animation-direction:normal; box-shadow: 0px 0px 90px -20px rgb(255, 131, 131); } .planet1{ width:50px; height:50px; background: linear-gradient(to right, #ff7171, #ffffff); border-radius:20%; position:relative; top:calc(50% - 20px); left:calc(50% - 20px); animation-name:path; animation-iteration-count: infinite; animation-timing-function:linear; animation-direction:reverse; animation-delay:0s; animation-duration:2s; transform: translateX(170px); clip-path: polygon(0 0, 0% 100%, 100% 41%); } .ob2{ box-sizing: border-box; width:200px; height:200px; position:absolute; top:calc(50% - 100px); left:calc(50% - 100px); background: rgb(255,140,140); background: radial-gradient(circle, rgba(255,140,140,0) 50%, rgb(0, 17, 210) 100%); border:10px solid rgb(161, 211, 255); border-style:double; border-radius:50%; transform:rotateX(60deg) rotateY(120deg); animation-name:revo2; animation-duration:18s; animation-timing-function:linear; animation-iteration-count:infinite; animation-direction:normal; box-shadow: 0px 0px 90px -20px rgb(116, 173, 255); } .planet2{ width:50px; height:50px; background-image: linear-gradient( to right, #6cffff , #3b40f6); border-radius:20%; position:relative; top:calc(50% - 20px); left:calc(50% - 20px); animation-name:path; animation-iterat.........完整代码请登录后点击上方下载按钮下载查看
网友评论0