zoukankan
html css js c++ java
用于WebKit的CSS诀窍图片版
原文来自于这:
http://www.qianduan.net/webkitu002639s-css-know-how-for.html
只是把图片还原了一下:
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <title>用于WebKit的CSS诀窍</title> <style type="text/css"> *{ margin:0; padding:0;} body{font:12px/2 arial; background:#fff;} img{ display:block;} .a{-webkit-transform:rotate(5deg);-webkit-box-shadow:10px 10px 5px #888;} .b{-webkit-transform:scale(0.8);} .b:hover{-webkit-transform:scale(1);} .img_wrap img{-webkit-transform:opacity 1s ease-in-out;} .c, .img_wrap:hover .d{ opacity:1.0;} .img_wrap:hover .c, .d{ opacity:0;} .col{-webkit-column-count:3;-webkit-column-gap:25px;-moz-column-count:3;-moz-column-gap:25px;} .col p{ height:300px;} #boxes div { border: 2px solid black; padding: 10px; margin:5px; 200px; text-align:center; background:#eee; } #box1{z-index:100;position:absolute;top:5px;left:5px;100px;height:250px;padding:5px;-webkit-border-radius:10px;border:2px solid black;background:#dddddd;z-index:200;} #slider{z-index:100;position:absolute;top:30px;left:5px;height:200px;90px;padding-top:10px;padding-left:15px;-webkit-border-radius:10px;border:1px solid black;background:#eeeeee;-webkit-transition:-webkit-transform 0.5s ease-in;} </style> </head> <body> <img class="a" src="http://i5.vanclimg.com/users/18/20120814/focus_tz_120815.jpg" alt="" /> <img class="b" src="http://i5.vanclimg.com/users/18/20120810/focus_xb_120810.jpg" alt="" /> <div class="img_wrap"> <img class="c" style="position:absolute;" src="http://i5.vanclimg.com/users/18/20120810/focus_xb_120810.jpg" alt="" /> <img class="d" src="http://i2.vanclimg.com/users/18/20120809/focus_nz_120809.jpg" alt="" /> </div> <div class="col"> <p>column A</p> <p>column B</p> <p>column C</p> </div> <div id="boxes"> <div style="-webkit-border-radius:15px;"> All sides </div> <div style="-webkit-border-bottom-left-radius:15px;-webkit-border-top-right-radius:15px;"> Opposite corners </div> <div style="-webkit-border-top-left-radius:15px;-webkit-border-top-right-radius:15px;"> Top </div> <div style="-webkit-border-top-right-radius:15px;-webkit-border-bottom-right-radius:15px;"> Side </div> </div> <input type="range" style="-webkit-appearance:slider-horizontal;" /><br/><br/> <button style="-webkit-appearance:button;200px;height:30px;">gradient button</button><br/><br/> <button style="-webkit-appearance:push-button;200px;">aqua button</button><br/><br/> <input type="text" style="-webkit-appearance:searchfield;" value="kitten" /></input><br/> <script type="text/javascript"> function popout() { document.getElementById('slider').style.webkitTransform = 'translate(105px,0)'; } </script><div id="slider"> Slider<br/>Content </div> <div id="box1"> <a href="javascript:popout();">Popout</a> </div> </body> </html>
运行代码
查看全文
相关阅读:
启动VMware出现报错:The VMware Authorization Service is not running
CentOS8安装SQLServer2019
CentOS8安装Tomcat
CentOS8安装java环境
手把手0基础Centos下安装与部署paddleOcr 教程
redis反向代理docker容器中的rabbit mq服务
MQTT 4 ——MQTT的Spring Mvc 配置接收字节流数据
MQTT 3 ——MQTT与Spring Mvc整合
MQTT 2——服务端安装与客户端测试
MQTT 1——物联网集成项目技术选型与说明
原文地址:https://www.cnblogs.com/jikey/p/2639630.html
最新文章
vim 操作命令大全(转)
EF使用笔记
解决Elasticsearch问题的一些心得体会
Centos 7 systemctl和防火墙firewalld命令
最优化算法:BFGS算法全称和L-BFGS算法全称
HyperV下安装Centos 7全屏显示方法
C#实现谷歌翻译API
卷积神经网络(CNN)学习算法之----基于LeNet网络的中文验证码识别
基于Windows10 x64+visual Studio2013+Python2.7.12环境下的Caffe配置学习
集合的总结
热门文章
MySQL的主从架构
MongoDB 基础知识 (一)
用echo向文件写入字符串,尾部出现空格
设置linux环境变量LANG
rpm --import /etc/pki/rpm-gpg/RPM* 有什么用?
clone vmware虚拟机,启动的时候出现device eth0 does not seem to be present, delaying initialization错误
vmware虚拟机安装centos6.8后网卡获取不到ip问题解决
centos服务器需要安装的几个基础包
简化版的生产环境分区建议
centos 6 liveDVD和binDVD两个版本有什么区别?
Copyright © 2011-2022 走看看