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

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

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

以下是程序代码

<!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/34403' title='罗永浩工匠形象坍塌,锤子产能再跳水逃离用户超两成' target="_blank">
                        罗永浩工匠形象坍塌,锤子产能再跳水逃离用户超两成</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/10815' title='中移动业绩增长趋缓 目光转向海外市场' target="_blank">
                        中移动业绩增长趋缓 目光转向海外市场</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34333' title='阿里国际化再落子：2.49亿美元投资新加坡邮政' target="_blank">
                        阿里国际化再落子：2.49亿美元投资新加坡邮政</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34191' title='美国政府关门可能影响去哪儿等公司IPO' target="_blank">
                        美国政府关门可能影响去哪儿等公司IPO</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34247' title='同为70前后人，马云为什么总是像外星人那么瘦' target="_blank">
                        同为70前后人，马云为什么总是像外星人那么瘦</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34245' title='568倍PE，“长跑者”亚马逊的高估值之谜' target="_blank">
                        568倍PE，“长跑者”亚马逊的高估值之谜</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34417' title='迅雷高管解读财报：收购快盘可快速融入小米' target="_blank">
                        迅雷高管解读财报：收购快盘可快速融入小米</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/6901' title='诺基亚再缩阵线 封锁上海旗舰店全力蜕变' target="_blank">
                        诺基亚再缩阵线 封锁上海旗舰店全力蜕变</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34406' 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 爱易网页 当前在线：199人　
        网站在4时16分37秒内访问总人数：26962人
    当前 22.41%
　<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>