css3mask淡出文字

css3mask淡出文字

.p0_11wrap {
    width: 0.299rem;
    height: 7.68rem;
    overflow: hidden;
    background: url(/weiyeweiwangzhan/images/0/p0_11.png) no-repeat;
    background-size: 100%;
    background-position: 0rem 3.8rem;
    -webkit-mask: url(/weiyeweiwangzhan/images/0/p0_11zhezhao.png) no-repeat;
    -webkit-mask-size: 0.299rem 7.68rem;
    -webkit-mask-position: 0 0;
    position: absolute;
    left: 76.933%;
    top: 21.891%;
}
.p0_11warpzhezhao {
    width: 0.299rem;
    height: 7.68rem;
    background: url(/weiyeweiwangzhan/images/0/p0_11zhezhao.png);
    background-size: 0.299rem 7.68rem;
    background-position: 0rem 0rem;
    position: absolute;
    left: 76.933%;
    top: 21.891%;
}
.wenzianim1 {
    animation: wenzianim1 4s linear 1s forwards;
    -webkit-animation: wenzianim1 4s linear 1s forwards;
}
@keyframes wenzianim1 {
    0% {
        -webkit-mask-position: 0rem -8.080rem;
    }
    100% {
        -webkit-mask-position: 0rem 0rem;
    }
}
@-webkit-keyframes wenzianim1 {
    0% {
        -webkit-mask-position: 0rem -8.080rem;
    }
    100% {
        -webkit-mask-position: 0rem 0rem;
    }
}
  <div class="p0_11wrap wenzianim2">
        </div>

css3 svg路径蒙版动画

css3 svg路径蒙版动画

具体看https://www.cnblogs.com/oubenruing/p/9568954.html

还有个更好控制的写法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>{$title}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <!-- Link Swiper's CSS -->
    <include file="commonheader" />
</head>

<body>
    <include file="jiazai" />
    <include file="commonmokuai" />
    <div class="showcontainer" style="display: block;">
       <div style="width:60%; height: 7.5rem; position: absolute;left:0px;top:0px;">
        <svg width="100%" height="100%" viewBox="0,0,246,120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
     <defs>
    <mask id ="path1">
        <path id="path"  stroke="white" fill="none" stroke-width="20" d="M238,8L75.3,103.7c0,0-5.3,7.7-18,0S10.3,73,10.3,73" class="Path1"></path>
    </mask>
    </defs>
<image mask="url(#path1)" style="overflow:visible;" width="246" height="120" id="左下发光条" xlink:href="/moban/123.png">
    </image>
</svg>

      </div>
    </div>
    <script src="{$yuming}/js/TweenMax.js"></script>
    <script src="{$yuming}/js/DrawSVGPlugin.min.js"></script>
    <include file="commonfooter" />
    <script type="text/javascript">
    $(function() {
        myTween = TweenMax.fromTo("#path", 1, { drawSVG: "0%" }, { drawSVG: "100%" });
        // myTween.yoyo(true).repeat(-1);
    })
    </script>
</body>

</html>

css3 background-position手机端自适应

