优秀前端设计

作者: 肆不肆傻 | 来源:发表于2018-10-25 19:49 被阅读0次

1. 半透明背景

示例 https://1stwebdesigner.com/best-wysiwyg-html-editor/

.hero-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: 0;
}

.header-gradient {
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.6) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00e5e5e5', endColorstr='#36404c', GradientType=0);
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 20;
    pointer-events: none;
}

@media (max-width:800px) {
    .header-gradient {
        background: linear-gradient(to bottom, transparent 30%, rgba(0, 0, 0, 0.7) 100%);
    }
}

.hero-posts {
    position: relative;
    z-index: 20;
    background: #454545;
    overflow: hidden;
}

.hero-posts .hero-post {
    width: 100%;
    padding: 4% 0 200px 0;
    margin-bottom: 0;
    position: relative;
}

@media (max-width:800px) {
    .hero-posts .hero-post {
        padding-bottom: 130px;
    }
}

@media (max-width:600px) {
    .hero-posts .hero-post {
        padding-bottom: 110px;
        padding-top: 12%;
    }
}

.single-hero .post {}

.single .hero-posts .hero-post {
    padding: 25px 0;
}

.hero-posts .hero-post:not(:first-child) {
    display: none;
}

.hero-posts .container {
    z-index: 40;
}

.hero-cats,
.entry-cats {
    position: relative;
    z-index: 101;
}

.hero-cats a,
.entry-cats a {
    font-size: 11px;
    vertical-align: middle;
    color: #fff;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-weight: 600;
    background: #20252A;
    padding: 5px 10px;
    letter-spacing: 1.5px;
    margin-right: 1px;
    float: left;
}

.hero-cats a:hover,
.entry-cats a:hover {
    background: #f68320;
}

.hero-posts .hero-text {
    opacity: 0;
    opacity: 1\9;
    position: relative;
    z-index: 40;
}

.hero-posts .hero-text p {
    color: #ddd;
    position: relative;
    z-index: 5;
    font-size: 16px;
    padding-bottom: 10px;
}

@media only screen and (max-width:1024px) {
    .hero-posts .hero-text p {
        max-width: 100%;
        text-shadow: none;
    }
}

.hero-posts .hero-post .entry-title {
    font-size: 36px;
    line-height: 1.3;
    padding: 30px 0 10px;
    color: #fff;
    position: relative;
    z-index: 5;
    border-top: none;
}

@media only screen and (max-width:1024px) {
    .hero-posts .hero-post .entry-title {}
}

@media (max-width:600px) {
    .hero-posts .hero-post .entry-title {
        font-size: 26px;
        padding: 25px 0 15px;
    }
}

.hero-posts .entry-title a {
    color: #fff;
}

.hero-posts .entry-title a:hover {
    color: #fff;
    opacity: .8;
}

.hero-date {
    color: #f5f5f5;
    font-size: 12px;
    letter-spacing: 1px;
}

.hero-tags {
    color: #ddd;
    font-size: 11px;
    letter-spacing: 0.5px;
    display: flex;
    padding: 5px 5px 5px 10px;
}

.sharing-buttons {
    float: right
}

@media (max-width:450px) {
    .hero-tags {
        display: none
    }
}

.hero-date a {
    color: #f68320;
    font-weight: 600;
}

.hero-tags a {
    font-size: 11px;
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    margin: 0 10px 0 0;
    letter-spacing: 1.5px;
    margin-left: 0;
    float: left;
}

.hero-date-span {}

.hero-date a:hover {
    text-decoration: underline
}

.hero-tags a:hover {
    text-decoration: underline;
}

.hero-date img {
    width: 24px;
    height: 24px;
    border-radius: 50px;
    margin-right: 2px;
    vertical-align: bottom;
}

.hero-pager-wrap {
    width: 100%;
    min-height: 132px;
    position: absolute;
    bottom: 0;
    z-index: 25;
}

@media (max-width:800px) {
    .hero-pager-wrap {
        min-height: 0;
        bottom: 8%;
    }
}

#hero-pager {
    margin: 0;
    border-top: solid 2px rgba(255, 255, 255, 0.4);
}

@media (max-width:800px) {
    #hero-pager {
        display: none;
    }
}

