多说360度旋转css代码

作者:matrix 发布时间:2014年2月6日星期四 分类:Wordpress

多次看到多说评论的头像样式,鼠标悬停的时候360度旋转~

css

#ds-avatar{  
    width:54px;height:54px; /*设置图像的长和宽*/  
    border-radius: 27px;/*设置图像圆角效果,在这里我直接设置了超过width/2的像素,即为圆形了*/  
    -webkit-border-radius: 27px;/*圆角效果:兼容webkit浏览器*/  
    -moz-border-radius:27px;  
    box-shadow: inset 0 -1px 0 #3333sf;/*设置图像阴影效果*/  
    -webkit-box-shadow: inset 0 -1px 0 #3333sf;  
    -webkit-transition: 0.4s;     
    -webkit-transition: -webkit-transform 0.4s ease-out;  
    transition: transform 0.4s ease-out;/*变化时间设置为0.4秒(变化动作即为下面的图像旋转360读)*/  
        -moz-transition: -moz-transform 0.4s ease-out;  
        }  

#ds-avatar:hover{/*设置鼠标悬浮在头像时的css样式*/  
    box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);  
    -webkit-box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);  
    transform: rotateZ(360deg);/*图像旋转360度*/  
    -webkit-transform: rotateZ(360deg);  
        -moz-transform: rotateZ(360deg);  
    }  

说明:#ds-avatar为头像图片的样式ID。

来自:http://ifoouucode.duapp.com/37

易迅网CSS3 Gradient渐变特效-鼠标滑过出现白色斜线动画

作者:matrix 发布时间:2013年10月16日星期三 分类:Wordpress 兼容并蓄 零零星星

看到易迅网的右侧、下方商品都有的一种效果,原本以为是JS什么的,找了大半天才知道是css3的效果。

DEMO下载:

http://www.400gb.com/file/28915416

http://pan.baidu.com/share/link?shareid=3180343884&uk=3238236832

关键的css代码:

@-webkit-keyframes aniBlink{from{left:-60px}to{left:550px}}/*aniBlink动画执行区域*/  
.TU a:before{content:'';position:absolute;width:30px;height:200px;/*aniBlink动画斜线宽度和高度*/  
top:0;left:-60px;/*aniBlink动画斜线初始停留位置*/  
overflow:hidden;  
background:-webkit-gradient(linear,left top,rightright top,color-stop(0%,rgba(255,255,255,0)),  
color-stop(50%,rgba(255,255,255,0.4)),color-stop(100%,rgba(255,255,255,0)));  
/*linear(线性渐变)*/  
-webkit-transform:skewX(-25deg);transform:skewX(-25deg)}/*skewX:定义一个X轴的2D 倾斜*/  
.TU  :hover a:before{-webkit-animation:aniBlink 0.3s ease-out forwards} /*aniBlink动画执行的时间0.3s*/  

说明:.TU为包含图片class(任意命名)的外面一层class(命名为.TU)。

例如:

 <div class="TU">  
<div class="y">  
 <a href="https://www.hhtjim.com" target="_blank" title="易迅网CSS3 Gradient渐变特效-鼠标滑过出现白色斜线动画 - HHTjim.Com" >  
<img src="https://static.hhtjim.com/wp-content/uploads/2015/bcsfile/20130326192035.jpg" width="505" height="134"></a>  
</div></div>  

aniBlink为动画名称。如要修改,确保第一和第九行相同。

空间坐标系是以窗口右上角为原点,从左到右为X轴正方向,从上到下为Y轴正方向,垂直屏幕向外为Z轴正方向进行建系。

基本上都注释了。还有其他不知道的可参考度娘。

效果,就那中间的白条东跑西跑的:chrome、safari、firefox都看到效果,IE10不行!其余须自测。

图片4800-易迅网CSS3 Gradient渐变特效-鼠标滑过出现白色斜线动画

参考:

http://www.w3cplus.com/content/css3-gradient

