通过CSS3实现的精美折角特效代码-JS特效-爱易网页

通过CSS3实现的精美折角特效代码

日期：2014-05-18　浏览次数：20255 次

以下是程序代码

<!DOCTYPE html>
<html>

<head>

<!--
Copyright (c) 2013 by Felix Schwarzer (http://codepen.io/slimsmearlapp/pen/AyueF)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-->

<title>CSS3 折角效果 演示 by js.aiyiweb.com</title>

div {
  width: 200px;
  height: 200px;
  padding: 10px;
  border: 1px solid #ddd;
  background-size: cover;
 background-clip: content-box;
  background-color: #f66f6f;
  box-sizing: border-box;
  position: relative;
  margin: auto;
  top: 30px;

font: 400 2em/180px 'Oswald', sans-serif;
  color: #fbfbfb;
  text-indent: 20px;
}

div:after {
  content: "";
  display: block;
  position: absolute;
  border: 50px solid transparent;
  border-bottom: 50px solid #fefefe;
  bottom: -60px;
  right: -65px;
  box-shadow: 0px 7px 6px -9px black;
  transform: rotate(135deg);
}

div:before {
  content: "";
  display: block;
  position: absolute;
  border: 50px solid transparent;
  border-top: 50px solid #fefefe;
  top: -60px;
  left: -65px;
  box-shadow: 0px -7px 6px -9px black;
  transform: rotate(135deg);
}</style>

(function(){

if(!window.addEventListener) {
  return;
}

var self = window.StyleFix = {
  link: function(link) {
    try {
      // Ignore stylesheets with data-noprefix attribute as well as alternate stylesheets
      if(link.rel !== 'stylesheet' || link.hasAttribute('data-noprefix')) {
        return;
      }
    }
    catch(e) {
      return;
    }

var url = link.href || link.getAttribute('data-href'),
        base = url.replace(/[^\/]+$/, ''),
        base_scheme = (/^[a-z]{3,10}:/.exec(base) || [''])[0],
        base_domain = (/^[a-z]{3,10}:\/\/[^\/]+/.exec(base) || [''])[0],
        base_query = /^([^?]*)\??/.exec(url)[1],
        parent = link.parentNode,
        xhr = new XMLHttpRequest(),
        process;

xhr.onreadystatechange = function() {
      if(xhr.readyState === 4) {
        process();
      }
    };

process = function() {
        var css = xhr.responseText;

if(css && link.parentNode && (!xhr.status || xhr.status < 400 || xhr.status > 600)) {
          css = self.fix(css, true, link);

// Convert relative URLs to absolute, </div></div>

<div class="clearfix"></div>
                    </div>
                    <nav aria-label="...">
                        <ul class="pager">
                            <li class="previous"><a href="4667">上一篇：狡猾的按钮特效</a></li>

<li class="next"><a href="3225">下一篇：网盘空间的容量大小或进度特效的一款样式效果</a></li>
                        </ul>
                    </nav>

<div class="alert alert-warning" role="alert">
                        <strong>免责声明：</strong> 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
                    </div>

<div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/680' title='腾讯再次重申：普通微信誉户相对不收费' target="_blank">
                        腾讯再次重申：普通微信誉户相对不收费</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34306' title='刘强东：京东上市融资用于开拓三至六线城市' target="_blank">
                        刘强东：京东上市融资用于开拓三至六线城市</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34236' title='马斯克的特斯拉能否保持好势头' target="_blank">
                        马斯克的特斯拉能否保持好势头</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34301' title='广电总局回应美剧下架：不是所有信息可公开' target="_blank">
                        广电总局回应美剧下架：不是所有信息可公开</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34284' title='途牛开盘价9美元 与发行价持平' target="_blank">
                        途牛开盘价9美元 与发行价持平</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34337' title='摩托罗拉移动裁员关闭德州Moto X手机工厂' target="_blank">
                        摩托罗拉移动裁员关闭德州Moto X手机工厂</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34105' title='唯品会股价飙升 引天猫当当京东进军闪购' target="_blank">
                        唯品会股价飙升 引天猫当当京东进军闪购</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34390' title='微信企业号必须搬走四座大山，否则只能铩羽而归！' target="_blank">
                        微信企业号必须搬走四座大山，否则只能铩羽而归！</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34234' title='完美入股盛大：一桩各怀心事的交易' target="_blank">
                        完美入股盛大：一桩各怀心事的交易</a></li></div>
                   
                
        </ol>
    </div>
</div>

</div>

</div>
            </div>
            <div class="clearfix"></div>

<footer class=" footer navbar-bottom">
<em>友情链接：</em>
    
      <a href="http://www.aiyiweb.com/" target="_blank">爱易网 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">云虚拟主机技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">云服务器技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">程序设计技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">开发网站 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">APP开发教程 </a>            
    
<br />
<script type="text/javascript">(function(){document.write(unescape('%3Cdiv id="bdcs"%3E%3C/div%3E'));var bdcs = document.createElement('script');bdcs.type = 'text/javascript';bdcs.async = true;bdcs.src = 'http://znsv.baidu.com/customer_search/api/js?sid=15239353030108964139' + '&plate_url=' + encodeURIComponent(window.location.href) + '&t=' + Math.ceil(new Date()/3600000);var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(bdcs, s);})();</script>

Copyright © 2013-2026 爱易网页 当前在线：305人　
        网站在4时23分4秒内访问总人数：65960人
    2秒前 29.97%
　<a href="https://beian.miit.gov.cn" target="_blank">粤ICP备18100884号-2 </a>
<script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
<script>LA.init({ id: "JszEmKrtpbU59dY5", ck: "JszEmKrtpbU59dY5" })</script>

</footer>

</div>
   
</body>
</html>