css实现文章内容图片穿插视觉差异滚动效果代码-html代码-BFW代码库

代码语言：html

代码描述：css实现文章内容图片穿插视觉差异滚动效果代码

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        @import url(https://fonts.googleapis.com/css?family=Oswald:300,400,700);
    @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic);
    
    /* Override UGG site */
    #main {width: 100%; padding:0;}
    .content-asset p {margin:0 auto;}
    .breadcrumb {display:none;}
    
    /* Helpers */
    /**************************/
    .margin-top-10 {padding-top:10px;}
    .margin-bot-10 {padding-bottom:10px;}
    
    /* Typography */
    /**************************/
    #parallax-world-of-ugg h1 {font-family:'Oswald', sans-serif; font-size:24px; font-weight:400; text-transform: uppercase; color:black; padding:0; margin:0;}
    #parallax-world-of-ugg h2 {font-family:'Oswald', sans-serif; font-size:70px; letter-spacing:10px; text-align:center; color:white; font-weight:400; text-transform:uppercase; z-index:10; opacity:.9;}
    #parallax-world-of-ugg h3 {font-family:'Oswald', sans-serif; font-size:14px; line-height:0; font-weight:400; letter-spacing:8px; text-transform: uppercase; color:black;}
    #parallax-world-of-ugg p {font-family:'Source Sans Pro', sans-serif; font-weight:400; font-size:14px; line-height:24px;}
    .first-character {font-weight:400; float: left; font-size: 84px; line-height: 64px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: 'Source Sans Pro', sans-serif;}
    
    .sc {color: #3b8595;}
    .ny {color: #3d3c3a;}
    .atw {color: #c48660;}
    
    /* Section - Title */
    /**************************/
    #parallax-world-of-ugg .title {background: white; padding: 60px; margin:0 auto; text-align:center;}
    #parallax-world-of-ugg .title h1 {font-size:35px; letter-spacing:8px;}
    
    /* Section - Block */
    /**************************/
    #parallax-world-of-ugg .block {background: white; padding: 60px; width:820px; margin:0 auto; text-align:justify;}
    #parallax-world-of-ugg .block-gray {background: #f2f2f2;padding: 60px;}
    #parallax-world-of-ugg .section-overlay-mask {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: black; opacity: 0.70;}
    
    /* Section - Parallax */
    /**************************/
    #parallax-world-of-ugg .parallax-one {padding-top: 200px; padding-bottom: 200px; overflow: hidden; position: relative; width: 100%; background-image: url(//repo.bfw.wiki/bfwrepo/image/5f9e254d5c8fa.png); background-attachment: fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; background-position: top center;}
    #parallax-world-of-ugg .parallax-two {padding-top: 200px; padding-bottom: 200px; overflow: hidden; position: relative; width: 100%; background-image: url(//repo.bfw.wiki/bfwrepo/image/5e5ef02af2c67.png); background-attachment: fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; background-position: center center;}
    #parallax-world-of-ugg .parallax-three {padding-top: 200px; padding-bottom: 200px; overflow: hidden; position: relative; width: 100%; background-image: url(//repo.bfw.wiki/bfwrepo/image/6130b86635bc9.png); background-attachment: fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; background-position: center center;}
    
    /* Extras */
    /**************************/
    #parallax-world-of-ugg .line-break {border-bottom:1px solid black; width: 150px; margin:0 auto;}
    
    /* Media Queries */
    /**************************/
    @media screen and (max-width: 959px) and (min-width: 768px) {
        #parallax-world-of-ugg .block {padding: 40px; width:620px;}
    }
    @media screen and (max-width: 767px) {
        #parallax-world-of-ugg .block {padding: 30px; width:420px;}
        #parallax-world-of-ugg h2 {font-size:30px;}
        #parallax-world-of-ugg .block {padding: 30px;}
        #parallax-world-of-ugg .parallax-one, #parallax-world-of-ugg .parallax-two, #parallax-world-of-ugg .parallax-three {padding-top:100px; padding-bottom:100px;}
    }
    @media screen and (max-width: 479px) {
        #parallax-world-of-ugg .block {padding: 30px 15px; width:290px;}
    }
    </style>
</head>

<body>

    <div id="parallax-world-of-ugg">

        <section>
            <div class="title">
                <h3>Let's do some</h3>
                <h1>PARALLAX</h1>
            </div>
        </section>

        <section>
            <div class="parallax-one">
                <h2>SOUTHERN CALIFORNIA</h2>
            </div>
        </section>

        <section>
            <div class="block">
                <p><span class="first-character sc">I</span>n 1978, Brian Smith landed in Southern California with a bag of sheepskin boots and hope. He fell in love with the sheepskin experience and was convinced the world would one day share this love.
                    The beaches of Southern California had long been an epicenter of a relaxed, casual lifestyle, a lifestyle that Brian felt was a perfect fit for his brand. So he founded the UGG brand, began selling his sheepskin boots and they were
                    an immediate sensation. By the mid 1980's, the UGG brand became a symbol of relaxed southern California culture, gaining momentum through surf shops and other shops up and down the coast of California, from San Diego to Santa Cruz.
                    UGG boots reached beyond the beach, popping up in big cities and small towns all over, and in every level of society. Girls wore their surfer boyfri.........完整代码请登录后点击上方下载按钮下载查看