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

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

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

以下是程序代码

<!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/34220' title='虚拟运营商流量不清零吸引用户 盈利待明' target="_blank">
                        虚拟运营商流量不清零吸引用户 盈利待明</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34357' title='国美痛批网购七宗罪 用短暂盈利输了未来' target="_blank">
                        国美痛批网购七宗罪 用短暂盈利输了未来</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34367' title='马云自称在美国曾被绑票' target="_blank">
                        马云自称在美国曾被绑票</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34102' title='中国雅虎邮箱今日关停 由盛及衰的背后' target="_blank">
                        中国雅虎邮箱今日关停 由盛及衰的背后</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34282' 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>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/6894' title='微软提示XP只剩365天寿命：用户被绑架？' target="_blank">
                        微软提示XP只剩365天寿命：用户被绑架？</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/10825' title='9158屌丝逆袭 从在线“夜总会”转型KTV' target="_blank">
                        9158屌丝逆袭 从在线“夜总会”转型KTV</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34388' 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 爱易网页 当前在线：4024人　
        网站在22时47分48秒内访问总人数：573258人
    2秒前 25.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>