网页实例001

ceshi001   ·   发表于 1个月前   ·   html代码分享

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="80%" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-double-ring" style="background: none;"><circle cx="50" cy="50" ng-attr-r="{{config.radius}}" ng-attr-stroke-width="{{config.width}}" ng-attr-stroke="{{config.c1}}" ng-attr-stroke-dasharray="{{config.dasharray}}" fill="none" stroke-linecap="round" r="30" stroke-width="4" stroke="#ffa900" stroke-dasharray="31.41592653589793 31.41592653589793" transform="rotate(111.924 50 50)"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;-360 50 50" keyTimes="0;1" dur="1.2s" begin="0s" repeatCount="indefinite"/></circle><circle cx="50" cy="50" ng-attr-r="{{config.radius}}" ng-attr-stroke-width="{{config.width}}" ng-attr-stroke="{{config.c1}}" ng-attr-stroke-dasharray="{{config.dasharray}}" fill="none" stroke-linecap="round" r="20" stroke-width="4" stroke="#ff9900" stroke-dasharray="31.41592653589793 31.41592653589793" transform="rotate(111.924 50 50)"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="1.5s" begin="0s" repeatCount="indefinite"/></circle><circle cx="50" cy="50" ng-attr-r="{{config.radius2}}" ng-attr-stroke-width="{{config.width}}" ng-attr-stroke="{{config.c2}}" ng-attr-stroke-dasharray="{{config.dasharray2}}" ng-attr-stroke-dashoffset="{{config.dashoffset2}}" fill="none" stroke-linecap="round" r="15" stroke-width="4" stroke="#ffe036" stroke-dasharray="23.561944901923447 23.561944901923447" stroke-dashoffset="23.561944901923447" transform="rotate(-111.924 50 50)"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;-360 50 50" keyTimes="0;1" dur="1.5s" begin="0s" repeatCount="indefinite"/></circle></svg><marquee width="100%"scrollamount="5"behavior="alternate"><button style="font-size:30px;background:rgba(0,0,0,0.3);">正在加载中,请稍后...</button></marquee>



<!DOCTYPE html>

<html lang="en">


<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>marquee</title>

</head>


<body>

    <marquee direction="up">我向上滚动</marquee>

    <hr>

    <marquee direction="down">我向下滚动</marquee>

    <hr>

    <marquee direction="left">我向左滚动</marquee>

    <hr>

    <marquee direction="right">我向右滚动</marquee>

    <hr>

    <marquee scrollamount="10">我速度很慢</marquee>

    <hr>

    <marquee scrollamount="100">我速度很快</marquee>

    <hr>

    <marquee scrolldelay="30">我小步前进。</marquee>

    <hr>

    <marquee scrolldelay="1000" scrollamount="100">我大步前进。</marquee>

    <hr>

    <marquee loop="1">我滚动一次</marquee>

    <hr>

    <marquee loop="2">我滚动两次</marquee>

    <hr>

    <marquee loop="infinite">我无限循环滚动</marquee>

    <hr>

    <marquee behavior="alternate">我来回滚动</marquee>

    <hr>

    <marquee behavior="scroll">我单方向循环滚动</marquee>

    <hr>

    <marquee behavior="scroll" direction="up" height="30">我单方向向上循环滚动</marquee>

    <hr>

    <marquee behavior="slide">我只滚动一次</marquee>

    <hr>

    <marquee behavior="slide" direction="up">我向上只滚动一次</marquee>

    <hr>

    <marquee behavior=="slide" direction="left" bgcolor="red">我的背景色是红色的</marquee>

    <hr>

    <marquee width="600" height="50" bgcolor="red">我宽300像素,高30像素。</marquee>

    <hr>

    <marquee width="300" height="30" vspace="10" hspace="10" bgcolor="red">我矩形边缘水平和垂直距周围各10像素。</marquee>

    <hr>

    <marquee width="300" height="30" vspace="50" hspace="50" bgcolor="red">我矩形边缘水平和垂直距周围各50像素。</marquee>

    <hr>

    <marquee align="absbottom">绝对底部对齐</marquee>

    <hr>

    <marquee align="absmiddle">绝对中央对齐</marquee>

    <hr>

    <marquee align="baseline">底线对齐</marquee>

    <hr>

    <marquee align="bottom">底部对齐(默认)</marquee>

    <hr>

    <marquee align="left">左对齐</marquee>

    <hr>

    <marquee align="middle"> 中间对齐</marquee>

    <hr>

    <marquee align="right">右对齐</marquee>

    <hr>

    <marquee align="texttop">顶线对齐</marquee>

    <hr>

    <marquee align="top">顶部对齐</marquee>

</body>


</html>


0 Reply   |  Until 1个月前 | 65 View
LoginCan Publish Content