CSS3自适应拳王阿里的带说明相册

拳王阿里相册及其名言

css3, 界面组件, 模板

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2211
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url("http://fonts.googleapis.com/css?family=Roboto\+Slab:300,100,400,700");
@import url("https://fonts.googleapis.com/css?family=Titillium+Web:400,200,300,600,700,900,400italic");
* {
    box-sizing: border-box;
}
body {
    background-color: #ccc;
    color: #333;
    font-family: 'Titillium Web', sans-serif;
    font-size: 20px;
    line-height: 1.5;
    position: relative;
}
a {
    color: #fff;
    display: inline-block;
    padding: 1rem;
    text-decoration: none;
}
a:hover {
    background-color: #fff;
    color: #609;
}
.nav {
    background-color: #000;
    box-shadow: 0 0 30px #000;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 20;
}
a.button {
    color: #000;
    display: inline-block;
    padding: 1rem;
    text-decoration: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
a.button:hover {
    background-color: #dda0dd;
    color: #fff;
}
a.logo {
    background-color: #000;
    font-family: titillium web;
    font-weight: 900;
    position: relative;
    text-decoration: none;
    -webkit-transition: all 0.1s;
    transition: all 0.1s;
}
a.logo:hover .greatest,
a.logo:hover .of,
a.logo:hover .all,
a.logo:hover .time,
a.logo:hover .rip {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}
.greatest,
.of,
.all,
.time,
.rip {
    background-color: #000;
    color: #fff;
    display: inline-block;
    -webkit-transition: all 0.33s cubic-bezier(0.91, -0.44, 0.12, 1.51);
    transition: all 0.33s cubic-bezier(0.91, -0.44, 0.12, 1.51);
}
.of {
    -webkit-transform: translateX(-309%);
    transform: translateX(-309%);
}
.all {
    -webkit-transform: translateX(-300%);
    transform: translateX(-300%);
}
.time {
    -webkit-transform: translateX(-190%);
    transform: translateX(-190%);
}
.rip {
    background-color: #000;
    color: #fff;
    font-weight: 200;
    padding-left: 5px;
    -webkit-transform: translateX(-72%);
    transform: translateX(-72%);
}
.content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding-top: 4.5rem;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 0 auto;
    max-width: 1200px;
}
.row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 0 1rem;
}
@media (max-width: 800px) {
    .row {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }
}
.box {
    background-color: #fff;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin: 1rem;
    padding: 1rem;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
img {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
}
@media (max-width: 2400px) {
    img {
        height: 300px;
    }
}
@media (max-width: 800px) {
    img {
        height: 400px;
    }
}
h2 {
    color: #000;
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1;
    padding: 1rem;
    text-align: center;
}
p {
    font-family: roboto slab;
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1.2;
}

HTML

<nav id="top" class="nav"><a href="#top" class="logo"><span class="greatest">Greatest</span><span class="of">Of</span><span class="all">All</span><span class="time">Time</span><span class="rip">RIP Muhammad Ali</span></a>
</nav>
<div class="content">
    <h2>Fighting Words</h2>
    <div class="row">
        <div class="box">
            <p>Float like a butterfly, sting like a bee.</p>
        </div>
        <div class="box"><img src="https://i.ytimg.com/vi/GKhWqGNep-s/hqdefault.jpg" />
            <p>If you even dream of beating me you'd better wake up and apologize.</p>
        </div>
        <div class="box"><img src="https://how-rich.org/wp-content/uploads/2015/04/How-rich-is-Muhammad-Ali.jpg" />
            <p>Silence is golden when you can't think of a good answer.</p>
        </div>
    </div>
    <div class="row">
        <div class="box">
            <p>If they can make penicillin out of moldy bread, they can sure make something out of you.</p>
        </div>
        <div class="box"><img src="https://cdn.wittyfeed.com/14052/76bwt1f8epst3engq5iy.jpeg" />
            <p>I hated every minute of training, but I said, ‘Don’t quit. Suffer now and live the rest of your life as a champion.'</p>
        </div>
        <div class="box"><img src="https://www.thenation.com/wp-content/uploads/2015/04/muhammad_ali_dr._king_ap_img.jpg" />
            <p>Hating people because of their color is wrong. And it doesn't matter which color does the hating. It's just plain wrong.</p>
        </div>
    </div>
    <div class="row">
        <div class="box"><img src="https://www.erictrules.com/blog/wp-content/uploads/2014/08/fist.jpg" />
            <p>Don’t count the days; make the days count.</p>
        </div>
        <div class="box"><img src="https://www.pbs.org/independentlens/wp/wp-content/uploads/2014/04/the-trials-of-muhammad-ali-1920x830.jpg" />
            <p>Service to others is the rent you pay for your room here on earth.</p>
        </div>
        <div class="box"><img src="https://i2.cdn.turner.com/cnnnext/dam/assets/160604012743-03-muhammad-ali-0604-large-169.jpg" />
            <p>Live everyday as if it were your last because someday you're going to be right.</p>
        </div>
    </div>
</div>

拳王阿里相册及其名言

css3, 界面组件, 模板

编辑器支持Emmet

快捷键

拳王阿里相册及其名言

css3, 界面组件, 模板

CSS3 一款中间带图标的响应式分隔线

用jQuery和CSS3实现的动画效果相册模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：