应用html的DIV+CSS制作牛顿摆

@[牛顿摆]

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>牛顿摆</title><style>*{margin: 0;padding: 0;}<!--平台大小，自定义-->.terrace{margin: 0 auto;position: relative;margin: 0 auto;width: 500px;height: 500px;}<!--单杆-->.pole{left: 15%;top: 5%;width: 70%;height: 5%;position:absolute;border-top-right-radius: 5% 50%;border-bottom-right-radius: 5% 50%;border-top-left-radius: 5% 50%;border-bottom-left-radius: 5% 50%;background-color: silver;box-shadow:0 0 1px rgba(0,0,0,.5);}<!--带线摆球-->.wire_ball{top: 9.5%;width: 8%;height: 45%;position:absolute;display: inline-block;text-align: center;}<!--线-->.wire{margin: 0 auto;width: 12.5%;height: 88%;border-top-right-radius: 50% 1%;border-bottom-right-radius: 50% 1%;border-top-left-radius: 50% 1%;border-bottom-left-radius: 50% 1%;background-color: #333;}<!--球-->.ball{width: 100%;height: 16%;line-height: 100%;border-radius: 80%;background-color: #333;background: url("image/qiu.png");background-size: 100% 100%;box-shadow:0 0 1px rgba(0,0,0,.5);}<!--左边摆动-->.left_rock{transform-origin: center top;animation: left_rock 2s  infinite;}<!--右边摆动-->.right_rock{transform-origin: center top;animation: right_rock 2s 1s infinite;}@keyframes left_rock{0%{transform: rotate(0);animation-timing-function: ease-out;}25%{transform: rotate(60deg);animation-timing-function: ease-in;}50%,100%{transform: rotate(0);}}@keyframes right_rock{0%{transform: rotate(0);animation-timing-function: ease-out;}25%{transform: rotate(-60deg);animation-timing-function: ease-in;}50%,100% {transform: rotate(0);}}<!--球定位-->.num_1{ left: 30%}.num_2{ left: 38%}.num_3{ left: 46%}.num_4{ left: 54%}.num_5{ left: 62%}<!--前支架-->.holder_before{position: absolute;width: 5%;height: 70%;top: 5%;border-top-right-radius: 50% 3%;border-bottom-right-radius: 50% 3%;border-top-left-radius: 50% 3%;border-bottom-left-radius: 50% 3%;background-color: silver;}.before_left{transform-origin:left;transform: rotate(15deg);left: 15%;}.before_right{transform-origin:right;transform: rotate(-15deg);right:15%;}<!--后支架-->.holder_queen{position: absolute;width: 5%;height: 60%;border-top-right-radius: 50% 3%;border-bottom-right-radius: 50% 3%;border-top-left-radius: 50% 3%;border-bottom-left-radius: 50% 3%;background-color: silver;/*silver*/}.queen_left{top:6%;transform-origin:left;transform: rotate(7deg);left: 21%;}.queen_right{top:6%;transform-origin:right;transform: rotate(-7deg);right:21%;}</style>
</head>
<body><div class="terrace"><div class="pole"></div><div class="holder_queen queen_left"></div><div class="holder_queen queen_right"></div><div class="wire_ball num_1 left_rock"><div class="wire"></div><div class="ball"></div></div><div class="wire_ball num_2"><div class="wire"></div><div class="ball"></div></div><div class="wire_ball num_3"><div class="wire"></div><div class="ball"></div></div><div class="wire_ball num_4"><div class="wire"></div><div class="ball"></div></div><div class="wire_ball num_5 right_rock"><div class="wire"></div><div class="ball"></div></div><div class="holder_before before_left"></div><div class="holder_before before_right"></div></div>
</body>
</html>

应用html的DIV+CSS制作牛顿摆相关推荐

html语言制作留言条,利用DIV+CSS制作右下角弹出留言板
/p> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 利用DIV+CSS制作右下角弹出留言板 a ...
html把div分成两栏,div+css制作上中下，中间两列的全屏自适应布局
制作自适应布局的网页对初学者是个难点,今天我们以最常见的上中下结构,中间又分为两列的全屏自适应布局为例,教大家如何制作自适应布局网页. 上中下结构,中间又分为两列的全屏自适应布局HTML代码: 上中下 ...
纯div+css制作的弹出菜单
纯div+css制作的弹出菜单 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...
div做表格 html5,div+css制作表格
本章给大家介绍如何用div+css制作表格,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. html: 花名册: 序号姓名年龄 footer footer footer 1 Jo ...
HTML+CSS初学者练习项目4：利用DIV+CSS制作《互联世纪网》
适合初学者练习的HTML项目:利用DIV+CSS制作制作一个<互联世纪网>网页. 需要掌握内容: HTML+CSS第八课:使用CSS布局网页--网页中块级元素与行内元素.盒子模型的理解 H ...
html如何做滑动门效果,div+css制作简单滑动门效果
现在流行的网站设计中,水平导航菜单占据了大壁江山.的确,无论是门户网站还是企事业单位网站,都大量的采用水平的导航菜单设计.而水平导航菜单中,又有绝大多数网站采用"滑动门"设计. 首 ...
div css 制作表格
<div class="table"> <h2 class="table-caption">花名册:</h2> <di ...
div+css 制作表格
<div class="table"> <h2 class="table-caption">花名册:</h2> <di ...
div+css制作哆啦A梦
纯CSS代码加上制作动画版哆啦A梦(机器猫) 哆啦A梦(机器猫)我们大家一定都很熟悉,今天给大家演示怎么用纯CSS.代码,来做一个动画版的哆啦A梦. 效果图: 下面代码同学可以查看一下,每个线条及椭 ...
用DIV+CSS制作四川成都美食网页介绍(网页设计期末课程设计)
家乡旅游景点网页作业制作网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...

应用html的DIV+CSS制作牛顿摆

应用html的DIV+CSS制作牛顿摆相关推荐

最新文章

热门文章