css实现乌龟与兔子赛跑动画效果代码-html代码-BFW代码库

css实现乌龟与兔子赛跑动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现乌龟与兔子赛跑动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <style>
        <link href='https://fonts.googleapis.com/css?family=Asul:400,700' rel='stylesheet'>
    </style>



    <style>
    * {
        box-sizing: border-box;
}

body {
        overflow: hidden;
        margin:0;
        padding-top: 15px;
        background: #effcff url('body-bg.png') no-repeat 50% 5%;
        text-align: center;
        font: .75em normal 'Asul', sans-serif;
        -webkit-perspective: 800;
}
.tortoise,
.hare,
.road,
.road:after,
.go:after {
        position: absolute; 
}
.go {
        position: relative;
        margin: 35px auto;
        color: white;
        text-align: center;
        text-shadow: 0 1px 0 rgba(0,0,0,.5);
        font-size: 2.5em;
        cursor: pointer;
}
.go:after {
        top: -5px;
        left: -150px;
        display: block;
        padding: 10px 0;
        width: 300px;
        border: 1px solid #76011b;
        border-radius: 8px;
        background: linear-gradient(to bottom,rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
        box-shadow: 0px 0px 10px rgba(19,93,158,.6);
        content: "Start Race!";
}
.go:checked:after {
        background: linear-gradient(to bottom,rgba(109,0,25,1) 0%,rgba(143,2,34,1) 61%,rgba(169,3,41,1) 100%);
        content: "Reset Race";
}
.tortoise,
.hare {
        left: 2%; 
        z-index: 3000;
}
.tortoise { 
        -webki.........完整代码请登录后点击上方下载按钮下载查看