css3 background-position手机端自适应

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>
        Document
    </title>
    <style>
    .wrap {
        width: 1.28rem;
        height: 1.28rem;
        background: url(http://sandbox.runjs.cn/uploads/rs/155/azqeh6bj/w.png) no-repeat;
        background-size: 2.56rem 2.56rem;
        background-position: 0rem -1.3rem;
    }
    </style>
</head>

<body>
    <div class="wrap">
    </div>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
    <script>
    (function(doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            /*如果屏幕尺寸发生了变化就会立即更新*/
            recalc = function() {
                /*     var clientWidth = docEl.clientWidth;*/
                var clientWidth = parseInt($('body').width());
                if (!clientWidth) return;
                docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
                /*部分安卓手机计算rem有误差 如果有误差 需要重新设置font-size 从而计算出正确的值*/
                var div = document.createElement('div');
                div.style.width = '1.4rem';
                div.style.height = '0';
                document.body.appendChild(div);
                var ideal = 1.4 * 20 * (clientWidth / 320);
                var rem = div.clientWidth;
                var scale = rem / ideal;
                /*因为css获取属性值只保留整数 */
                if (scale > 1.05 || scale < 0.95) {
                    docEl.style.fontSize = 20 * (clientWidth / 320) / scale + 'px';
                    document.body.removeChild(div);
                }
            };
        if (!doc.addEventListener) return;
        /*如果窗口改变了大小 手机旋转了都会重新修改font-size属性*/
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
    </script>
</body>

</html>

ps:先改background-size 确定好大小

css3 preserve-3d 的理解

css3 preserve-3d 的理解

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>转换模块-正方体</title>
    <style>
    * {
        margin: 0;
        padding: 0;
        /*去除默认边距*/
    }

    body,
    html {
        width: 100%;
        height: 100%;
    }

    .wrap3d {
        width: 100%;
        height: 100%;
        position: relative;
        /*设置摄像机离目标物体距离 让3D效果看起来更逼真*/
        transform: perspective(400px);
        -webkit-transform: perspective(400px);
        /*设置为3d空间*/
        transform-style: preserve-3d;   

        position: relative;

    }
    .hongmian{
        width:30%;
        height:22rem;
        position: absolute;
        left:30%;
        top:2rem;
        background: #F00;
        transform: rotateX(90deg) translateZ(-20px);
        -webkit-transform: rotateX(4deg) translateZ(-20px);   
    }
    
</style>
</head>

<body>
   <div class="wrap3d">
    <div class="hongmian"></div>
</div>
</body>

</html>

css3 mask遮罩动画(照明灯效果)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap{
    position:absolute;
    width: 400px;
    border:1px solid black;
}
#mask{
    height: 300px;
    background:url(http://sandbox.runjs.cn/uploads/rs/142/wat3wtnz/dongzhi.jpg) lightblue;
    -webkit-mask:  url(http://sandbox.runjs.cn/uploads/rs/142/wat3wtnz/mask.png) no-repeat;
      -webkit-mask-size:30px 20px;
    /*animation: 2s maskPosition infinite alternate ;*/
}

 @keyframes maskPosition{
    0%{-webkit-mask-position:0 0;}
    100%{-webkit-mask-position:1rem 1rem;}
} 
</style>
</head>
<body>
<div class="wrap">
    <div id="mask"></div>    
</div>
<script>

</script>
</body>
</html>

ps:

1 -webkit-mask-position 这个建议用rem来计算 不要用百分比计算 百分比不是按照图片的宽度来计算的

2 -webkit-mask-size 百分比是按照外面容器计算的 大小设置无限制的 (不设置为默认大小)

3 渐变属性不能做动画

4 实现照明灯 可以再参考http://newmiracle.cn/?p=1833这个

5 蒙版图片非透明地方显示 透明不显示

css3自定义移动端滚动条

css3自定义移动端滚动条

/*定义滚动条宽 高度是根据内容设置的高度决定的*/
::-webkit-scrollbar
{
    width: 5px;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 5px;
    background-color: #fe023f;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #FFF;
}

css 完美垂直居中解决方案兼容ie8以上等其他浏览器

css 完美垂直居中解决方案兼容ie8以上等其他浏览器

<!DOCTYPE html>
<html>
<head>
    <title>DIV水平垂直居中 </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        #outer {
            display:table;
            height:400px;
            #position:relative;
            overflow:hidden;
        }
        #middle {
            width:300px;
            height: 400px;;
            display:table-cell;
            vertical-align:middle;
            #position:absolute;
            #top:50%;
            background: #F0E68C;
        }
        #inner {
            #position:relative;
            #top:-50%;

        }
    </style>
</head>
<body>
<div id="outer">
    <div id="middle">
        <div id="inner">
           水平居中</br>
           水平居中</br>
           水平居中</br>
           水平居中</br>
        </div>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
    //显示浏览器版本
    document.getElementById('ver').innerHTML = navigator.userAgent;
</script>

移动端的写法

<!DOCTYPE html>
<html>
<head>
    <title>DIV水平垂直居中 </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
   
        #middle {
            width:30%;
            height: 10rem;
            display:table-cell;
            vertical-align:middle;
            background: #F0E68C;
        }
   
    </style>
</head>
<body>
    <div id="middle">
           水平居中</br>
           水平居中</br>
           水平居中</br>
           水平居中</br>
    </div>
</body>
</html>

ps:不能用绝对定位否则失效(可以加到外面一层)

还有个绝对定位居中的方法

.element {
    width: 600px; height: 400px;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);    /* 50%为自身尺寸的一半 */
}