HTML5+CSS3小实例:纯CSS实现奥运五环

时间:2024-07-16 16:50:57

实例:纯CSS实现奥运五环

技术栈:HTML+CSS

效果:

源码:

【HTML】

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>纯CSS实现奥运五环</title>
    <link rel="stylesheet" href="249.css">
</head>
<body>
    <div class="rings">
        <div class="ring ring-blue"></div>
        <div class="ring ring-yellow"></div>
        <div class="ring ring-black"></div>
        <div class="ring ring-green"></div>
        <div class="ring rin