分享各种网络资源
是我乃至整个互联网的精髓所在
最新消息:开启被动注册模式,详情点击这里,同时接小单,QQ:330733312
 您目前所在位置: 站点首页 » WordPress » WordPress 代码 » WordPress通过CSS3添加图片效果
  • +
  • 3
  • WordPress通过CSS3添加图片效果

    WordPress通过CSS3添加图片效果-BanYuner

    现在每天就在不断的折腾这个主题,这个主题说实话,从我开始安装就没有停止过折腾了,每天折腾一点,每天折腾一点,时间长了,感觉主题都变动了,不过没事,生命在于折腾。

    好吧,不废话了,直接将代码附上吧,一共九段代码,大家自己觉得什么代码有效果的话就使用起来吧。

    内边框 Inset Border

    body > div
    {                    
    width:483px;
    height:298px;
    margin:50px auto;
    background:#676470;
    color:#fff;            
    font-family:Lato;
    font-weight:900;
    font-size:3.4em;            
    text-align:center;
    line-height:298px;           
    transition:all 0.3s ease;            
    }
    .border:hover
    {
    box-shadow: inset 0 0 0 25px #53a7ea;
    }
    

    颜色渐变 color

    body > div {
    margin: 50px auto;
    width: 483px;
    height: 298px;
    background: #676470;
    color: #fff;
    font-family: Lato;
    font-weight: 900;
    font-size: 3.4em;
    text-align: center;
    line-height: 298px;
    transition: all 0.3s ease;
    }
    .color:hover {
    background: #53a7ea;
    cursor: pointer;
    }
    

    淡入 fade in

    body > div {
    margin: 50px auto;
    width: 483px;
    height: 298px;
    background: #676470;
    color: #fff;
    font-family: Lato;
    font-weight: 900;
    font-size: 3.4em;
    text-align: center;
    line-height: 298px;
    transition: all 0.3s;
    }
    .fade {
    opacity: 0.5;
    }
    .fade:hover {
    opacity: 1;
    }
    

    放大 Grow

    body > div {
    margin: 50px auto;
    width: 483px;
    height: 298px;
    background: #676470;
    color: #fff;
    font-family: Lato;
    font-weight: 900;
    font-size: 3.4em;
    text-align: center;
    line-height: 298px;
    transition: all 0.3s ease;
    }
    .grow:hover {
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
    }
    

    旋转 rotate

    body > div {
    margin: 80px auto;
    width: 283px;
    height: 198px;
    background: #676470;
    color: #fff;
    font-family: Lato;
    font-weight: 900;
    font-size: 1.4em;
    text-align: center;
    line-height: 198px;
    transition: all 0.3s ease;
    }
    .rotate:hover {
    -webkit-transform: rotateZ(-30deg);
    -ms-transform: rotateZ(-30deg);
    transform: rotateZ(-30deg);
    }
    

    3D阴影 3D shadow

    body > div {
    margin: 50px auto;
    width: 483px;
    height: 298px;
    background: #676470;
    color: #fff;
    font-family: Lato;
    font-weight: 900;
    font-size: 3.4em;
    text-align: center;
    line-height: 298px;
    transition: all 0.3s ease;
    }
    .threed:hover {
    box-shadow: 1px 1px #53a7ea,  2px 2px #53a7ea,  3px 3px #53a7ea;
    -webkit-transform: translateX(-3px);
    transform: translateX(-3px);
    }
    

    收缩 Shrink

    body > div {
    margin: 50px auto;
    width: 483px;
    height: 298px;
    background: #676470;
    color: #fff;
    font-family: Lato;
    font-weight: 900;
    font-size: 3.4em;
    text-align: center;
    line-height: 298px;
    transition: all 0.3s ease;
    }
    .shrink:hover {
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
    }
    

    摇摆 swing

    body > div {
    margin: 50px auto;
    width: 483px;
    height: 298px;
    background: #676470;
    color: #fff;
    font-family: Lato;
    font-weight: 900;
    font-size: 3.4em;
    text-align: center;
    line-height: 298px;
    transition: all 0.3s ease;
    }
    @-webkit-keyframes 
    swing {
    15% {
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
    }
    30% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
    }
    50% {
    -webkit-transform: translateX(3px);
    transform: translateX(3px);
    }
    65% {
    -webkit-transform: translateX(-3px);
    transform: translateX(-3px);
    }
    80% {
    -webkit-transform: translateX(2px);
    transform: translateX(2px);
    }
    100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    }
    }
    @keyframes 
    swing {
    15% {
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
    }
    30% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
    }
    50% {
    -webkit-transform: translateX(3px);
    transform: translateX(3px);
    }
    65% {
    -webkit-transform: translateX(-3px);
    transform: translateX(-3px);
    }
    80% {
    -webkit-transform: translateX(2px);
    transform: translateX(2px);
    }
    100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    }
    }
    .swing:hover {
    -webkit-animation: swing 1s ease;
    animation: swing 1s ease;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    }
    

    方形变圆形 Square to Circle

    body > div {
    margin: 50px auto;
    width: 483px;
    height: 298px;
    background: #676470;
    color: #fff;
    font-family: Lato;
    font-weight: 900;
    font-size: 3.4em;
    text-align: center;
    line-height: 298px;
    transition: all 0.3s ease;
    }
    .circle:hover {
    border-radius: 50%;
    }
    

    上面的代码大家可以适当作为调整,要是有不懂的可以直接百度吧。

    关注我们 打赏 分享此文

    微信扫码,关注我们

    扫码,支持我

    WordPress通过CSS3添加图片效果

    支付宝(点击图片切换)

    扫码,支持我

    WordPress通过CSS3添加图片效果

    微信(点击图片切换)

    扫码,手机看

    WordPress通过CSS3添加图片效果
    匿名

    个人评价:┃草根博主┃站点无技术含量┃文章内容不够吸引人┃转载内容随处可见┃资源均来自网络┃分享是我的宗旨,也是这个站点存在意义,分享的东西你现在可能不需要,但是我相信只要在某个时间你需要的时候能在这里找到,那么我就是成功的

    相关推荐

    • WordPress 获取文章内所有图片

      WordPress 获取文章内所有图片

      今天无意中在贴吧看到了一个人发布相关的帖子,我看了一下代码,发现关键在于正则,毕竟是一个非常强大的函数,那么看了代码之后,我个人就开始百度了...

      点击查看
    • WordPress 分类描述添加可视化编辑模式

      WordPress 分类描述添加可视化编辑模式

      可视化编辑模式一直是很多人喜欢使用的,但是我个人方面还是喜欢传统的 html 模式,不是别的,主要是自己写的东西通过代码出现的就是自己的,而...

      点击查看
    • 6 款 WordPress 缓存插件对比测试

      6 款 WordPress 缓存插件对比测试

      缓存插件我相信每个站点几乎都是在使用的,插件的原理并不是能提高带宽也不是说能提高页面加载速度等等,仅仅是为了降低服务器的压力,当人群数量大量...

      点击查看
    WordPress通过CSS3添加图片效果
    4 + 9 =
    1. 2楼
      一曲长歌辞烟雨
      最后评论时间:2016/09/06 21:11
      来自天朝的朋友 火狐浏览器 Windows 10 内蒙古呼和浩特市 中国电信云计算中心
      为什么都没有预览或者演示呢?这样仅仅看代码看不出结果,也就感觉不到文章的价值了 :roll:
      一曲长歌辞烟雨 10个月前 (09-06)回复
      • 帅气小琦琦
        最后评论时间:2017/06/27 23:06
        来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 电信
        @一曲长歌辞烟雨 这个文章是网络上面收集过来的,所以没有展示图,确实是有点看不下去。将就一下吧,毕竟自己折腾比什么都好玩
        帅气小琦琦    16小时前回复
    2. 1楼
      楚书业
      最后评论时间:2016/10/01 10:16
      来自天朝的朋友 QQ浏览器 Windows 10 福建省 移动
      这个可以收藏!
      楚书业 9个月前 (10-01)回复
      • 帅气小琦琦
        最后评论时间:2017/06/27 23:06
        来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 电信
        @楚书业 嗯嗯 我个人觉得还是比较有效果的 但是我使用了一下就觉得有点多余了
        帅气小琦琦    16小时前回复