简单静态web页面+动画(小案例)

最新推荐文章于 2024-02-18 13:54:44 发布

0522Skylar

最新推荐文章于 2024-02-18 13:54:44 发布

阅读量1.7k

点赞数 1

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/qq_44859233/article/details/121593484

版权

前端专栏收录该内容

47 篇文章 1 订阅

订阅专栏

话不多说,先看效果图

在这里插入图片描述

图片会动态变化,由大到小,展现在页面,没有录制动图的工具,演示不了,不好意思

接下来画图展示

在这里插入图片描述

底部

在这里插入图片描述

看源码(html部分):


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
    <script src="animate.js"></script>
    <script type="text/javascript">       
    window.addEventListener('load', function() {
        var focus = document.querySelector('.top');
        var ul = focus.querySelector('ul');
            var i=0;
            //getimgs();
            animate(ul, i);
    })      
            
    </script>
</head>
<body>
    <!-- left -->
    <div class="main_left">
        <div class="top">
            <ul class="layout">
                <li class="slick-slide"><div class="img img1"></div></li>
                <li class="slick-slide"><div class="img img2"></div></li>
                <li class="slick-slide"><div class="img img3"></div></li>
                <li class="slick-slide"><div class="img img4"></div></li>
                <li class="slick-slide"><div class="img img5"></div></li>
            </ul> 
            
            <div class="slide-pager">
                <div class="pager-bar"></div>
                <div class="slide-pager-btn prev"></div>
                <div class="slide-pager-btn next"></div>
            </div>
        </div>
    </div>

    <!-- right -->
    <div class="main_right">
        
        <div class="box-inner">
            <p class="topHeader__box__logo"><a href="#"><img src="./img/logo.svg" alt="KINASHI art gallery GION"></a></p>
            <ul class="topHeader__box__nav layout arial">
                <li><a href="#">NEWS</a></li>
                <li><a href="#">ARTIST</a></li>
                <li><a href="#">WORKS</a></li>
                <li><a href="#" class="no-link">RESERVE</a></li>
                <li><a href="#">ACCESS</a></li>
            </ul>
            <p class="topHeader__box__link"><a href="">新型コロナ感染拡大防止の取組み</a></p>
            <ul class="topHeader__box__sns-nav layout flex">
                <li><a href="" target="_blank" rel="noopener"><img src="./img/ico_ig.svg" alt="instagram"></a></li>
                <li><a href="" target="_blank" rel="noopener"><img src="./img/ico_tw.svg" alt="twitter"></a></li>
            </ul>
        </div><!-- box-inner -->
        <!-- topHeader__nav -->
        <p class="scroll-arrow pc"><a href="#"><span class="scroll">SCROLL</span><span></span></a></p>

    </div>

    <!-- main-contant -->

    <main>
        <div class="inner"></div>
        <section id="info" class="info">
        <div class="inner02">
            <h2 class="section__title move move-up arial on">NEWS</h2>
            <ul class="top-info__list info__list layout">
                <li>
                    <a href="#">
                    <p class="info__list__date">2021.03.28</p>
                    <h3 class="info__list__title"><span>お知らせ<div class="newicon arial">NEW</div></span></h3>
                    </a>
                </li>			            
            </ul>
            <p class="column__btn morebtn move"><a href="">VIEW MORE　<span>></span></a></p>
        </div>
        <!-- inner -->
        </section>
        <section class="artist">
        <div class="inner">
            <div class="artist__box">
                <p class="artist__title section__title arial">ARTIST</p>
                <h1 class="artist__subtitle arial">Kinashi Noritake</h1>
                <div class="artist__box__img">
                    <div class="imgholder">
                        <img src="./img/img01.jpg" alt="">
                    </div>
                </div>
                <p class="artist__btn morebtn move"><a href="">VIEW MORE　<span>></span></a></p>
            </div>
        </div>
        <!-- inner -->
        </section>
        <section class="works">
        <div class="inner">
            <h2 class="works__title section__title arial">WORKS</h2>
            <ul class="top-works__list works__list layout flex">
                <li>
                    <a href="./img/pic01.jpg" rel="luminous">
                        <div class="works__list__thumb"><div class="imgholder holder1"><img src="./img/pic01-321x400.jpg" alt=""></div></div>
                        <p class="works__list__title">timing-タイミング<br />（2013）</p>
                    </a>
                </li>
                <li>
                    <a href="./img/pic02.jpg" rel="luminous">
                        <div class="works__list__thumb"><div class="imgholder holder2"><img src="./img/pic02-239x400.jpg" alt=""></div></div>
                        <p class="works__list__title">感謝<br />（2013）</p>
                    </a>   
                </li>
                <li>
                    <a href="./img/pic03.png" rel="luminous">
                        <div class="works__list__thumb"><div class="imgholder holder3"><img src="./img/pic03-316x400.png" alt=""></div></div>
                        <p class="works__list__title">Untitled<br />（2007）</p>
        
                    </a>
                </li>
                <li>
                    <a href="./img/pic04.jpg" rel="luminous">
                    <div class="works__list__thumb"><div class="imgholder holder1"><img src="./img/pic04-319x400.jpg" alt=""></div></div>
                    <p class="works__list__title">輝<br />（2011）</p>
        
                    </a>
                </li>
                <li>
                    <a href="./img/pic05.jpg" rel="luminous">
                    <div class="works__list__thumb"><div class="imgholder holder2"><img src="./img/pic05-311x400.jpg" alt=""></div></div>
                    <p class="works__list__title">Sunlit<br />（2010）</p>
        
                    </a>
                </li>
                <li>
                    <a href="./img/pic06.jpg" rel="luminous">
                    <div class="works__list__thumb"><div class="imgholder holder3"><img src="./img/pic06-321x400.jpg" alt=""></div></div>
                    <p class="works__list__title">Flowers<br />（2013）</p>
        
                    </a>
                </li>
            </ul>
            <p class="works__btn morebtn move"><a href="#">VIEW MORE　<span>></span></a></p>
        </div>
        <!-- inner -->
        </section>
        <section class="common">
            <div class="inner">
                <div class="common__flex flex flex-column">
                    <div class="common__flex__box">
                        <h2 class="common__flex__box__title section__title arial">ACCESS</h2>
                        <p class="common__flex__box__text">〒605‐0074　京都市東山区祇園町南側570番地8<br>
                        開廊時間：10:30～18:30　休廊日：毎週火曜日</p>
                        <p class="works__btn morebtn move"><a href="#">VIEW MORE　<span>></span></a></p>
                    </div>
                </div>
                <!-- flex -->
            </div>
        <!-- inner -->
        </section>
    </main>
    
    
    <footer>
        <div class="inner">
            <p class="footer__logo"><a href="https://kinashiartgallerygion.com"><img src="https://kinashiartgallerygion.com/wp/wp-content/themes/base/images/common/logo02.svg" alt="KINASHI art gallery GION" /></a></p>
            <ul class="footer__list layout flex pc arial">
                <li><a href="https://kinashiartgallerygion.com/news/">NEWS</a></li>
                <li><a href="https://kinashiartgallerygion.com/artist/">ARTIST</a></li>
                <li><a href="https://kinashiartgallerygion.com/works/">WORKS</a></li>
                                    <li><a href="#" class="no-link">RESERVE</a></li>
                                    <li><a href="https://kinashiartgallerygion.com/access/">ACCESS</a></li>
                <li><a href="https://kinashiartgallerygion.com/corona/">新型コロナ感染拡大防止の取組み</a></li>
            </ul>
            <ul class="footer__sns layout flex">
                <li><a href="https://www.instagram.com/kinashi_art_gallery/" target="_blank" rel="noopener"><img src="https://kinashiartgallerygion.com/wp/wp-content/themes/base/images/common/ico_ig.svg" alt="instagram"></a></li>
                <li><a href="https://twitter.com/kinashi_gallery" target="_blank" rel="noopener"><img src="https://kinashiartgallerygion.com/wp/wp-content/themes/base/images/common/ico_tw.svg" alt="twitter"></a></li>
            </ul>
            <div class="footer__address flex pc">
                <p>〒605‐0074　京都市東山区祇園町南側570番地8　　電話番号：075-744-6994</p>
            　  <p>開廊時間：10:30～18:30　休廊日：毎週火曜日　　<a href="https://kinashiartgallerygion.com/contact/">CONTACT</a></p>
            </div><!-- footer__address -->
            <p class="footer__contact sp"><a href="https://kinashiartgallerygion.com/contact/">CONTACT</a></p>
            <p class="footer__contact"><a href="https://kinashiartgallerygion.com/personal-information/">個人情報の取扱いについて</a>　　<a href="https://kinashiartgallerygion.com/privacy-policy/">プライバシポリシー</a></p>
            <p class="footer__copy"><span class="pc">Copyright </span>&copy; KINASHI art gallery GION<span class="pc"> All Rights Reserverd.</span></p>
        </div><!-- inner -->
    </footer>
