分享各种网络资源
是我乃至整个互联网的精髓所在
 您目前所在位置: 站点首页 » WordPress » 代码 » WordPress通过CSS3添加图片效果
+

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搜索只显示标题中含有关键字的文章

    今天在知更鸟博客上面看到了这篇文章,整体来说,这个功能在某些方面还是比较有用的,如果说通过标题中的关键字来寻找文章的 ...

    点击查看
  • 如何给WordPress站点添加wow.js效果

    如何给WordPress站点添加wow.js效果

    今天折腾了以下这个东西,为什么会折腾这个东西呢,因为之前经常逛知更鸟博客,后来一次更新之后,发现知更鸟博客多了一种加 ...

    点击查看
  • 如何在WordPress评论中显示更多HTML标签

    如何在WordPress评论中显示更多HTML标签

    我见过很多站点,都可以在评论里面添加各种标签,什么自己加粗,然后添加图片,添加链接等等,当时我个人觉得可能并不适合我 ...

    点击查看
  • WordPress显示一年前当天的文章

    WordPress显示一年前当天的文章

    最开始看到这个功能是在112博客,那个时候看到这个功能的第一感觉可能就是觉得,这个功能不是很实用,可能会增加SQL语句的查 ...

    点击查看
  • 给你的WordPress站点添加一个打印按钮

    给你的WordPress站点添加一个打印按钮

    这个功能很久之前就已经在知更鸟博客上面看到了,但是一直没有想过是什么原理,但是今天无意间发现了一个方法,目前觉得还是 ...

    点击查看
  • WordPress显示一周热评

    WordPress显示一周热评

    WordPress站点如何显示一周热评,我相信还是有很多人都想要知道的,那么这里就简单的说说实现方法了。

    点击查看
  • WordPress 限定显示评论者链接的输出

    WordPress 限定显示评论者链接的输出

    最近从bigfa的相关站点看到了这个更新内容,我个人觉得还是很有用的,对于一些广告用户还是有一定的作用的,毕竟有些时候, ...

    点击查看
  • WordPress文章段落间插入广告

    WordPress文章段落间插入广告

    很久之前就已经在留意这个功能了,但是一直没有找到相关的解决办法,今天我算是找到了这个相关代码。使用这个功能对于我们宣 ...

    点击查看
  • 最轻便的复制页面内容到剪切板的JS:clipboard.js

    最轻便的复制页面内容到剪切板的JS:clipboard.js

    今天早些时候在水煮鱼博客看到了这篇文章,我一开始是想要用到代码方面的,毕竟代码很多时候都是直接复制编辑的,但是后来想 ...

    点击查看
  • WordPress前台显示站点有多少注册用户

    WordPress前台显示站点有多少注册用户

    虽然我的站点目前已经关闭了注册,所有已经注册过的用户已经清理完毕了,这里说声抱歉。那么今天这个文章就是给大家一个方法 ...

    点击查看
  • WordPress添加一个底部漂浮栏

    WordPress添加一个底部漂浮栏

    站点底部添加一个通知栏的作用是起到一个通知或者说增加PV的作用,但是很多时候我们都知道,这种通知可能被人觉得很反感,但 ...

    点击查看

  目前有 4 条评论 其中:访客: 2 条, 博主: 2 条

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