http://www.mxria.com/css3/c20120121810.htm

CSS3效果在线编辑工具

添加CSS3图片呼吸灯特效-鼠标悬浮还有放大效果

作者:matrix 发布时间:2013年10月13日星期日 分类:Wordpress 零零星星

测试是用于NGRO主题的首页文章列表上,配合起之前的窗口小列表 不错~

带8px白色边框鼠标停留后还有放大效果,如图:

图片4804-添加CSS3图片呼吸灯特效-鼠标悬浮还有放大效果

.Indexpost img {  
    padding: 8px;  
    background-color: #FFF;  
    box-shadow: 0px 0px 18px rgba(0,0,0,.4);  
    -webkit-transition: all ease .3s;  
    transition: all ease .3s  
}  

.Indexpost img {  
margin-right: 10px;  
    width:140px;  
    height:100px;  
    overflow:hidden;  
float: left;  
}  
.Indexpost img:hover {  
    -webkit-transform: scale(1.05);  
    transform: scale(1.05);  
    box-shadow: 0px 0px 18px rgba(0,0,0,.5);  
}  

说明:这是笔者自己主题的css代码。

6行.3s为放大过程的时间0.3秒

17行1.05为放大的值。

其他的参数我也不清楚,不管谦虚还是其他的来说我很菜。

我这原本首页样式是post的,改成.Indexpost样式也为了独立修改的方便。大致样式跟.post一样,只是修改了.Indexpost img。

如果你也感觉到此效果不错,不嫌弃的话可以参考我这的css代码。

建议参考:图片呼吸灯,CSS3图片阴影+鼠标移上放大图片

刷新页面后让WordPress背景随机切换

作者:matrix 发布时间:2013年10月10日星期四 分类:Wordpress 零零星星

只需要几行php代码就可以让WordPress主题背景随机切换,每次刷新切换不同的图片。这需要按F5刷新页面或者到新页面时背景才会自动变换。

更新的>>用BACKSTRETCH实现定时切换背景 可以实现定时自动切换背景。

用BACKSTRETCH实现定时切换背景

<?php $random_image = rand(1, 5); ?>  
<div id="div1">  
    <img src="<?php bloginfo('stylesheet_directory');?>/bg/<?php echo $random_image; ?>.jpg"/>  
</div>  

说明:

1行中的5代表有5张图片可供切换

2行中div1为背景css样式id 阅读剩余部分 »

用BACKSTRETCH实现定时自动切换背景

作者:matrix 发布时间:2013年10月9日星期三 分类:Wordpress 兼容并蓄 零零星星

图片4808-用BACKSTRETCH实现定时自动切换背景

jquery-backstretch可以实现之前>>刷新页面后让WordPress背景随机切换  不能到达的动态切换背景功能。 用jquery-backstretch就算你不按F5刷新页面背景也可以自动切换,带有淡入淡出的缓慢加载那种效果,很好看。

github地址:https://github.com/srobbin/jquery-backstretch

官网:http://srobbin.com/jquery-plugins/backstretch/

目前最新版本 Backstretch - v2.0.4 - 2013-06-19 阅读剩余部分 »

给wordpress添加title属性的鼠标气泡悬浮窗

作者:matrix 发布时间:2013年9月26日星期四 分类:Wordpress 兼容并蓄

鼠标停留在有title属性上的时候或有提示,但是默认的样式中有觉得不可观的地方。利用js即可实现修改。

NGRO的效果演示:

NGRO的效果演示

css 阅读剩余部分 »

WordPress整合Highslide JS 灯箱效果

作者:matrix 发布时间:2013年9月25日星期三 分类:Wordpress 兼容并蓄

更换主题-七彩之家BLUE2.0以及后续的修改 有提到整合auto-highslide灯箱的功能,这次更加完善。

DEMO:http://pan.baidu.com/share/link?shareid=4020387527&uk=3238236832

步骤:

1.将下面代码加到主题的functions.php中,方法你懂得。

