优秀前端设计
2018-10-25 本文已影响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;
}