<p id="pagetop"><a href="#"><img src="./img/pagetop.png" alt="↑" class="pc"><img src="./img/pagetop_sp.png" alt="↑" class="sp"></a></p>
</div><!-- wrapper -->
</div><!-- /#contaner -->
</body>
</html>

源码(css)部分:

*{
    margin: 0;
    padding: 0;
}
.top{
    width: 1056px;
    height: 704px;
    /* position: relative; */
    display: block;
    overflow: hidden;
}
.main_left{
    height: 750px;
    float: left;
    width: 1056px;
    background: #f7f7f7;
    position: relative;
}
.layout {
    padding: 0;
    list-style: none;
    /* background-color: skyblue; */
    height: 100%;
    width: 100%;
    /* position: absolute; */

}
.slick-slide{
  
    opacity: 0;
    z-index: 0;
    height:0 ;
    width:0;
}
.slick-slide .img{
    
    height: 100%;
    /* opacity: 0;/*设置div 元素的不透明级别*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    
    margin-top: 50px; 
}
.img1{
    background-image: url(./img/slide01.jpg);
}
.img2{
    background-image: url(./img/268.jpg);
}
.img3{
    background-image: url(./img/269.jpg);
}
.img4{
    background-image: url(./img/slide04.jpg);
}
.img5{
    background-image: url(./img/slide05.jpg);
}



.slide-pager {
    position: absolute;
    bottom: 20px;
    right: 10px;
    z-index: 3;
}
.pager-bar {
    width: 70px;
    height: 1px;
    background-color: #e5e5e5;
    overflow: hidden;
    position: relative;
}
.pager-bar.active:before {
	animation: bar_active 5s linear 0s 1 normal both;
}

.pager-bar:not(.active):before {
	animation: bar_disappear .75s cubic-bezier(.19,1,.22,1) 0s 1 normal both;
}
.pager-bar:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: #000;
    position: absolute;
    left: 0;
    top: 0;
    transform: scaleX(0);
}
.slide-pager-btn {
    display: inline-block;
    width: 44px;
    height: 44px;
    cursor: pointer;
}
.slide-pager-btn.prev:before {
	transform: rotate(-45deg);
	left: 12px;
}

.slide-pager-btn.next:before {
	transform: rotate(135deg);
	left: 45px;
}
.slide-pager-btn:before {
	content: "";
	display: block;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 14px;
	height: 14px;
	border-top: 1px solid #000;
	border-left: 1px solid #000;
	position: absolute;
	top: calc(50% - 7px);
}
.main_right{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 440px;
    height: 100%;
    text-align: center;
    background: #fff;
    position: relative;
    z-index: 3;
}
.box-inner{
    
    padding-top: 100px;
}
.topHeader__box__logo {
    margin: 0 0 3em;
}
.topHeader__box__logo {
    margin: 0 0 3em;
}
.topHeader__box__nav li {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 .7em;
}
.topHeader__box__nav li a, .topHeader__box__link a {
    color: #333;
    text-decoration: none;
}
a, .hover {
    transition: all 0.3s ease;
    text-decoration: underline;
}
.topHeader__box__nav:after {
    display: block;
    content: "";
    width: 40px;
    height: 1px;
    margin: auto;
    background: #cccccc;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
}
.topHeader__box__link {
    font-size: 14px;
    margin: 0 0 4.7em;
}
.topHeader__box__sns-nav {
    justify-content: center;
    align-items: center;
}
.flex {
    display: flex;
}
.topHeader__box__sns-nav li {
    width: 24px;
    line-height: 1;
    margin: 0 1em;
}
.scroll-arrow {
    font-weight: bold;
    margin: 0;
    position: absolute;
    right: 0;
    bottom: 95px;
    z-index: 100;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
.scroll-arrow a {
    display: block;
    font-size: 14px;
    color: #333;
    text-decoration: none;
}

@media all and (min-width: 769px) {
	.inner {
		width: 1100px;
		margin: 0 auto;
	}

	.inner02 {
		width: 700px;
		margin: 0 auto;
	}
}
.inner {
	position: relative;
	box-sizing: border-box;
}
.info {
	padding: 10em 0 5em;
}
.inner02 {
    width: 700px;
    margin: 0 auto;
}
.move.on {
    opacity: 1;
}

.section__title {
    font-size: 30px;
    font-weight: 700;
    color: #1c1c1b;
    text-align: center;
    margin: 0 0 1.2em;
}
.move {
    opacity: 0;
    transition: opacity 0.8s ease;
}
.arial {
    font-family: Arial, Helvetica, sans-serif;
}
.top-info__list.info__list {
    margin: 0 0 2.5em;
}
.info__list {
    margin: 0;
    border-top: 1px solid #ddd;
}
.info__list li {
    padding: 1.35em 1em;
    border-bottom: 1px solid #ddd;
}
.info__list li a {
    color: #333;
    text-decoration: none;
}
.info__list li a .info__list__date {
    font-size: 14px;
    margin-right: 3em;
}
.info__list li a > * {
    display: inline-block;
    vertical-align: top;
    margin: 0;
}
.info__list__title {
    max-width: 530px;
    line-height: 1.3;
}
.newicon {
    display: block;
    width: 45px;
    font-size: 10px;
    color: #fff;
    padding: 3.5px 10px;
    box-sizing: border-box;
    background: #cc0000;
    
    top: 2px;
    right: 0;
}
section {
    position: relative;
}
.artist:before {
    display: block;
    content: "";
    width: 100%;
    height: 76px;
    background: #f2f2f2;
    position: absolute;
    bottom: 0;
    left: 0;
}
.artist__box {
    width: calc(100% - 625px);
    height: 360px;
    margin: 0 0 0 auto;
    padding: 40px 0 0 50px;
    box-sizing: border-box;
}
.artist__title {
    text-align: left;
    line-height: 1.2;
    margin: 0;
}
.section__title {
    font-size: 30px;
    font-weight: 700;
    color: #1c1c1b;
    text-align: center;
    margin: 0 0 1.2em;
}
.artist__subtitle {
    font-size: 48px;
    color: #1c1c1b;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 1em;
}
.artist__box__img {
    width: 625px;
    height: 360px;
    position: absolute;
    top: 0;
    left: 0;
}
.imgholder {
    position: relative;
    overflow: hidden;
}
img {
    max-width: 100%;
    height: auto;
    vertical-align: top;
    border: 0;
}
.artist__btn {
    margin: 0;
}
.artist__btn a {
    margin: 0;
}
.morebtn a {
    display: block;
    width: 220px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #333;
    text-align: center;
    letter-spacing: .2em;
    text-decoration: none;
    margin: 0 auto 1em;
    padding: 1.5em 0;
    border: 1px solid #333;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.morebtn a:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0;
    background-color: #333;
    -webkit-transition: all .5s cubic-bezier(.19,1,.22,1);
    transition: all .5s cubic-bezier(.19,1,.22,1);
    -webkit-transition-timing-function: cubic-bezier(.19,1,.22,1);
    transition-timing-function: cubic-bezier(.19,1,.22,1);
    z-index: -1;
}
.morebtn a span {
    display: inline-block;
    transform: scale(.7,1);
}
.works {
    padding: 6em 0 5em;
    background: #f2f2f2;
}
.works__list {
    flex-wrap: wrap;
    margin: 0;
}
.works__list li:not(:nth-child(3n)) {
    margin-right: 59px;
}
.works__list li {
    width: 327px;
    text-align: center;
    margin: 0 0 4em;
}
.works__list li a {
    color: #333;
    text-decoration: none;
}
.works__list__thumb {
    height: 390px;
    margin: 0 0 1em;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
}
.works__list__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.works__list__thumb .imgholder {
    height: 100%;
}
.imgholder {
    position: relative;
    overflow: hidden;
}


.common {
    padding: 6em 0 4em;
}


.common__flex {
    justify-content: space-between;
}
.common__flex__box {
    width: calc(50% - 50px);
    text-align: center;
}
.common__flex__box__title {
    margin: 0 0 .7em;
}
.common__flex__box__text {
    display: inline-block;
    text-align: left;
    margin: 0 0 2em;
}
main {
    position: relative;
}
footer {
    text-align: center;
    padding: 3.5em 0 2em;
}
.footer__logo {
    margin: 0 0 3.2em;
}
.footer__logo img {
    width: 384px;
}
.footer__list {
    margin: 0 0 2em;
    justify-content: center;
}
.footer__list li {
    font-weight: 600;
    margin: 0 1em;
}
footer a {
    color: #333333;
    text-decoration: none;
}
.footer__sns {
    justify-content: center;
    align-items: center;
    margin: 3em 0 3.5em;
}
.footer__sns li {
    width: 24px;
    line-height: 1;
    margin: 0 1em;
}
.footer__address {
    justify-content: center;
    margin: 0 0 2em;
}
.footer__address p {
    font-size: 14px;
    margin: 0;
}

@media all and (min-width: 769px) {
	body {
		min-width: 1100px;
	}

	.tel-link {
		pointer-events: none;
	}

	.sp {
		display: none!important;
	}
}
.footer__copy {
    font-size: 12px;
}
#pagetop {
    display: block;
    position: fixed;
    bottom: 0;
    right: 0;
    margin: 0;
    z-index: 3;
}
#pagetop a {
    display: block;
    width: 100%;
    height: 100%;
    background: #333333;
}

欢迎大家指正

0522Skylar

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
简单静态web页面+动画(小案例)

话不多说,先看效果图图片会动态变化,由大到小,展现在页面,没有录制动图的工具,演示不了,不好意思接下来画图展示底部看源码(html部分):<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vie
复制链接

扫一扫