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

最新推荐文章于 2024-05-17 14:32:46 发布

VIP文章若雨渊

最新推荐文章于 2024-05-17 14:32:46 发布

阅读量632

点赞数 1

分类专栏： HTML 文章标签： HTML 前端 CSS应用

本文链接：https://blog.csdn.net/qq_156874635/article/details/95376105

版权

@[牛顿摆]

<!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%;

最低0.47元/天解锁文章

若雨渊

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
应用html的DIV+CSS制作牛顿摆

@[牛顿摆]去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的代码片.<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>牛顿摆</title> <style> *{...
复制链接

扫一扫