<?php  
    //////////////START wp highslide picture code  /////////////  
add_filter('the_content', 'hlHighSlide_replace', '99');  

    add_action('wp_head', 'highslide_head');  
    function highslide_head()  
        {  
        $hlHighslide_wp_url=get_bloginfo('template_url').'/';  
        $defaults_javascript =    
        "<link href='{$hlHighslide_wp_url}highslide/highslide.css' rel='stylesheet' type='text/css' />";  
     echo $defaults_javascript;  
        }  

    add_action('wp_footer', 'highslide_footer');  
    function highslide_footer()  
    {  
    $hlHighslide_wp_url=get_bloginfo('template_url').'/';  
    $defaults_javascript =    
    "\n\t<script type='text/javascript' src='{$hlHighslide_wp_url}highslide/highslide.js'></script> 
    <script type='text/javascript'> 
hs.graphicsDir = '{$hlHighslide_wp_url}highslide/graphics/'; 
hs.showCredits = false; 
hs.creditsPosition = 'bottom left'; 
hs.outlineType = 'custom'; 
hs.dimmingOpacity = 0.3; 
hs.fadeInOut = true; 
hs.align = 'center'; 
hs.captionEval = 'this.thumb.alt'; 


// Add the slideshow controller 
hs.addSlideshow({ 
    slideshowGroup: 'group1', 
    interval: 5000, 
    repeat: true, 
    useControls: true, 
    fixedControls: 'fit', 
    overlayOptions: { 
        opacity: 0.75, 
        position: 'bottom center', 
        offsetX: 0, 
        offsetY: -10, 
        hideOnMouseOut: true 
    } 
}); 

// Chinese simplified language strings 
hs.lang = { 
    cssDirection: 'ltr', 
    loadingText: '载入中...', 
    loadingTitle: '正在载入,点击取消', 
    focusTitle: '置于最前', 
    fullExpandTitle: '原始尺寸', 

    previousText: '上一张', 
    nextText: '下一张', 
    moveText: '移动', 
    closeText: '关闭', 
    closeTitle: '关闭 (退出键)', 
    resizeTitle: '调整尺寸', 
    playText: '播放', 
    playTitle: '播放幻灯片 (空格键)', 
    pauseText: '暂停', 
    pauseTitle: '暂停幻灯片 (空格键)', 
    previousTitle: '上一张 (左方向键)', 
    nextTitle: '下一张 (右方向键)', 
    moveTitle: '移动', 
    fullExpandText: '完整尺寸', 
    number: 'Image %1 of %2', 
    restoreTitle: '单击关闭图片,单击不放可拖动。使用方向键切换图片。' 
}; 

// gallery config object 
var config1 = { 
    slideshowGroup: 'group1', 
    numberPosition: 'caption', 
    transitions: ['expand', 'crossfade'] 
}; 
         </script>";  
 echo $defaults_javascript;  
 }  

//add onclick event   
function add_onclick_replace ($content)  
{   
$pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>(.*?)<\/a>/i";  
$replacement = '<a$1href=$2$3.$4$5 class="highslide"  onclick="return hs.expand(this, config1 )" $6>$7 </a>';  
$content = preg_replace($pattern, $replacement, $content);  
return $content;  
}  