#hero-pager li {
    display: inline-block;
    list-style: none;
    width: 25%;
    float: left;
    margin-top: -2px;
    padding-right: 3%;
    border-top: solid 2px transparent;
    opacity: .5;
}

#hero-pager li:hover {
    cursor: pointer;
    opacity: 1;
}

#hero-pager li:last-child {
    margin-right: 0;
}

#hero-pager li a {
    position: relative;
    padding: 40px 0;
    display: inline-block;
    width: 100%;
    vertical-align: top;
}

#hero-pager .paging-thumb {
    display: inline-block;
    vertical-align: top;
    position: absolute;
    top: 45px;
    left: 0;
}

#hero-pager .paging-thumb img {}

#hero-pager .paging-text {
    display: inline-block;
    vertical-align: top;
    width: 100%;
}

#hero-pager .paging-thumb + .paging-text {
    padding-left: 65px;
}

#hero-pager .entry-title {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    color: #fff;
    margin-bottom: 0;
    letter-spacing: 0.5px;
}

#hero-pager .paging-date {
    font-size: 13px;
    color: #fff;
    opacity: .6;
}

#hero-pager .rslides_here {
    opacity: 1;
    border-top-color: #fff;
}

<div class="hero-wrapper">
    <div class="hero-posts rslides rslides1">
        <div id="rslides1_s0" class="with-featured-image hero-post rslides1_on" style="display: block; float: left; position: relative; opacity: 1; z-index: 2; transition: opacity 200ms ease-in-out 0s;">
            <div class="site-header-bg-wrap">
                <div class="header-opacity">
                    <div class="header-gradient"></div>
                    <div class="site-header-bg background-effect" style="background-image: url(https://1stwebdesigner.com/wp-content/uploads/2016/04/atom.jpg); opacity: 0.1"></div>
                </div>
            </div>
            <div class="container hero-container">
                <div class="hero-text">
                    <h1 class="entry-title">The 10 Best WYSIWYG HTML Editors</h1>
                    <div class="hero-date">
                        Written by
                        <a href="https://1stwebdesigner.com/author/editorial-team/"> Editorial Team </a>
                        <span class="hero-on-span">on</span> <span class="hero-date-span">December 14, 2016</span>
                        <span class="sponsored-text-post"></span>
                        <span class="sharing-buttons">
                          <ul class="rrssb-buttons clearfix">
                          <li class="rrssb-facebook">
                          <a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://1stwebdesigner.com/best-wysiwyg-html-editor/" class="popup"> 
                          <span class="rrssb-icon">
                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29 29"><path d="M26.4 0H2.6C1.714 0 0 1.715 0 2.6v23.8c0 .884 1.715 2.6 2.6 2.6h12.393V17.988h-3.996v-3.98h3.997v-3.062c0-3.746 2.835-5.97 6.177-5.97 1.6 0 2.444.173 2.845.226v3.792H21.18c-1.817 0-2.156.9-2.156 2.168v2.847h5.045l-.66 3.978h-4.386V29H26.4c.884 0 2.6-1.716 2.6-2.6V2.6c0-.885-1.716-2.6-2.6-2.6z"></path>
                          </svg>
                          </span>
                          </a>
                          </li>
                          <li class="rrssb-twitter">
                              <a target="_blank" href="https://twitter.com/intent/tweet?text=https://1stwebdesigner.com/best-wysiwyg-html-editor/" class="popup"> <span class="rrssb-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path d="M24.253 8.756C24.69 17.08 18.297 24.182 9.97 24.62a15.093 15.093 0 0 1-8.86-2.32c2.702.18 5.375-.648 7.507-2.32a5.417 5.417 0 0 1-4.49-3.64c.802.13 1.62.077 2.4-.154a5.416 5.416 0 0 1-4.412-5.11 5.43 5.43 0 0 0 2.168.387A5.416 5.416 0 0 1 2.89 4.498a15.09 15.09 0 0 0 10.913 5.573 5.185 5.185 0 0 1 3.434-6.48 5.18 5.18 0 0 1 5.546 1.682 9.076 9.076 0 0 0 3.33-1.317 5.038 5.038 0 0 1-2.4 2.942 9.068 9.068 0 0 0 3.02-.85 5.05 5.05 0 0 1-2.48 2.71z"></path></svg></span> </a>
                          </li>
                          <li class="rrssb-googleplus">
                              <a target="_blank" href="https://plus.google.com/share?url=Check%20out%20how%20ridiculously%20responsive%20these%20social%20buttons%20are%20https://1stwebdesigner.com/best-wysiwyg-html-editor/" class="popup"> <span class="rrssb-icon">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M21 8.29h-1.95v2.6h-2.6v1.82h2.6v2.6H21v-2.6h2.6v-1.885H21V8.29zM7.614 10.306v2.925h3.9c-.26 1.69-1.755 2.925-3.9 2.925-2.34 0-4.29-2.016-4.29-4.354s1.885-4.353 4.29-4.353c1.104 0 2.014.326 2.794 1.105l2.08-2.08c-1.3-1.17-2.924-1.883-4.874-1.883C3.65 4.586.4 7.835.4 11.8s3.25 7.212 7.214 7.212c4.224 0 6.953-2.988 6.953-7.082 0-.52-.065-1.104-.13-1.624H7.614z"></path></svg> </span> </a>
                          </li>
                          </ul>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

