纯CSS3实现的阳光海鸥沙滩遮阳伞和比基尼美女风景动画效果源码

2021/9/5 11:38:01

编程Tag： css3 源码 webkit transform border margin translatex translatey 遮阳伞

本文主要是介绍纯CSS3实现的阳光海鸥沙滩遮阳伞和比基尼美女风景动画效果源码，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

预览

代码如下

不是标准的当前h5的标准html文档，大家可以改改代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 明月海鸥海滩遮阳伞和比基尼美女风景画</title>
<style>
body {
    background: black;
}
.container {
    position: relative;
    width: 800px;
    height: 600px;
    background: #B3D1F2;
    margin: 90px auto;
    overflow: hidden;
}
.sol {
    position: absolute;
    width: 172px;
    height: 172px;
    border-radius: 100%;
    background: rgb(255, 243, 181);
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255, 243, 181, 1) 52%, rgba(247, 221, 93, 1) 100%);
    background: -webkit-radial-gradient(center ellipse, rgba(255, 243, 181, 1) 52%, rgba(247, 221, 93, 1) 100%);
    background: radial-gradient(ellipse at center, rgba(255, 243, 181, 1) 52%, rgba(247, 221, 93, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#fff3b5', endColorstr='#f7dd5d', GradientType=1);
    margin: 21px 50px;
}
.sol3 {
    position: absolute;
    width: 112px;
    height: 102px;
    border-radius: 100%;
    background: rgb(255, 243, 181);
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255, 243, 181, 1) 52%, rgba(247, 221, 93, 1) 100%);
    background: -webkit-radial-gradient(center ellipse, rgba(255, 243, 181, 1) 52%, rgba(247, 221, 93, 1) 100%);
    background: radial-gradient(ellipse at center, rgba(255, 243, 181, 1) 52%, rgba(247, 221, 93, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#fff3b5', endColorstr='#f7dd5d', GradientType=1);
    opacity: .3;
    margin: 281px 75px;
}
.c1 {
    position: absolute;
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 90px solid #385B6B;
    border-bottom: 50px solid transparent;
    ;
    margin: 251px 509px
}
.c1::before {
    content: "";
    position: absolute;
    width: 30px;
    height: 21px;
    background: #385B6B;
    margin: -49px 88px
}
.c1::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid #385B6B;
    margin: -60px 65px
}
.c2 {
    position: absolute;
    border-bottom: 30px solid #0D4D6B;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    height: 0;
    width: 30px;
    margin: 261px 621px
}
.c2::before {
    content: "";
    position: absolute;
    border-bottom: 21px solid #0D4D6B;
    border-left: 12px solid transparent;
    border-right: 9px solid transparent;
    height: 0;
    width: 30px;
    margin: -7px -7px
}
.c2::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 90px solid #0D4D6B;
    border-bottom: 50px solid transparent;
    ;
    margin: -30px -12px
}
.c3 {
    position: absolute;
    border-bottom: 70px solid #0D4D6B;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    height: 0;
    width: 50px;
    margin: 231px 677px
}
.c3::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 70px solid #0D4D6B;
    margin: -30px 12px
}
.lineas {
    position: absolute;
    z-index: 999;
}
.l1,
.l2,
.l3,
.l4,
.l5,
.l6,
.l7,
.l8 {
    position: absolute;
    width: 50px;
    height: 1px;
    background: white;
    margin: 300px 30px
}
.l1 {
    width: 70px;
    margin: 300px 30px
}
.l2 {
    width: 50px;
    margin: 312px 90px
}
.l3 {
    width: 30px;
    margin: 325px 70px
}
.l4 {
    width: 50px;
    margin: 312px 330px
}
.l5 {
    width: 70px;
    margin: 318px 430px
}
.l6 {
    width: 70px;
    margin: 291px 670px
}
.l7 {
    width: 50px;
    margin: 303px 650px
}
.l8 {
    width: 90px;
    margin: 314px 670px
}
.l1,
.l3,
.l5,
.l7 {
    -webkit-animation: brillo 3s alternate infinite;
    animation: brillo 3s alternate infinite;
}
.l2,
.l4,
.l6,
.l8 {
    -webkit-animation: brillo3 3s alternate infinite;
    animation: brillo3 3s alternate infinite;
}
.girl {
    position: absolute;
    margin: 0 30px;
    z-index: 999;
}
.arenas3 {
    position: absolute;
    width: 231px;
    height: 90px;
    border-radius: 100%;
    background: #DBBC74;
    z-index: 999;
    margin: 55px 291px
}
.legs {
    position: absolute;
    width: 80px;
    height: 21px;
    border-radius: 100%;
    background: #E2A581;
    margin: 90px 300px;
    -webkit-transform: rotate(21deg);
    transform: rotate(21deg)
}
.legs::before {
    content: "";
    position: absolute;
    width: 80px;
    height: 21px;
    border-radius: 100%;
    background: #E2A581;
    margin: -30px 75px;
    -webkit-transform: rotate(-42deg);
    transform: rotate(-42deg)
}
.legs3 {
    position: absolute;
    width: 80px;
    height: 16px;
    border-radius: 100%;
    background: #E2A581;
    margin: 73px 303px;
    -webkit-transform: rotate(-9deg);
    transform: rotate(-9deg)
}
.legs3::before {
    content: "";
    position: absolute;
    width: 80px;
    height: 16px;
    border-radius: 100%;
    background: #E2A581;
    margin: 12px 75px;
    -webkit-transform: rotate(18deg);
    transform: rotate(18deg)
}
.brazos,
.brazos3 {
    position: absolute;
    width: 12px;
    height: 50px;
    border-radius: 100%;
    background: #EA9D79;
}
.brazos {
    margin: 30px 340px;
    -webkit-transform: rotate(21deg);
    transform: rotate(21deg)
}
.brazos3 {
    margin: 30px 408px;
    -webkit-transform: rotate(-21deg);
    transform: rotate(-21deg)
}
.brazos::before,
.brazos3::before {
    content: "";
    position: absolute;
    width: 12px;
    height: 70px;
    border-radius: 100%;
    background: #EA9D79;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
}
.brazos::before {
    margin: 30px 0px;
}
.brazos3::before {
    margin: 30px 0px;
}
.hands {
    position: absolute;
    width: 21px;
    height: 9px;
    border-radius: 100%;
    background: #EA9D79;
    margin: 93px -12px
}
.hands3 {
    position: absolute;
    width: 21px;
    height: 9px;
    border-radius: 100%;
    background: #EA9D79;
    margin: 93px 3px
}
.body3 {
    position: absolute;
    border-bottom: 30px solid #E067CA;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    height: 0;
    width: 30px;
    margin: 63px 353px
}
.body3::before {
    content: "";
    position: absolute;
    width: 53px;
    height: 30px;
    border-radius: 0 0 50px 50px;
    background: black;
    margin: 30px -12px
}
.body3::after {
    content: "";
    position: absolute;
    border-top: 21px solid #E067CA;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    height: 0;
    width: 30px;
    margin: -21px -12px
}
.body7 {
    position: absolute;
    width: 60px;
    height: 12px;
    border-radius: 9px;
    background: #EA9D79;
    margin: 30px 350px
}
.hut {
    position: absolute;
    width: 112px;
    height: 112px;
    border-radius: 100%;
    background: #DD35B0;
    margin: -75px 325px
}
.hut::before {
    content: "";
    position: absolute;
    width: 35px;
    height: 35px;
    border-radius: 100%;
    background: #E067CA;
    margin: 40px 37px
}
.bird {
    position: absolute;
    margin: -300px -300px;
    -webkit-animation: volar 12s linear infinite;
    animation: volar 12s linear infinite;
}
.bird5 {
    position: absolute;
    margin: -291px -330px;
    -webkit-animation: volar3 12s linear infinite;
    animation: volar3 12s linear infinite;
}
.bird3 {
    position: absolute;
    -webkit-transform: scale(.4);
    transform: scale(.4)
}
.bird7 {
    position: absolute;
    -webkit-transform: scale(.3);
    transform: scale(.3)
}
.head {
    position: absolute;
    width: 25px;
    height: 25px;
    border-radius: 90px 90px 0;
    background: #ddd;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    margin: 102px 291px
}
.ojo {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 100%;
    background: black;
    margin: 12px 14px
}
.boca {
    position: absolute;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-left: 7px solid #FFAE44;
    border-bottom: 7px solid transparent;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    margin: 17px 21px
}
.body {
    position: absolute;
    width: 65px;
    height: 150px;
    border-bottom: 12px solid #ddd;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-radius: 90px / 100px;
    margin: -30px 231px
}
.body::before {
    content: "";
    position: absolute;
    width: 55px;
    height: 30px;
    border-radius: 0 0 70px 70px;
    background: #ddd;
    margin: 150px 0
}
.ala {
    position: absolute;
    width: 30px;
    height: 50px;
    background: #ddd;
    border-radius: 0px 112px 0px 112px;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    margin: 80px 251px;
    -webkit-animation: rotar 3s alternate infinite;
    animation: rotar 3s alternate infinite;
}
.ala3 {
    position: absolute;
    width: 30px;
    height: 50px;
    background: #ccc;
    border-radius: 0px 112px 0px 112px;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    margin: 80px 241px;
    -webkit-animation: rotar 3s alternate infinite;
    animation: rotar 3s alternate infinite;
}
.cola {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 0px 70px 0px 70px;
    background: #ddd;
    margin: 90px 221px;
    -webkit-transform: rotate(-12deg);
    transform: rotate(-12deg)
}
.cola::before {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 0px 70px 0px 70px;
    background: #ddd;
    margin: 0px 3px;
    -webkit-transform: rotate(50deg);
    transform: rotate(50deg)
}
.cola::after {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 0px 70px 0px 70px;
    background: #ddd;
    margin: 12px -3px;
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg)
}
.arena {
    position: absolute;
    width: 800px;
    height: 201px;
    background: #DDC58B;
    margin: 400px 0px;
}
.arena::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 152px;
    border-radius: 300px 300px 0 0;
    background: #DDC58B;
    margin: -21px -112px;
}
.arena::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 152px;
    border-radius: 300px 300px 0 0;
    background: #DDC58B;
    margin: -12px 50px;
}
.arena3 {
    position: absolute;
    width: 300px;
    height: 152px;
    border-radius: 300px 300px 0 0;
    background: #DDC58B;
    margin: -21px 212px;
}
.arena3::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 152px;
    border-radius: 300px 300px 0 0;
    background: #DDC58B;
    margin: 9px 152px;
}
.arena3::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 152px;
    border-radius: 300px 300px 0 0;
    background: #DDC58B;
    margin: 3px 261px;
}
.arenas {
    position: absolute;
    width: 300px;
    height: 152px;
    border-radius: 300px 300px 0 0;
    background: #DDC58B;
    margin: 7px 412px;
}
.sea {
    position: absolute;
    width: 800px;
    height: 152px;
    background: rgb(70, 180, 214);
    background: -webkit-linear-gradient(top, rgba(70, 180, 214, 1) 0%, rgba(168, 221, 237, 1) 100%);
    background: linear-gradient(to bottom, rgba(70, 180, 214, 1) 0%, rgba(168, 221, 237, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#46b4d6', endColorstr='#a8dded', GradientType=0);
    margin: 271px 0px;
}
.so {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 152px solid transparent;
    border-right: 152px solid transparent;
    border-bottom: 90px solid #FF6DB6;
    margin: -192px 258px;
    z-index: 999;
}
.so3 {
    position: absolute;
    width: 9px;
    height: 251px;
    background: white;
    border-right: 5px solid #eaeaea;
    margin: -112px 374px
}
.so3::before {
    content: "";
    position: absolute;
    width: 21px;
    height: 21px;
    border-radius: 100%;
    background: white;
    border-right: 3px solid #eaeaea;
    margin: -100px -5px
}
@-webkit-keyframes rotar {
    0% {
        -webkit-transform: rotatez(0deg) rotatey(0deg);
        transform: rotatez(0deg) rotatey(0deg)
    }
    100% {
        -webkit-transform: rotatez(132deg) rotatey(152deg);
        transform: rotatez(132deg) rotatey(152deg)
    }
}
@keyframes rotar {
    0% {
        -webkit-transform: rotatez(0deg) rotatey(0deg);
        transform: rotatez(0deg) rotatey(0deg)
    }
    100% {
        -webkit-transform: rotatez(132deg) rotatey(152deg);
        transform: rotatez(132deg) rotatey(152deg)
    }
}
@-webkit-keyframes volar {
    0% {
        -webkit-transform: translatex(-30px) translatey(0px);
        transform: translatex(-30px) translatey(0px)
    }
    25% {
        -webkit-transform: translatex(231px) translatey(12px);
        transform: translatex(231px) translatey(12px)
    }
    30% {
        -webkit-transform: translatex(300px) translatey(-30px);
        transform: translatex(300px) translatey(-30px)
    }
    40% {
        -webkit-transform: translatex(400px) translatey(12px);
        transform: translatex(400px) translatey(12px)
    }
    50% {
        -webkit-transform: translatex(500px) translatey(-21px);
        transform: translatex(500px) translatey(-21px)
    }
    60% {
        -webkit-transform: translatex(600px) translatey(21px);
        transform: translatex(600px) translatey(21px)
    }
    70% {
        -webkit-transform: translatex(700px) translatey(0px);
        transform: translatex(700px) translatey(0px)
    }
    80% {
        -webkit-transform: translatex(800px) translatey(-9px);
        transform: translatex(800px) translatey(-9px)
    }
    90% {
        -webkit-transform: translatex(900px) translatey(9px);
        transform: translatex(900px) translatey(9px)
    }
    100% {
        -webkit-transform: translatex(1052px) translatey(0px);
        transform: translatex(1052px) translatey(0px)
    }
}
@keyframes volar {
    0% {
        -webkit-transform: translatex(-30px) translatey(0px);
        transform: translatex(-30px) translatey(0px)
    }
    25% {
        -webkit-transform: translatex(231px) translatey(12px);
        transform: translatex(231px) translatey(12px)
    }
    30% {
        -webkit-transform: translatex(300px) translatey(-30px);
        transform: translatex(300px) translatey(-30px)
    }
    40% {
        -webkit-transform: translatex(400px) translatey(12px);
        transform: translatex(400px) translatey(12px)
    }
    50% {
        -webkit-transform: translatex(500px) translatey(-21px);
        transform: translatex(500px) translatey(-21px)
    }
    60% {
        -webkit-transform: translatex(600px) translatey(21px);
        transform: translatex(600px) translatey(21px)
    }
    70% {
        -webkit-transform: translatex(700px) translatey(0px);
        transform: translatex(700px) translatey(0px)
    }
    80% {
        -webkit-transform: translatex(800px) translatey(-9px);
        transform: translatex(800px) translatey(-9px)
    }
    90% {
        -webkit-transform: translatex(900px) translatey(9px);
        transform: translatex(900px) translatey(9px)
    }
    100% {
        -webkit-transform: translatex(1052px) translatey(0px);
        transform: translatex(1052px) translatey(0px)
    }
}
@-webkit-keyframes volar3 {
    0% {
        -webkit-transform: translatex(-30px) translatey(0px);
        transform: translatex(-30px) translatey(0px)
    }
    25% {
        -webkit-transform: translatex(321px) translatey(-30px);
        transform: translatex(321px) translatey(-30px)
    }
    30% {
        -webkit-transform: translatex(400px) translatey(30px);
        transform: translatex(400px) translatey(30px)
    }
    40% {
        -webkit-transform: translatex(450px) translatey(-12px);
        transform: translatex(450px) translatey(-12px)
    }
    50% {
        -webkit-transform: translatex(550px) translatey(33px);
        transform: translatex(550px) translatey(33px)
    }
    60% {
        -webkit-transform: translatex(630px) translatey(-33px);
        transform: translatex(630px) translatey(-33px)
    }
    70% {
        -webkit-transform: translatex(750px) translatey(9px);
        transform: translatex(750px) translatey(9px)
    }
    80% {
        -webkit-transform: translatex(850px) translatey(33px);
        transform: translatex(850px) translatey(33px)
    }
    90% {
        -webkit-transform: translatex(930px) translatey(-33px);
        transform: translatex(930px) translatey(-33px)
    }
    100% {
        -webkit-transform: translatex(1052px) translatey(-9px);
        transform: translatex(1052px) translatey(-9px)
    }
}
@keyframes volar3 {
    0% {
        -webkit-transform: translatex(-30px) translatey(0px);
        transform: translatex(-30px) translatey(0px)
    }
    25% {
        -webkit-transform: translatex(321px) translatey(-30px);
        transform: translatex(321px) translatey(-30px)
    }
    30% {
        -webkit-transform: translatex(400px) translatey(30px);
        transform: translatex(400px) translatey(30px)
    }
    40% {
        -webkit-transform: translatex(450px) translatey(-12px);
        transform: translatex(450px) translatey(-12px)
    }
    50% {
        -webkit-transform: translatex(550px) translatey(33px);
        transform: translatex(550px) translatey(33px)
    }
    60% {
        -webkit-transform: translatex(630px) translatey(-33px);
        transform: translatex(630px) translatey(-33px)
    }
    70% {
        -webkit-transform: translatex(750px) translatey(9px);
        transform: translatex(750px) translatey(9px)
    }
    80% {
        -webkit-transform: translatex(850px) translatey(33px);
        transform: translatex(850px) translatey(33px)
    }
    90% {
        -webkit-transform: translatex(930px) translatey(-33px);
        transform: translatex(930px) translatey(-33px)
    }
    100% {
        -webkit-transform: translatex(1052px) translatey(-9px);
        transform: translatex(1052px) translatey(-9px)
    }
}
@-webkit-keyframes brillo {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0.3
    }
}
@keyframes brillo {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0.3
    }
}
@-webkit-keyframes brillo3 {
    0% {
        opacity: 0.3
    }
    100% {
        opacity: 1
    }
}
@keyframes brillo3 {
    0% {
        opacity: 0.3
    }
    100% {
        opacity: 1
    }
}
</style>
</head>
<body>
<div class="container">
    <div class="sol"></div>
    <div class="cerros">
        <span class="c1"></span>
        <span class="c2"></span>
        <span class="c3"></span>
    </div>
    <div class="sea"></div>
    <div class="lineas">
        <span class="l1"></span>
        <span class="l2"></span>
        <span class="l3"></span>
        <span class="l4"></span>
        <span class="l5"></span>
        <span class="l6"></span>
        <span class="l7"></span>
        <span class="l8"></span>
    </div>
    <div class="sol3"></div>
    <div class="arena" </div>
        <div class="arena3"><span class="arenas"></span>
        </div>
        <div class="arenas3"></div>
        <div class="girl">
            <div class="legs3"></div>
            <div class="legs"></div>
            <div class="body7"></div>
            <div class="body3"></div>
            <div class="brazos">
                <div class="hands"></div>
            </div>
            <div class="brazos3">
                <div class="hands3"></div>
            </div>
            <div class="hut"></div>
            <div class="so3"></div>
        </div>
        <div class="bird5">
            <div class="bird7">
                <div class="head">
                    <div class="ojo"></div>
                    <div class="boca"></div>
                </div>
                <div class="ala3"></div>
                <div class="body"></div>
                <div class="ala"></div>
                <div class="cola"></div>
            </div>
        </div>
        <div class="bird">
            <div class="bird3">
                <div class="head">
                    <div class="ojo"></div>
                    <div class="boca"></div>
                </div>
                <div class="ala3"></div>
                <div class="body"></div>
                <div class="ala"></div>
                <div class="cola"></div>
            </div>
        </div>
        <div class="so"></div>
    </div>
</body>
</html>


这篇关于纯CSS3实现的阳光海鸥沙滩遮阳伞和比基尼美女风景动画效果源码的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！


相关编程文章

更多>
本站官方QQ
官方QQ:
23002807

沪ICP备2023033072号-1

     

扫一扫关注最新编程教程