function hlHighSlide_replace($content)  
{  
        global $post;  
        $defaults = array();  
        $defaults['quicktags'] = 'y';  
        $defaults['alt'] = 'Enter ALT Tag Description';  
        $defaults['title'] = 'Enter Caption Text';  
        $defaults['thumbid'] = 'thumb1';  
        $defaults['show_caption'] = 'y';  
        $defaults['show_close'] = 'y';  
        $content=add_onclick_replace($content);  
        $HSVars = array("SRC", "ALT", "TITLE", "WIDTH", "HEIGHT","THUMBID");  
        $HSVals = array($defaults['href'], $defaults['src'], $defaults['alt'], $defaults['title'], $defaults['thumbid']);  
        preg_match_all ('!<img([^>]*)[ ]*[/]{1}>!i', $content, $matches);  
        $HSStrings = $matches[0];  
        $HSAttributes = $matches[1];  
        for ($i = 0; $i < count($HSAttributes); $i++)  
        { preg_match_all('!(src|alt|title|width|height|class)="([^"]*)"!i',$HSAttributes[$i],$matches); 
          $HSSetVars = $HSSetVals = array(); 
          for ($j = 0; $j < count($matches[1]); $j++) 
            { $HSSetVars[$j] = strtoupper($matches[1][$j]); 
              $HSSetVals[$j] = $matches[2][$j];} 
        } 
        $HSClose = <<<EOT 
                <a href="#" onclick="hs.close(this);return false;" class="highslide-close"  title="关闭">Close</a>   
EOT; 
                $HSCaption = <<<EOT 
                <div class='highslide-caption' id='caption-for-%THUMBID%'> 
                {$HSPrvNextLinks}            
                {$HSClose}   
                <div style="clear:both">%TITLE%</div> 
                </div> 
EOT; 
            $HSCode = <<<EOT 
<img id="%THUMBID%" src="%SRC%" alt="%ALT%" title="%TITLE%" width="%WIDTH%"  height="%HEIGHT%" />{$HSCaption}  
EOT;  
          $content = str_replace($HSStrings[$i], $HSCode, $content);  
        return $content;  
    }  



    /////////////////  
?>  

说明:87 行的onclick="return hs.expand(this, config1 )"开启了相册幻灯片功能,如果需要关闭可改为onclick="return hs.expand(this)"

2.下载素材文件,解压到主题目录

下载:

http://www.400gb.com/file/30266321

http://pan.baidu.com/share/link?shareid=3945557249&uk=3238236832

3.最后完工。

效果:

图片4829-WordPress整合Highslide JS 灯箱效果

使用的Highslide JS 在线编辑,状态保存:

http://highslide.com/editor/?config=%7B%22lang%22%3A+%22zh-s%22,+%22preset%22%3A+%22html-white%22,+%22applyDimming%22%3A+true,+%22dimmingOpacity%22%3A+%220.3%22,+%22hideThumbOnExpand%22%3A+false,+%22alignment%22%3A+%22center%22,+%22captionSource%22%3A+%22thumb.alt%22,+%22captionStyles%22%3A+%22%5Ctpadding%3A+2px;%22,+%22headingSource%22%3A+%22thumb.alt%22,+%22creditsPosition%22%3A+%22bottom+left%22,+%22enableGallery%22%3A+true,+%22numberPosition%22%3A+%22caption%22,+%22enableThumbstrip%22%3A+false,+%22thumbstripMode%22%3A+%22float%22,+%22thumbstripPosition%22%3A+%22below%22,+%22thumbstripRelativeTo%22%3A+%22image%22,+%22thumbstripSize%22%3A+%22280%22,+%22slideshowRepeat%22%3A+true,+%22htmlControlsLayout%22%3A+%22icon-text%22,+%22useTitleBar%22%3A+false,+%22htmlHeadingSource%22%3A+%22a.title%22%7D

参考:http://themeidea.com/highslide.html

Highslide js 在线编辑 http://justcoding.iteye.com/blog/595145

http://highslide.com/editor/

添加鼠标滑过图片闪烁的js特效-jquery-opacity-rollover

作者:matrix 发布时间:2013年9月20日星期五 分类:Wordpress 兼容并蓄

图片4842-添加鼠标滑过图片闪烁的js特效-jquery-opacity-rollover

onamae.com的25号免费域名没抢到,倒是看到onamae上的一个图片闪光特效好奇,这就扒了。

看头部的meta写的jquery-opacity-rollover.js文件,不知道这是个啥子插件上的东东。

作者:http://h2ham.seesaa.net

实际效果,文字说明:

假设图片被指定加载此js特效阅读剩余部分 »