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

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

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

以下是程序代码

<!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/34292' title='中电信率先推移动转售业务 中下旬批量上市' target="_blank">
                        中电信率先推移动转售业务 中下旬批量上市</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34122' title='墨迹天气：产品创新以攻为守方能对抗巨头' target="_blank">
                        墨迹天气：产品创新以攻为守方能对抗巨头</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/675' title='苹果CEO抱歉解读：是战略而非“屈服”' target="_blank">
                        苹果CEO抱歉解读：是战略而非“屈服”</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34157' title='传三星为赢得新兴市场：推廉价版Note3' target="_blank">
                        传三星为赢得新兴市场：推廉价版Note3</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34398' title='北京电信推“0月租卡”，同网通话免费' target="_blank">
                        北京电信推“0月租卡”，同网通话免费</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34149' title='地图导航骤起杀机 百度高德重新定义商业模式' target="_blank">
                        地图导航骤起杀机 百度高德重新定义商业模式</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/10806' title='微软谷歌高层访韩面前：忌惮三星的崛起 ' target="_blank">
                        微软谷歌高层访韩面前：忌惮三星的崛起 </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/34134' title='中移动推动感地带3G网聊卡 火拼微信沃卡' target="_blank">
                        中移动推动感地带3G网聊卡 火拼微信沃卡</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 爱易网页 当前在线：501人　
        网站在15时22分7秒内访问总人数：151388人
    当前 27.19%
　<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>