2. 毛玻璃效果

毛玻璃效果

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>毛玻璃背景效果</title>
    <style>
      .content{
        position: relative;
      }
      .mask {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background: black url(https://images.pexels.com/photos/325185/pexels-photo-325185.jpeg?cs=srgb&dl=architecture-buildings-business-325185.jpg&fm=jpg) center center/100% auto no-repeat fixed;
      -webkit-filter: blur(20px);
      -moz-filter: blur(20px);
      -ms-filter: blur(20px);
      -o-filter: blur(20px);
      filter: blur(20px);
      }
      .content .main{
        width: 640px;
        height: auto; 
        position:relative;
        left:50%;
        top:80px;
        margin-left:-320px;
        padding: 40px 20px;
      }
      .content .main h3{
        text-align: center;
      }
      .content .main p{
        text-align: justify;
        line-height: 1.2em;
      }
    </style>
  </head>
  <body>
    <div class="mask"></div>
    <div class="content">
      <div class="main">
        <h3>WARFRAME</h3>
        <p>The Grineer, with their endless clone armies, have plunged the system into chaos. There is only one force that can match them, you. You are Tenno, an ancient warrior, a master of gun and blade. You wield the mighty Warframes and command their awesome powers. Forge your weapons. Gather like-minded Tenno and take the fight back to the Grineer. The Origin System needs you once again. Are you ready?</p>
      </div>
    </div>
  </body>
</html>

3. 全局灰色（默哀色）

全局灰色（默哀色）

/*.grayforsite{}*/
html{
filter:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxmaWx0ZXIgaWQ9ImdyYXlzY2FsZSI+PGZlQ29sb3JNYXRyaXggdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAuMzMzMyAwLjMzMzMgMC4zMzMzIDAgMCAwLjMzMzMgMC4zMzMzIDAuMzMzMyAwIDAgMC4zMzMzIDAuMzMzMyAwLjMzMzMgMCAwIDAgMCAwIDEgMCIvPjwvZmlsdGVyPjwvc3ZnPg==#grayscale);
    /* Webkit only, Chrome & Safari 6+ */
    -webkit-filter: grayscale(100%); /* webkit */
-moz-filter: grayscale(100%); /*firefox*/
-ms-filter: grayscale(100%); /*ie9*/
-o-filter: grayscale(100%); /*opera*/
filter: grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 
filter:gray; /*ie9- */
}

4. 纯CSS实现加载刷新动画

页面加载中，请稍后。。。

.spinner{
position: absolute;
top: 45%;
left: 50%;
display: block;
margin-left: -160px;
width: 1px;
height: 1px;
border: 20px solid rgba(255,0,0,1);
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
border-left-color: transparent;
border-right-color: transparent;
-webkit-animation: spin 1.5s infinite;
-moz-animation: spin 1.5s infinite;
animation: spin 1.5s infinite;
}

优秀前端设计

1. 半透明背景

2. 毛玻璃效果

3. 全局灰色（默哀色）

4. 纯CSS实现加载刷新动画

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读